echarts使用大总结

echarts图表x轴数据太多显示不全的问题

问题如图，x轴数据条数过多可能导致x轴显示不全，开始我使用下面方法

xAxis: {type: "category",min: min,max: max,data:time,axisLabel: {interval:num,//interval为x轴两相邻数据之间所包含数据条数，num为x轴总条数除以24所得结果show: true,textStyle: {color: "#a9a9a9", //更改坐标轴文字颜色fontSize: 10 //更改坐标轴文字大小},rotate: 40,formatter: function(v) {var date = new Date(v);return `${('0' + date.getHours()).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}`;// return `${('0' + date.getHours()).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}:${('0' + date.getSeconds()).slice(-2)}`;},},

开始我以为这样设置是可以的，但是出现的问题是后面有些数据没有显示完全，丢掉一部分数据，后来经过改进要在axisLabel设置最大值最小值属性，代码如下

xAxis: {type: "category",data:time,axisLabel: {interval:num,show: true,textStyle: {color: "#a9a9a9", //更改坐标轴文字颜色fontSize: 10 //更改坐标轴文字大小},rotate: 40,formatter: function(v) {var date = new Date(v);return `${('0' + date.getHours()).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}`;// return `${('0' + date.getHours()).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}:${('0' + date.getSeconds()).slice(-2)}`;},showMinLabel: true,//显示最小值showMaxLabel: true,//显示最大值},

这样设置两属性之后，图表就会绘制完全，所以数据都有显示。

echarts的X轴数据太多出现了间隔不一致的问题，请问怎么解决?

xAxis: [{axisLabel: {interval: 2}
}]interval 是指间隔多少个类别画栅格，为 0 时则每个数据都画，为 1 时间隔 1 个画，以此类推。

Echarts 修改折线的颜色和折线的点的大小方法

series: [{                            type: 'line',smooth:true,//折点是圆弧状的showSymbol: true,symbol: 'circle',     //折点设定为实心点symbolSize: 20,   //设定实心点的大小hoverAnimation: false,itemStyle:{ normal:{ color:'#fc8a0f', //折点颜色lineStyle:{ color:'#ff9c35' //折线颜色} } }animation: false,data: dataa,                          markPoint: {     //显示一定区域内的最大值和最小值data: [{ type: 'max', name: '最大值' },{ type: 'min', name: '最小值' }]}]

echarts下载图表按钮隐藏

在有些echarts图表里面，并不需要下载按钮下载图表的功能，这个时候，可以选择去掉或者隐藏起来。

解决办法很简单，找到toolbox属性，注释掉即可。


/* toolbox: {feature: {saveAsImage: {}}},*/

echarts y轴百分比显示

更改配置项yAxis:

yAxis: [{  type: 'value',  axisLabel: {  show: true,  interval: 'auto',  formatter: '{value} %'  },  show: true  }  ],

echarts更改坐标轴文字颜色及大小

xAxis: {data: anameArr,axisLabel: {show: true,textStyle: {color: '#c3dbff',  //更改坐标轴文字颜色fontSize : 14      //更改坐标轴文字大小}},axisTick: {show: false //是否显示刻度线},axisLine:{lineStyle:{color:'#315070' //更改坐标轴颜色}}
}

echarts渐变色实现方法

我使用的是echarts 4.2版本

在管网的文档中可查看其配置项，以柱状图为例：

首先在series中找type:‘line’

然后找到areaStyle

在color中有方法能生成渐变色：

// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: 'red' // 0% 处的颜色}, {offset: 1, color: 'blue' // 100% 处的颜色}],globalCoord: false // 缺省为 false
}
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: {type: 'radial',x: 0.5,y: 0.5,r: 0.5,colorStops: [{offset: 0, color: 'red' // 0% 处的颜色}, {offset: 1, color: 'blue' // 100% 处的颜色}],globalCoord: false // 缺省为 false
}
// 纹理填充
color: {image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
}

第二种方法：使用echarts内置的渐变色生成器echarts.graphic.LinearGradient

{type: 'bar',itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始[{offset: 0, color: '#000'},{offset: 0.5, color: '#888'},{offset: 1, color: '#ddd'}]                //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置)}}
}

效果：

echarts使用技巧（一）echarts的图表自适应resize问题、单选、缩放等

这些东西要是有精力和时间可以通读echarts文档，里面都有配置详细介绍。该博客只是把自己使用echarts遇到的问题记录下，并不全，加深印象，抛砖引玉而已，完整学习的请移步官方文档
1、legend设置单选

legend: {data:['db block gets', 'consistent gets'],selectedMode: 'single',
},

修改图例legend颜色，定义color数组，对应图例即可

color:['#48cda6','#fd87ab','#11abff','#ffdf33','#968ade'],  //手动设置每个图例的颜色
legend: {  //图例组件right:68,  //图例组件离右边的距离orient : 'vertical',  //布局  纵向布局width:40,      //图行例组件的宽度,默认自适应x : 'right',   //图例显示在右边itemWidth:10,  //图例标记的图形宽度itemHeight:10, //图例标记的图形高度data:['30%','10%','15%','20%','25%'],textStyle:{    //图例文字的样式color:'#333',fontSize:12}
},

效果图:

2、添加缩放滚动

加上dataZoom配置

dataZoom: [{show: true,realtime: true,start: 65,end: 85},{type: 'inside',realtime: true,start: 45,end: 85}
],

需要配合grid配置给dataZoom留出底部位置

也可以将show设置为false就不会显示那个滚动图，但是依然有滚动效果

grid: {top: 30,bottom: 60
},

3、视图里面添加多个线条：在series数组里面继续加对象即可

series: [{name:'db block gets',type:'line',xAxisIndex: 1,//加这个dataZoom对该对象不起作用，需要去掉这个属性smooth: true,//代表平滑曲线，如需要折线，则去掉即可data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]},{name:'consistent gets',type:'line',smooth: true,data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]}
]

4、视图里面加阴影提示：tooltip，提示框组件

show，默认true，是否显示提示框组件

trigger，触发类型，item、axis、none，当为none的时候代表什么都不触发，就不会显示提示框

axisPointer，坐标轴指示器配置项，实际上坐标轴指示器的全部功能，都可以通过轴上的 axisPointer 配置项完成

label属性加formatter函数，可以格式化提示框显示内容

　　tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label:{formatter: function (params) {return '快照时间：' + params.value;}}}
},

效果图如下:

5、雷达图添加阴影提示

series: [{type: 'radar',tooltip: {trigger: 'item'},itemStyle: {normal: {areaStyle: {type: 'default'}}},data: [{value: this.radarValues,name: '指标值'}]}
]

6、一般echarts里面配色都是默认的，如果需要修改，就加上 color:[]配置项，这里也推荐一个取色器，很好用Pipette

7、stackedBar图形配置

{name: '表使用比例',type: 'bar',stack: '总量',//代表叠加的形态，如果去掉这个，该条就会单独出来label: {  //就是每条目上会显示数字，去掉label属性就不显示normal: {show: true,position: 'insideRight'}},data: [20, 2, 1, 34, 20]
},

8、legrend的data数组里面的内容必须与series配置里面对象的name完全一样，否则会不显示。所以当你legrend不显示的时候，一定是这里没对应上，修改即可。

9、echarts的图表自适应，resize问题

echarts官网的实例都具有响应式功能，确实不是单纯的宽度改变，是每次调整后图表是重新绘制。猜想echart源码里应该有resize这个API，打开调试器，打开echart源码，Ctrl+F，果然找到了

echart图表本身是提供了一个resize的函数的。

于是当浏览器发生resize事件的时候，让其触发echart的resize事件，重绘canvas。

用window.onresize = myChart.resize; 可以完成自适应，就是把window的onresize事件赋值为echart的resize事件

当然这是单个图表的情况，要是多个图表，发现会不起作用。

多个图表可以使用addEventListener

window.addEventListener("resize", () => { this.myChart.resize();  this.myChart2.resize();  this.myChart3.resize();
});

在vue组件上就可以直接单个组件添加进事件列表

myLogLine.setOption(option);
window.addEventListener("resize", () => { myLogLine.resize();});myLine.setOption(option);
window.addEventListener("resize", () => { myLine.resize();});

ECharts 折线图数据堆叠问题解决方法

数据堆叠即：

第2条数据值 = 第1条数据值 + 第2条数据值

第3条数据值 = 第2条数据值 + 第3条数据值

…

以此类推

部分代码及其图表如下：

option = {title: {text: '折线图堆叠'},tooltip: {trigger: 'axis'},legend: {data:['直接访问','搜索引擎']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: ['周一','周二','周三','周四','周五','周六','周日']},yAxis: {type: 'value'},series: [{name:'直接访问',type:'line',stack: '总量',data:[320, 332, 301, 334, 390, 330, 320]},{name:'搜索引擎',type:'line',stack: '总量',data:[0, 0, 0, 0, 1290, 0, 0]}]
};

最后一步步查找，原来是 stack 的原因，stack 值为 ‘总量是’，折线图堆叠（第二条线的数值=本身的数值+第一条线的数值，第三条的数值=第二条线图上的数值+本身的数值，以此类推…）显示
解决方法：
去掉series中stack属性，或者将stack设置为不同的值
去掉stack属性后的图表，数值正常

echart如何去除折线图中默认的网格

echart中折线图中有默认的网格如何去除呢？

原图如下

附上代码

var myChart = echarts.init(document.getElementById('main'));
option = {title: {text: '折线图堆叠'},grid: {show:false},tooltip: {trigger: 'axis'},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: ['14:00','15:00','16:00','17:00','18:00','19:00','20:00']        },yAxis: {type: 'value',},series: [{name:'搜索引擎',type:'line',areaStyle: {normal: {color:'#87CEFA'}},data:[488, 932, 1100, 1500, 1702, 2045, 2244]}]
};
myChart.setOption(option);

去除后的图如下

只要在对应的Axis中的属性splitLine设置show：false即可

完整代码

var myChart = echarts.init(document.getElementById('main'));
option = {title: {text: '折线图堆叠'},grid: {show:false},tooltip: {trigger: 'axis'},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: ['14:00','15:00','16:00','17:00','18:00','19:00','20:00'],//splitLine:{//show:false//}},yAxis: {type: 'value',splitLine:{show:false},},series: [{name:'搜索引擎',type:'line',areaStyle: {normal: {color:'#87CEFA'}},data:[488, 932, 1100, 1500, 1702, 2045, 2244]}]
};
myChart.setOption(option);

设置echarts 的网格样式颜色

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],//网格样式splitLine: {show: true,lineStyle:{color: ['red'],width: 1,type: 'solid'}}},yAxis: {type: 'value',//网格样式splitLine: {show: true,lineStyle:{color: ['blue'],width: 1,type: 'solid'}}},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',smooth: true}]
};

效果图如下: