echarts的各种配置
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今天就先到这，后面再慢慢补充