echarts折線漸變 + 預測值

山野裡的小菊花發表於2018-06-26
Echarts

先來個效果圖


原理：使用echarts建立一個折線圖，漸變原理是使用虛擬地圖visualMap，預測值是使用了兩條線（第一根實線，最後一個值為空，第二根虛線，只保留最後一個值）

1、下載echarts-all-3.js，引入到頁面中，準備一個div盒子（必須有個最低高度，如果百分比高度，瀏覽器在載入時，可能會無法顯示出來）

<div id="safe-trending" style="width:628px;min-height: 125px;height:30%"></div>

2、漸變的核心部分：在option裡面增加配置項visualMap

show:false  // 隱藏 visualMap-continuous 元件 true的時候，左邊會出現一個漸變柱子

type:continuous  //連續型，另外一個型別piecewise：分段型，會顯示一節一節的，不平滑

min:最小值  // 顯示漸變色顏色的最低值，通常是資料集的最小值

max:最大值  // 顯示漸變色顏色的最大值，通常是資料集的最大值

color:顏色陣列   // 從上往下，若漸變是左右的，那就是從左往右

若需要橫向漸變，增加一個dimension: 0,  max:valueList.length-1

若指定某條折線漸變，則增加seriesIndex: 1  ,數值是折線的索引號，從0開始

其餘的配置請參考官網http://echarts.baidu.com/option.html#visualMap-continuous.dimension

visualMap: [{//漸變色
    show: false,
    type: 'continuous',
    min: Math.min.apply(null, valueList),
    max: Math.max.apply(null, valueList),
    color: ['#fc2a01', '#ffcc00', '#54ff00'],
}],

3、預測值的核心部分：第一根實線，最後一個值為空，第二根虛線，只保留最後一個值，相當於兩根線拼接起來的

y軸資料處理

//格式化資料，最後四個形成虛線(生成兩條折線，第一條折線後四個為空值，第二條折線後只保留後四個值)
var yData = [];
yData[0] = valueList.map(function (value, index) {//第一條折線資料
    if (index > valueList.length - 2) {
        return '';
    } else {
        return value;
    }
});

yData[1] = valueList.map(function (value, index) {//第二條折線資料
    if (index < valueList.length - 2) {
        return '';
    } else {
        return value;
    }
});
配置項處理

