总结echarts绘图样式更改

最近我所做的业务都与画各种图有关,地图,折线图,柱状图等等。echarts上手还是挺容易的,就是绘图改样式的时候查文档需要一些时间。我这里将平时经常需要改的样式做个总结。

关于坐标轴的样式

平时开发过程中,更改坐标轴样式相当多,先上效果图再做更改样式的介绍:
折线图:
总结echarts绘图样式更改

折线图:
总结echarts绘图样式更改
散点图:
总结echarts绘图样式更改
平滑曲线的折线图:
总结echarts绘图样式更改

更改x,y轴的样式:

有几个属性:
axisLine:坐标轴轴线的设置
axisTick:坐标轴刻度相关设置
axisLabel:坐标卓刻度标签的相关设置
splitLine:坐标轴在grid区域的分割线

了解了这些 其实就很好更改样式了,(其实主要是有时候我会忘。。。哭~~~~~)
总结echarts绘图样式更改

关于更改图例

总结echarts绘图样式更改
首先关于图例的位置,我自己比较喜欢使用百分比或者是‘top’,‘middle’,‘bottom’这样的,这样自适应比较好。

更改图例项的形状

总结echarts绘图样式更改
legend.orient ========> 图例列表的布局朝向

更改tooltip的样式

tooltip.trigger =======》触发类型
总结echarts绘图样式更改

更改折线的平滑

series[i]-line.smooth ====> 是否平滑显示折线
总结echarts绘图样式更改
有个areaStyle可以更改区域填充样式:color----使用渐变色即可做成上图颜色
总结echarts绘图样式更改
(暂时写到这里。。。。我感觉没啥写的 就是查文档的事 = =!)