Echarts 自定义图表颜色formatter

Echarts默认颜色从全局color里面取，一个系列按顺序取一个颜色。

但有时候我们想同一个序列里面的图表有多种不同的颜色，比如下图：

series是包含一个元素的数组，也就是说下面的bar柱状图数据是一个数组数据data里面取到的值。

series: [{

　　type: 'bar',

　　data: [

　　　　{value: 60, color:'#1b8cff'},

　　　　{value: 62, color:'#ff411b'},

　　　　{value: 63, color:'#ff411b'},

　　　　{value: 61, color:'#1b8cff'},

　　　　{value: 65, color:'#ff411b'},

　　　　{value: 79, color:'#ff411b'},

　　　　80,56,72,56

　　]

}]

这种时候，我们该怎么实现呢？

那就是formatter函数呢。

series里面data格式如上，itemStyle对象如下：

itemStyle: {
　　normal: {
　　　　color: function(params){
　　　　　　if(params.data!==null && params.data['color']!=undefined){
　　　　　　　　return params.data['color'];
　　　　　　}else{
　　　　　　　　return '#1b8cff';
　　　　　　}
　　　　}
　　}
}

 

data数组里面，有color属性的就按自己的color值添加颜色，没有color属性的就按我们定义的值添加颜色。

还有一个很重要的地方，我发现现在官方文档里面并没有normal这个了，

导致我每次都是直接把color放在itemStyle里面使用，这样会导致formatter函数失效，

所以千万记得，把normal带上。

 

我发现，在自定义样式的时候，Echarts提供了很多回调函数formatter供我们使用，

但是我经常摸不着头脑，这个formatter到底怎么用？

其实每个formatter回调里面都有一个默认的参数params。

这是最重要也是最管用的啦，你要是不知道如何下手，那么先看看这个params到底是什么。

我每次就是直接先console出这个params，再对照着官方文档利用params里面的对象，

挑选出自己需要的加以修改。

所以，万能的方案就是先

formatter: function(params){

　　console.log(params);

}

 

 

 

还有一个就是类似于这样的图表：

 

 我们想要在一条曲线上出现某一段是另外一种颜色。

其实，这是用两组数据实现的，先看series:

series: [
　　{
　　　　type: 'line',
　　　　data: [73, 60, 68, 98, 103, 95, 62, 60, null, null],
　　　　itemStyle: {
　　　　　　normal: {
　　　　　　　　color: '#ccc'
　　　　　　}
　　　　}
　　},
　　{
　　　　type: 'line',
　　　　data: [null, null, null, null, null, null, null, 60, 98, 80],
　　　　itemStyle: {
　　　　　　normal: {
　　　　　　　　color: '#f00'
　　　　　　}
　　　　}
　　}
]

从data分析，可以看出来，第一组数据后面两个值为null；

　　　　　　　　　　　　第二组数据后面三个值不为null外，前面全部为null；

注意这里两个series元素是公用一个x轴一个y轴的，所以很明显

这条曲线是由两条曲线连接而成的，

第一条曲线负责第一种颜色，第二条曲线负责第二种颜色。

关键之处在于两条曲线要对接在一起，所以两条曲线的数据格式和数量应该要保持一致，

这样就呼应我前面说的data分析了。