optionJKDLine = {
　　title: {text: '告警數量趨勢圖',textStyle:{　　//標題樣式fontStyle:'normal',fontFamily:'sans-serif',fontSize:12
　　　　}},tooltip: {trigger: 'axis'},legend: {　　//圖例,默認顯示},grid: {　　//圖表距離left: '-3%',right: '5%',bottom: '3%',top:'20%',containLabel: true},toolbox: {　　//右側工具欄feature: {saveAsImage: {}}},visualMap: {//區間內控制顯示顏色 折線點的顏色變化show: false,dimension: 1,pieces: [
　　　　　　{
　　　　　　　　gte: 0, lte: 140, color: '#7EF57C' //表示0-140之間的數值，是這個#7EF57C顏色，大于這個140，則#ff0000顏色。
　　　　　　}],outOfRange: {color: '#ff0000'}},xAxis: {type: 'category',boundaryGap: false,data: ['01', '02', '03', '04', '05', '06', '07']},yAxis: {type: 'value',show:false　　//不顯示Y軸},yAxis : [{　　//顯示Y軸，但不顯示數值axisLabel : {formatter: function(){return "";}}}],series: [{name:'告警數量',type:'line',data: [120, 132, 191, 194, 120, 130, 110],smooth: true,itemStyle : {normal : {label : {show: true},color:'#ED7967',lineStyle:{color:'#EDC167'}}],areaStyle: {　　//折線圖區域顏色線性漸變顯示normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#7CF5A2'},{offset: 0.6, color: '#7EF57C'},{offset: 1, color: '#fff'}])}},] };

　

實現如下：

?

轉載于:https://www.cnblogs.com/moutudou/p/9850608.html

總結

以上是生活随笔為你收集整理的echarts折线图相关的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。