echart 圖表動態的顯示拐點爲空心

有時候咱們須要在月份沒結束時,此處的數據拐點樣式與以前結束月份有區別,以下javascript

如上圖假如七月份尚未結束,最後一個拐點的樣式是空心的java

思路是須要先判斷空數據的位置,而後在位置以前的數據設置樣式,echarts

var specialVal = { value: 300, itemStyle: { normal: { color: "#3d4d66", borderColor: "#e3cb02", borderWidth: 2, borderType: 'solid' } } };
var option7 = {
    color: ['#16d479', '#05a7f2', '#e3cb02'],
    /*title : {  
       text : '行業1',  
        x : 'center',  
        y : 'top',  
        textStyle : {  
            fontSize : 25,  
        }  
    }, */

    grid: {
        top: 40,
        bottom: 20,
        left: 10,
        right: 10,
        containLabel: true,

    },
    tooltip: {
        trigger: 'axis',
        axisPointer: { // 座標軸指示器,座標軸觸發有效
            type: 'shadow' // 默認爲直線,可選爲:'line' | 'shadow'
        },
        formatter: function(params) {
            return params[0].name + '<br/>' +
                params[0].seriesName + ' : ' + params[0].value + ' 萬方' + '<br/>' +
                params[1].seriesName + ' : ' + params[1].value + ' 萬方' + '<br/>' +
                params[2].seriesName + ' : ' + params[2].value + ' 萬方' + '<br/>'

        }
    },
    legend: {
        data: ['2015年', '2016年', '2017年'],
        right: 5,
        top: 0
    },
    xAxis: {

        type: 'category',
        axisLabel: { interval: 0 },

        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
    },

    yAxis: {
        name: '    用氣量 (萬方)',
        nameTextStyle: { fontSize: 15 },
        splitLine: {
            show: true,
            interval: 'auto',
            lineStyle: {
                color: ['#4b5d7a'],
                type: 'solid'
            },
        },
    },
    series: [{
            name: '2015年',
            type: 'line',
            smooth: true,
            data: [600, 900, 800, 700, 600, 500, 400, 800, 600, 700, 600, 700],

        },
        {
            name: '2016年',
            type: 'line',
            smooth: true,
            data: [500, 750, 850, 950, 850, 750, 650, 950, 750, 890, 600, 500],
        },
        {
            name: '2017年',
            type: 'line',
            smooth: true,
            data: [400, 650, 750, 850, 750, 650, 550, null, null, null, null, null],
        },
        /*
        {
            name: '最近月用量',
            type: 'line',
            smooth:true,
            data: [null,null,null,null,null,null,null,null,null,null,null,900],
        },*/

    ]
};
for (i = 0; i < 11; i++) {
    if (option7.series[2].data[i] == null) {
        specialVal.value = option7.series[2].data[i - 1];
        option7.series[2].data[i - 1] = specialVal;
        break;
    }
}

var myChart = echarts.init(document.getElementById('barchart2'), theme);
myChart.setOption(option7);
相關文章
相關標籤/搜索