echarts3的折線圖怎麼分段顯示不一樣的顏色

一.場景

在使用echarts3作圖表的時候，可能會遇到一些特殊的需求：

星期一到星期四這幾個點的折線顯示一個顏色，週五到週日這幾個點的折線顯示另一個顏色，來起到強調區別的做用。

二.效果圖

先看一下效果圖，你會有一個更清晰的認識:

從圖中你們能夠看到,整個折線圖分了2段顏色：週一到週四的折線是紅色，週五到週日的折線是黑色。 這樣一來，是否是就有個很明顯的強調區別的做用啦。

demo下載點擊這裏。

那麼，怎麼去實現這個效果呢?彆着急，一步一步來，往下看。

三.echarts3的api支持嗎

看到這樣的需求，第一反應就是去api裏看看有支持的函數沒。。。 在api找到半天，果真不支持。領導非要這樣作，echarts3的api裏又不支持，那麼怎麼辦？ 答案：換思路

四.思路

1.折線圖的數據點在哪裏被賦值的?

咱們知道在echarts中圖表是經過series來實現的：

其中圈紅的第一個就是圖形類型爲折線圖時用到的配置，折線圖的這些數據點都是經過裏面的這個data數組來生成的。

2.拆分爲多個series

將一個完整的折線分紅兩段折線，不一樣的折線顯示不一樣的顏色便可。

咱們知道週一到週日總共是7個點，series的data數據爲:

series: [
        {
            name: '指數',
            type: 'line',
            data: [4, 8, 16, 32, 64, 128, 256]
        }
    ]

若是拆分紅兩段折線的話，就得用兩個series,兩個series就得有兩個數據集(data數組).

其中第一個series的數據集爲:

4, 8, 16, 32, 64

第二個series的數據集爲:

128,256

可是在echarts中，圖形的每個點都要有與x軸和y軸對應的，不然，畫出來的圖形是與數據對應不上的。

因此咱們須要對上面的兩個數組進行一下改造。

3.普及一小技巧

在echarts中，如果不想讓某個點展現，則這個點對應的data數值能夠用'-'來表示。 反正這個知識點沒有在echarts3的api裏提到，應該在echarts2中繼承下來的知識點吧。

4.轉化數據集

知道上面這個小技巧後，咱們就能夠把這兩個數據集寫成下面這種格式了: series[0].data:

[4, 8, 16, 32, 64,'-','-']

series[1].data:

['-','-','-','-','-',128,256]

五.摞代碼

既然思路都有了，那麼咱們開始試試吧。

1.option的配置和主要代碼以下：

// blog: phping.sinaapp.com
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
option = null;
option = {
    title: {
        text: 'echarts3的折線圖分段顯示不一樣的顏色',
        left: 'center',
        link: 'http://phping.sinaapp.com'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c}'
    },
    legend: {
        left: 'left',
        data: ['指數']
    },
    xAxis: {
        type: 'category',
        name: 'x',
        splitLine: {show: false},
        data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    yAxis: {
        type: 'log',
        name: 'y'
    },
    series: [
        {
            name: '指數',
            type: 'line',
            data:[]
        },
        {
            name: '指數',
            type: 'line',
            data:[]
        }
    ]
};
if (option && typeof option === "object") {
    var startTime = +new Date();
    option.series[0].data = [4, 8, 16, 32, 64,'-','-'];
    option.series[1].data = ['-','-','-','-',64,128,256];
    myChart.setOption(option, true);
}

2.走一個試試:

兩條線是分出來了，可是中間是有個斷點。若是你以爲這樣影響需求的話，則直接在series[1].data裏把這個點補出來便可。

2.1原來的格式:

option.series[0].data = [4, 8, 16, 32, 64,'-','-'];
option.series[1].data = ['-','-','-','-','-',128,256];

2.2修改成如今的格式:
篇幅所限，我這裏沒有詳細列出來.
詳細請訪問個人blog: echarts3的折線圖怎麼分段顯示不一樣的顏色

---
---

再次刷新，是否是兩條斷線連上了呢。效果就跟文首的demo是同樣的了。

六.總結

1.碰見此類需求時，先看看api裏提供了相似的方法沒有,有的話，就不用費大頭筋兒了；
2.沒有的話，就得轉變思路了，將一個折線分紅多個折線。
3.巧妙利用四.3中的小知識點來繪製空點
4.實際開發中可能要比這個demo要複雜一些，可是基本思路都是同樣的。
demo下載點擊這裏。歡迎你們訪問個人blog，有更精彩的文章吆！碼字不易，轉載請註明出處。