echarts很简单,只需要按照echarts官网的实例引入就行,但是往往给我们的设计图有设计师的各种想法,比如颜色,间距等等,基本上大部分时间都是在想该怎么调,下面来整理下曾今在做echarts时遇到的哪些坑。
第一点,坐标轴离边框的距离过小导致数据显示不全,比如这样
那我们只需要设置 grid:{
x: 19,
y: 50,
x2: 90,
y2: 15
}就可以啦,一张图让你明白上面x,y4个参数代表啥,然后调就可以啦
2.x轴每个点的名称太长,设计师要求斜着放,字体颜色黑色太丑,要换个颜色,坐标颜色,宽度也要改,什么什么的,那就这样设置
注意,x轴和y轴都是可以倾斜的,而且设置也是一样一样的,只是放置位置不一样,一个是在xAxis,一个在yAxis,配置如下
axisLine: {
lineStyle: {
type: 'solid',
color: '#fff', // 左边线的颜色
width: '2'// 坐标线的宽度
}
},
axisLabel: {
interval: 0,
rotate: 35, // x轴数据倾斜角度
show: true,
textStyle: {
color: '#0FEBFF'
}
}
ok,就是这么顺滑。如下
3.关于颜色,比如这种估计会吐槽你,这是什么古老色彩配置,必须改,这个时候不慌,先让设计出颜色,然后一行代码的事,具体配置如下
直接在option里面定义颜色color: ['#4CB0E5', "#46DAA4", "#00D2FF", "#F36511", "#D8C344", "#DD045D"],,然后就是这样子的
4.比如像这种堆叠区域图设计觉得太丑,要你给它设计个渐变颜色,来增强层次感
在series里面直接加
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#83bff6' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' }
]
)
},
完全不虚他
5.滑块的设置,比如这种选中与补选中,设计师让你换种颜色
直接在dataZoom里面设置
fillerColor: '#269cdb',
backgroundColor: '#33384b',
具体配置如下
dataZoom: [
{
start: 0, // 默认为0
end: 100 - 1500 / 31, // 默认为100
type: 'slider',
show: true,
xAxisIndex: [0],
handleSize: 0, // 滑动条的 左右2个滑动条的大小
height: 10, // 组件高度
left: '10%', // 左边的距离
right: '10%', // 右边的距离
bottom: 0, // 右边的距离
borderColor: '#000',
fillerColor: '#269cdb',
borderRadius: 5,
backgroundColor: '#33384b', // 两边未选中的滑动条区域的颜色
showDataShadow: false, // 是否显示数据阴影 默认auto
showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
realtime: true, // 是否实时更新
filterMode: 'filter'
},
// 下面这个属性是里面拖到
{
type: 'inside',
show: true,
xAxisIndex: [0],
start: 0, // 默认为1
end: 100 - 1500 / 31 // 默认为100
}
],
ok今天就先到这,后面再慢慢补充