成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

mumumu / 3753人閱讀

摘要：原來(lái)的格式修改為現(xiàn)在的格式篇幅所限，我這里沒(méi)有詳細(xì)列出來(lái)詳細(xì)請(qǐng)?jiān)L問(wèn)我的的折線圖怎么分段顯示不同的顏色再次刷新，是不是兩條斷線連上了呢。

一.場(chǎng)景

在使用echarts3做圖表的時(shí)候，可能會(huì)遇到一些特殊的需求：

星期一到星期四這幾個(gè)點(diǎn)的折線顯示一個(gè)顏色，周五到周日這幾個(gè)點(diǎn)的折線顯示另外一個(gè)顏色，來(lái)起到強(qiáng)調(diào)區(qū)別的作用。

二.效果圖

先看一下效果圖，你會(huì)有一個(gè)更清晰的認(rèn)識(shí):

從圖中大家可以看到,整個(gè)折線圖分了2段顏色：周一到周四的折線是紅色，周五到周日的折線是黑色。 這樣一來(lái)，是不是就有個(gè)很明顯的強(qiáng)調(diào)區(qū)別的作用啦。

demo下載點(diǎn)擊這里。

那么，怎么去實(shí)現(xiàn)這個(gè)效果呢?別著急，一步一步來(lái)，往下看。

三.echarts3的api支持嗎

看到這樣的需求，第一反應(yīng)就是去api里看看有支持的函數(shù)沒(méi)。。。 在api找到半天，果然不支持。領(lǐng)導(dǎo)非要這樣做，echarts3的api里又不支持，那么怎么辦？ 答案：換思路

四.思路

1.折線圖的數(shù)據(jù)點(diǎn)在哪里被賦值的?

我們知道在echarts中圖表是通過(guò)series來(lái)實(shí)現(xiàn)的：

其中圈紅的第一個(gè)就是圖形類型為折線圖時(shí)用到的配置，折線圖的這些數(shù)據(jù)點(diǎn)都是通過(guò)里面的這個(gè)data數(shù)組來(lái)生成的。

2.拆分為多個(gè)series

將一個(gè)完整的折線分成兩段折線，不同的折線顯示不同的顏色即可。

我們知道周一到周日總共是7個(gè)點(diǎn)，series的data數(shù)據(jù)為:

series: [
        {
            name: "指數(shù)",
            type: "line",
            data: [4, 8, 16, 32, 64, 128, 256]
        }
    ]

如果拆分成兩段折線的話，就得用兩個(gè)series,兩個(gè)series就得有兩個(gè)數(shù)據(jù)集(data數(shù)組).

其中第一個(gè)series的數(shù)據(jù)集為:

4, 8, 16, 32, 64

第二個(gè)series的數(shù)據(jù)集為:

128,256

但是在echarts中，圖形的每一個(gè)點(diǎn)都要有與x軸和y軸對(duì)應(yīng)的，否則，畫出來(lái)的圖形是與數(shù)據(jù)對(duì)應(yīng)不上的。

所以我們需要對(duì)上面的兩個(gè)數(shù)組進(jìn)行一下改造。

3.普及一小技巧

在echarts中，若是不想讓某個(gè)點(diǎn)展示，則這個(gè)點(diǎn)對(duì)應(yīng)的data數(shù)值可以用"-"來(lái)表示。 反正這個(gè)知識(shí)點(diǎn)沒(méi)有在echarts3的api里提到，應(yīng)該在echarts2中繼承下來(lái)的知識(shí)點(diǎn)吧。

4.轉(zhuǎn)化數(shù)據(jù)集

知道上面這個(gè)小技巧后，我們就可以把這兩個(gè)數(shù)據(jù)集寫成下面這種格式了: series[0].data:

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

series[1].data:

["-","-","-","-","-",128,256]
五.摞代碼

