最近使用echarts可视化的业务,但是有一些配置项需要修改,把这段时间的学习总结一下
1. 修改默认配置
a. 去掉分割线和网格线,在xAxis或者yAxis中设置
splitLine: { show: false }
b. 修改标题背景和颜色
title: { backgroundColor: '#fff', textStyle: { fontWeight: 'normal', color: '#ff00ff' } }
c. 设置坐标轴字体颜色和宽度,在xAxis或者yAxis中设置即可
axisLine:{ lineStyle:{ color:'yellow', 2 } }
d. 设置图形在页面出现的位置(一般处于中间)用于解决空间过小
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true, y: 10 // 设置从y为10开始 }
e:设置y,x轴不显示
xAxis: { show: false }, yAxis: { show: false }
f:y轴刻度线不显示,但是y轴字段显示
yAxis: { axisTick:{ show:false }, axisLine:{ lineStyle:{ color:'#FF7B24', 0 } } }
h:设置tooltip提示框:
formatter 函数可以格式化默认的显示,用户可以在里面实现自己的显示数据
i: 设置折线图线条平滑,可以通过设置smooth:true 解决
series : [ { name:'邮件营销', type:'line', smooth:true, stack: '总量', areaStyle: {normal: {}}, data:[120, 132, 101, 134, 90, 230, 210] } ]
在echarts中没有设置颜色时,默认使用echarts中设置的颜色,但是有时需要根据业务需要对某些类型的数据设置固定的颜色,此时就需要对每个数据项设置所需的颜色
j: 饼图:给每个数据项设置颜色
data:[ { value:335, name:'直接访问', itemStyle:{ normal:{color:'gray'} } } ]