ECharts修改坐标轴，坐标轴字体，坐标轴网格样式以及控制坐标轴是否显示

首先要将一个图表显示在前端页面上：

var myChart = echarts.init(document.getElementById('testDIV'));     //初始化echarts页面显示的空间

//------------------------- begin-----------------------------var myOption = {
//              backgroundColor: "#eee",   // echarts图表的背景颜色，默认为透明tooltip : {trigger: 'axis',axisPointer : {            // 坐标轴指示器，坐标轴触发有效type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'}},legend: {data: ['交警', '武警','协警'],textStyle: {  color: '#fff'          //legend字体颜色 }},grid: {left: '3%',right: '7%',top:'15%',bottom: '15%',containLabel: true},xAxis:  {type: 'value',// x轴的字体样式axisLabel: {        show: true,textStyle: {color: '#fff',fontSize:'16'}},// 控制网格线是否显示splitLine: {show: false, //  改变轴线颜色lineStyle: {// 使用深浅的间隔色color: ['red']}                            },// x轴的颜色和宽度axisLine:{lineStyle:{color:'#fff',width:3,   //这里是坐标轴的宽度,可以去掉}}},yAxis: {type: 'category',data: ['福田','南山','罗湖','盐田','龙华','宝安','龙岗'],// y轴的字体样式axisLabel: {show: true,textStyle: {color: '#fff'}},// y轴的颜色和宽度axisLine:{lineStyle:{color:'#fff',width:1,                  //这里是坐标轴的宽度}}},series: [{name: '交警',type: 'bar',stack: '总量',label: {normal: {show: true,position: 'insideRight'}},data: [320, 302, 301, 334, 390, 330, 320]},{name: '武警',type: 'bar',stack: '总量',label: {normal: {show: true,position: 'insideRight'}},data: [120, 132, 101, 134, 90, 230, 210]},{name: '协警',type: 'bar',stack: '总量',label: {normal: {show: true,position: 'insideRight'}},data: [220, 182, 191, 234, 290, 330, 310]},]};//--------------------------- end-----------------------------

 myChart.setOption(myOption);  // 将图标显示在页面上

详解该段代码

xAxis:  {type: 'value',    //这行代码表示该轴的类型为value// x轴的字体样式axisLabel: {        show: true,    //这行代码控制着坐标轴x轴的文字是否显示textStyle: {color: '#fff',   //x轴上的字体颜色fontSize:'16'    // x轴字体大小}},// 控制网格线是否显示splitLine: {show: false,   // 网格线是否显示//  改变样式lineStyle: {color: '#ccc'   // 修改网格线颜色     }                            },// x轴的颜色和宽度axisLine:{lineStyle:{color:'#fff', // x坐标轴的轴线颜色width:3,      //这里是坐标轴的宽度,可以去掉}}},

也可以在以上代码的轴线中加入：

     //  隐藏坐标轴axisLine: {show: false},// 去除坐标轴上的刻度线axisTick: {show: false}

注：
坐标轴中的 type 可以为value或者category，即确定该轴为值轴或者类目轴，
example：在一个坐标系中的条形图中：
x轴为男生，女生等类别选项，那么该轴就为类目轴，
y轴为类别的数量或者其他值类(诸如年龄，身高等等)，就为值轴。

Y轴修改设置同X轴

ECharts修改坐标轴，坐标轴字体，坐标轴网格样式以及控制坐标轴是否显示相关推荐

R语言ggplot2可视化轴标签重叠问题解决实战：修改轴标签字体、轴标签垂直于坐标轴（或者旋转特定角度）
R语言ggplot2可视化轴标签重叠问题解决实战:修改轴标签字体.轴标签垂直于坐标轴(或者旋转特定角度) 目录
python设置坐标轴刻度值字体大小_python 设置xlabel,ylabel 坐标轴字体大小，字体类型...
本文介绍了python 设置xlabel,ylabel 坐标轴字体大小,字体类型,分享给大家,具体如下: #--coding:utf-8-- import matplotlib.pyplot as p ...
Echarts 修改X轴字体大小
axisLabel: {textStyle: {color: '#000',fontSize:30,}}, axisLabel 哦!!!!!!!!!!他有几个属性长的很相似的
echarts折线图常见配置项分割线虚线样式显示y轴符号设置间隔
option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: { ...
ECharts修改坐标轴，坐标轴字体，坐标轴网格样式
var myChart = echarts.init(document.getElementById('testDIV')); //初始化echarts页面显示的空间//--------------- ...
python使用matplotlib可视化：设置坐标轴的范围、设置主次坐标轴刻度、坐标轴刻度显示样式、坐标轴刻度数颜色、小数点位数、坐标轴刻度网格线、线条类型、数据点形状标签、文本字体、颜色、大小等
python使用matplotlib可视化:设置坐标轴的范围.设置主次坐标轴刻度.坐标轴刻度显示样式.坐标轴刻度数颜色.小数点位数.坐标轴刻度网格线.线条类型.数据点形状标签.文本字体.颜色.大小等 ...
Py之Matplotlib：python包之Matplotlib库图表绘制经验总结(中英文字体修改、横坐标文字进行横/纵向显示、控制坐标轴范围等)之详细攻略
Py之Matplotlib:python包之Matplotlib库图表绘制经验总结(中英文字体修改.横坐标文字进行横/纵向显示.控制坐标轴范围等)之详细攻略目录 1.Matplotlib库图表绘制包 ...
Matlab Plot添加图名、图例、坐标轴名、坐标网格；画虚线、点划线、两条线；更改字体、字号、轴正方
最终效果: 代码如下: clc;clear;close all; x1=[-50 -40 -30 -20 -10 0 10 20 30 40 50]; y1=[-50 -30 -10 10 30 5 ...
echarts name 坐标轴_echarts字体大小调整，坐标轴name设置等一些问题
关于echarts的一些配置一下记录中的记录规则,尽量以echarts对应的数据进行说明,#prop#表示可以设置的值总结一下echarts的配置,方便扩展 (-)字体调整 1.1 坐标轴字体大小 ...

ECharts修改坐标轴，坐标轴字体，坐标轴网格样式以及控制坐标轴是否显示

ECharts修改坐标轴，坐标轴字体，坐标轴网格样式以及控制坐标轴是否显示相关推荐

最新文章

热门文章