echarts使用中需要注意的一些地方

Posted 2023-03-01

参考技术A echarts百度的骄傲，当然也是中国的骄傲。使用中，还是有些费解的地方，毕竟是个复杂的图表，在此罗列一些：

这个线按道理，是在option配置对象，属性xAxis、yAxis中设置，本以为是这样设置的：

结果不是。一番寻思，才发现在option配置对象，属性grid中设置的：

本以为是设置option配置对象属性backgroundColor，结果不是，还是设置grid中属性backgroundColor：

itemStyle中的属性color，对于折线图来说，是设置线上面的小圆点（标志图形类型），真正设置内容填充色，要这么设置：

不单单是在option配置对象，属性xAxis、yAxis中设置两个对象就可以，还要在series中做好呼应，设置响应的xAxisIndex、yAxisIndex，才会出来两根轴：

可能大家第一时间，以为是option配置对象，属性color配置原因，还要在series中做好呼应，设置上name：

原因是不能设置barWidth，可以改用barMaxWidth或者barCategoryGap，来代替

想要鼠标经过，变成一根直线的提示，不单单要设置axisPointer，还需要对应设置trigger为axis：

打开控制台，查看tooltip提示框，不是canvas绘制出来的，是一个div元素class="echarts-tooltip zr-element"；可能是页面中css样式设置，影响到了。