亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

mumumu / 3829人閱讀

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

一.場景

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

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

二.效果圖

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

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

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

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

三.echarts3的api支持嗎

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

四.思路

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

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

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

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軸對應(yīng)的，否則，畫出來的圖形是與數(shù)據(jù)對應(yīng)不上的。

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

3.普及一小技巧

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

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

知道上面這個(gè)小技巧后，我們就可以把這兩個(gè)數(shù)據(jù)集寫成下面這種格式了: 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} 
 : {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è)試試:

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

2.1原來的格式:

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

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

---
---

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

六.總結(jié)

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/21644.html

相關(guān)文章

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

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

    J4ck_Chan 評論0 收藏0

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

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

    isaced 評論0 收藏0

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

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

    MonoLog 評論0 收藏0

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

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

    wanglu1209 評論0 收藏0

發(fā)表評論

0條評論

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