这些东西要是有精力和时间可以通读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();});