先來個效果圖
原理:使用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; }歡迎指正,菜鳥獻醜,大神勿噴