series: [
    {//實線
        type: 'line',
        showSymbol: false,
        data: yData[0],
        itemStyle: {
            normal: {
                lineStyle: {
                    width: 5
                }
            }
        },
    },
    {//虛線
        type: 'line',
        showSymbol: false,
        data: yData[1],
        itemStyle: {
            normal: {
                lineStyle: {
                    width: 5,
                    type: 'dotted'
                }
            }
        },
    }
4、要達到上圖所示的效果，還需要進行其他細節處理，比如x軸的資料格式化，xy軸位置、背景顏色、輔助線處理等

x軸資料格式化

// 格式化 x 軸標籤 只顯示月份，不顯示日期  末尾四個為預測值
var repeatFlag = "";//用於檢測是否是同月,僅適用於月
var formatData = function (val, index) {
    if (repeatFlag.substring(0, 2) != val.substring(0, 2)) {//不重複，則顯示刻度
        repeatFlag = val;
        return "|" + val.substring(0, 2) + "月";//返回不重複的月份
    } else if (index == dateList.length - 2) {
        return "|" + "預測";
    }

};

5、最後貼上所有程式碼

/*底部圖表載入*/
function loadSafeTrending() {

    //折線資料載入
    var xData = [], yData = [];
    xData = loadXdata();
    yData = loadYdata();

    //格式化x軸日期顯示，只顯示月份
    var repeatFlag = "";//用於檢測是否是同月,僅適用於月
    var dataFormat = function (val, index) {
        if (repeatFlag.substring(0, 2) != val.substring(0, 2) && index < xData.length - 2) {//不重複，則顯示刻度
            repeatFlag = val;
            return "|"+val.substring(0, 2) + "月";//返回不重複的月份
        } else if (index == xData.length - 2) {
            return "|"+"預測";
        }
    };

    var safeTrending = echarts.init(document.getElementById("safe-trending"));//初始化
    var trendingOption = {
        grid: [{//外框
            top: '30px',
            left: '0px',
            right: '20px',
            bottom: '1%',
            containLabel: false,
            show: true,
            borderColor: "rgba(115,162,250,0.5)"
        }],
        calculable: true,
        visualMap: [{//漸變色
            show: false,
            type: 'continuous',
            min: Math.min.apply(null, yData),
            max: Math.max.apply(null, yData),
            color: ['#fc2a01', '#ffcc00', '#54ff00'],
        }],
        tooltip: {
            trigger: 'axis'
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            position: 'top',
            data: xData,
            axisLabel: {
                align: 'left',
                interval: 0,
                padding: [0, 0, -5, -1],
                color: '#73a2fa',
                formatter: dataFormat
            },
            axisLine: {// 控制x軸線位置
                onZero: false,
                lineStyle: {
                    color: 'rgba(115,162,250,0.5)',
                    width: 1
                }
            },
            axisTick: {// 控制刻度
                show: false,
                lineStyle: {
                    width: 1,
                    shadowColor: '#73a2fa',
                    shadowOffsetY: -5
                }
            },
            splitLine: {//輔助線
                interval: 0,
                show: true,
                lineStyle: {
                    width: 1,
                    color: 'rgba(115, 162, 250, 0.2)'
                }
            }
        }],
        yAxis: [{
            type: 'value',
            splitLine: {show: false},
            axisLabel: {show: false},
            axisLine: {
                show: true,
                onZero: false,
                symbol: 'none',
                lineStyle: {
                    color: 'rgba(115,162,250,0.2)',
                    width: 1,
                },
            },
            axisTick: {show: false}//不顯示刻度
        }],
        series: [
            {//實線
                type: 'line',
                showSymbol: false,
                data: formatYdata(yData)[0],
                itemStyle: {
                    normal: {
                        lineStyle: {
                            width: 5
                        }
                    }
                },
            },
            {//虛線
                type: 'line',
                showSymbol: false,
                data: formatYdata(yData)[1],
                itemStyle: {
                    normal: {
                        lineStyle: {
                            width: 5,
                            type: 'dotted'
                        }
                    }
                },
            }
        ]
    };
    safeTrending.setOption(trendingOption);//圖表填充載入
}

/*x軸 隨機日期 格式：4-1*/
function loadXdata() {
    var month = 4, day = 1, arr = [];
    for (var i = 0; i < 100; i++) {
        if (arr.length >= 40) {
            break;
        }
        if (month <= 12 && day == 12) {//月份（4-12月）
            month++;
        }
        if (day < 12) {//月份中的某日(1-15日)
            day++;
        } else {
            day = 1;
        }
        arr.push((month < 10 ? "0" + month : month) + "-" + (day < 10 ? "0" + day : day));
    }
    return arr;
}

/*y軸 隨機60個數值*/
function loadYdata() {
    var arr = [];
    for (var j = 0; j < 40; j++) {
        arr.push(parseInt(Math.random() * 200 + 20));
    }
    return arr;
}

//格式化資料，最後四個形成虛線(生成兩條折線，第一條折線後四個為空值，第二條折線後只保留後四個值)
function formatYdata(dataArr) {
    var yData = [];
    yData[0] = dataArr.map(function (value, index) {//第一條折線資料
        if (index > dataArr.length - 2) {
            return '';
        } else {
            return value;
        }
    });

    yData[1] = dataArr.map(function (value, index) {//第二條折線資料
        if (index < dataArr.length - 2) {
            return '';
        } else {
            return value;
        }
    });
    return yData;
}
歡迎指正，菜鳥獻醜，大神勿噴

相關文章