既然思路都有了，那么我們開(kāi)始試試吧。

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} 
 : {c}"
    },
    legend: {
        left: "left",
        data: ["指數(shù)"]
    },
    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: "指數(shù)",
            type: "line",
            data:[]
        },
        {
            name: "指數(shù)",
            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.走一個(gè)試試:

兩條線是分出來(lái)了，但是中間是有個(gè)斷點(diǎn)。如果你覺(jué)得這樣影響需求的話，則直接在series[1].data里把這個(gè)點(diǎn)補(bǔ)出來(lái)即可。

2.1原來(lái)的格式:

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

2.2修改為現(xiàn)在的格式:
篇幅所限，我這里沒(méi)有詳細(xì)列出來(lái).
詳細(xì)請(qǐng)?jiān)L問(wèn)我的blog: echarts3的折線圖怎么分段顯示不同的顏色

---
---

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

六.總結(jié)

1.遇見(jiàn)此類需求時(shí)，先看看api里提供了類似的方法沒(méi)有,有的話，就不用費(fèi)大頭筋兒了；
2.沒(méi)有的話，就得轉(zhuǎn)變思路了，將一個(gè)折線分成多個(gè)折線。
3.巧妙利用四.3中的小知識(shí)點(diǎn)來(lái)繪制空點(diǎn)
4.實(shí)際開(kāi)發(fā)中可能要比這個(gè)demo要復(fù)雜一些，但是基本思路都是一樣的。
demo下載點(diǎn)擊這里。歡迎大家訪問(wèn)我的blog，有更精彩的文章吆！
碼字不易，轉(zhuǎn)載請(qǐng)注明出處。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/21644.html

相關(guān)文章

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

    摘要：原來(lái)的格式修改為現(xiàn)在的格式篇幅所限，我這里沒(méi)有詳細(xì)列出來(lái)詳細(xì)請(qǐng)?jiān)L問(wèn)我的的折線圖怎么分段顯示不同的顏色再次刷新，是不是兩條斷線連上了呢。 一.場(chǎng)景 在使用echarts3做圖表的時(shí)候，可能會(huì)遇到一些特殊的需求： 星期一到星期四這幾個(gè)點(diǎn)的折線顯示一個(gè)顏色，周五到周日這幾個(gè)點(diǎn)的折線顯示另外一個(gè)顏色，來(lái)起到強(qiáng)調(diào)區(qū)別的作用。 二.效果圖 先看一下效果圖，你會(huì)有一個(gè)更清晰的認(rèn)識(shí): showImg(...

    J4ck_Chan 評(píng)論0 收藏0

  • 【echarts3】 折線圖我踩過(guò)的那些坑 （tooltip 設(shè)置，line 單個(gè)點(diǎn)/散點(diǎn)不顯示問(wèn)題

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

    isaced 評(píng)論0 收藏0

  • 【echarts3】 折線圖我踩過(guò)的那些坑 （tooltip 設(shè)置，line 單個(gè)點(diǎn)/散點(diǎn)不顯示問(wèn)題

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

    MonoLog 評(píng)論0 收藏0

  • Python學(xué)習(xí)之路14-生成數(shù)據(jù)

    摘要：小結(jié)本篇主要講述了如何生成數(shù)據(jù)集以及如何對(duì)其進(jìn)行可視化如何使用創(chuàng)建簡(jiǎn)單的圖表如果使用散點(diǎn)圖來(lái)探索隨機(jī)漫步過(guò)程如何使用創(chuàng)建直方圖，以及如何使用直方圖來(lái)探索同時(shí)擲兩個(gè)面數(shù)不同的骰子的結(jié)果。 《Python編程：從入門到實(shí)踐》筆記。從本篇起將用三篇的篇幅介紹如何用Python進(jìn)行數(shù)據(jù)可視化。 1. 前言 從本篇開(kāi)始，我們將用三篇的篇幅來(lái)初步介紹如何使用Python來(lái)進(jìn)行數(shù)據(jù)可視化操作。本篇的...

    wanglu1209 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<