有時候咱們須要在月份沒結束時,此處的數據拐點樣式與以前結束月份有區別,以下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);