echarts3的折線圖怎么分段顯示不同的顏色

mumumu 發布于2019-06-27 13:50 / 3736人閱讀

摘要：原來的格式修改為現在的格式篇幅所限，我這里沒有詳細列出來詳細請訪問我的的折線圖怎么分段顯示不同的顏色再次刷新，是不是兩條斷線連上了呢。

一.場景

在使用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} 
{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，有更精彩的文章吆！
碼字不易，轉載請注明出處。

GPU云服務器云服務器不同顏色的進度條不同顏色的圖像識別子報表分段顯示頁碼不同顏色

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/21644.html

echarts3的折線圖怎么分段顯示不同的顏色

摘要：原來的格式修改為現在的格式篇幅所限，我這里沒有詳細列出來詳細請訪問我的的折線圖怎么分段顯示不同的顏色再次刷新，是不是兩條斷線連上了呢。一.場景在使用echarts3做圖表的時候，可能會遇到一些特殊的需求：星期一到星期四這幾個點的折線顯示一個顏色，周五到周日這幾個點的折線顯示另外一個顏色，來起到強調區別的作用。二.效果圖先看一下效果圖，你會有一個更清晰的認識: showImg(...

J4ck_Chan 2019-08-21 10:52 評論0 收藏0
【echarts3】折線圖我踩過的那些坑（tooltip 設置，line 單個點/散點不顯示問題

摘要：折線圖小技巧折線圖功能豐富且官方文檔詳細易懂，上手比較容易，這篇文章將分享一些項目中踩過的坑，示例主要以多條曲線為主，對大家完成一些曲線和的展示及交互有所幫助基本使用文檔寫得非常詳細清晰，官方示例也很豐富，中還有很多功能更強大的示例篇的是很 echarts 折線圖小技巧 echarts 折線圖功能豐富且官方文檔詳細易懂，上手比較容易，這篇文章將分享一些項目中踩過的坑，示例主要以多條曲線...

isaced 2019-08-02 15:58 評論0 收藏0
【echarts3】折線圖我踩過的那些坑（tooltip 設置，line 單個點/散點不顯示問題

摘要：折線圖小技巧折線圖功能豐富且官方文檔詳細易懂，上手比較容易，這篇文章將分享一些項目中踩過的坑，示例主要以多條曲線為主，對大家完成一些曲線和的展示及交互有所幫助基本使用文檔寫得非常詳細清晰，官方示例也很豐富，中還有很多功能更強大的示例篇的是很 echarts 折線圖小技巧 echarts 折線圖功能豐富且官方文檔詳細易懂，上手比較容易，這篇文章將分享一些項目中踩過的坑，示例主要以多條曲線...

MonoLog 2019-08-21 17:52 評論0 收藏0
Python學習之路14-生成數據

摘要：小結本篇主要講述了如何生成數據集以及如何對其進行可視化如何使用創建簡單的圖表如果使用散點圖來探索隨機漫步過程如何使用創建直方圖，以及如何使用直方圖來探索同時擲兩個面數不同的骰子的結果。《Python編程：從入門到實踐》筆記。從本篇起將用三篇的篇幅介紹如何用Python進行數據可視化。 1. 前言從本篇開始，我們將用三篇的篇幅來初步介紹如何使用Python來進行數據可視化操作。本篇的...

wanglu1209 2019-07-31 11:09 評論0 收藏0