echarts圖表x軸數據太多顯示不全的問題

問題如圖，x軸數據條數過多可能導致x軸顯示不全，開始我使用下面方法

xAxis: {type: "category",min: min,max: max,data:time,axisLabel: {interval:num,//interval為x軸兩相鄰數據之間所包含數據條數，num為x軸總條數除以24所得結果show: true,textStyle: {color: "#a9a9a9", //更改坐標軸文字顏色fontSize: 10 //更改坐標軸文字大小},rotate: 40,formatter: function(v) {var date = new Date(v);return `${('0' + date.getHours()).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}`;// return `${('0' + date.getHours()).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}:${('0' + date.getSeconds()).slice(-2)}`;},},

開始我以為這樣設置是可以的，但是出現的問題是后面有些數據沒有顯示完全，丟掉一部分數據，后來經過改進要在axisLabel設置最大值最小值屬性，代碼如下

xAxis: {type: "category",data:time,axisLabel: {interval:num,show: true,textStyle: {color: "#a9a9a9", //更改坐標軸文字顏色fontSize: 10 //更改坐標軸文字大小},rotate: 40,formatter: function(v) {var date = new Date(v);return `${('0' + date.getHours()).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}`;// return `${('0' + date.getHours()).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}:${('0' + date.getSeconds()).slice(-2)}`;},showMinLabel: true,//顯示最小值showMaxLabel: true,//顯示最大值},

這樣設置兩屬性之后，圖表就會繪制完全，所以數據都有顯示。

echarts的X軸數據太多出現了間隔不一致的問題，請問怎么解決?

xAxis: [{axisLabel: {interval: 2} }]interval 是指間隔多少個類別畫柵格，為 0 時則每個數據都畫，為 1 時間隔 1 個畫，以此類推。

Echarts 修改折線的顏色和折線的點的大小方法

series: [{ type: 'line',smooth:true,//折點是圓弧狀的showSymbol: true,symbol: 'circle', //折點設定為實心點symbolSize: 20, //設定實心點的大小hoverAnimation: false,itemStyle:{ normal:{ color:'#fc8a0f', //折點顏色lineStyle:{ color:'#ff9c35' //折線顏色} } }animation: false,data: dataa, markPoint: { //顯示一定區域內的最大值和最小值data: [{ type: 'max', name: '最大值' },{ type: 'min', name: '最小值' }]}]

echarts下載圖表按鈕隱藏

在有些echarts圖表里面，并不需要下載按鈕下載圖表的功能，這個時候，可以選擇去掉或者隱藏起來。

解決辦法很簡單，找到toolbox屬性，注釋掉即可。

/* toolbox: {feature: {saveAsImage: {}}},*/

echarts y軸百分比顯示

更改配置項yAxis:

yAxis: [{ type: 'value', axisLabel: { show: true, interval: 'auto', formatter: '{value} %' }, show: true } ],

echarts更改坐標軸文字顏色及大小

xAxis: {data: anameArr,axisLabel: {show: true,textStyle: {color: '#c3dbff', //更改坐標軸文字顏色fontSize : 14 //更改坐標軸文字大小}},axisTick: {show: false //是否顯示刻度線},axisLine:{lineStyle:{color:'#315070' //更改坐標軸顏色}} }

echarts漸變色實現方法

我使用的是echarts 4.2版本

在管網的文檔中可查看其配置項，以柱狀圖為例：

首先在series中找type:‘line’

然后找到areaStyle

在color中有方法能生成漸變色：

// 線性漸變，前四個參數分別是 x0, y0, x2, y2, 范圍從 0 - 1，相當于在圖形包圍盒中的百分比，如果 globalCoord 為 `true`，則該四個值是絕對的像素位置 color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: 'red' // 0% 處的顏色}, {offset: 1, color: 'blue' // 100% 處的顏色}],globalCoord: false // 缺省為 false } // 徑向漸變，前三個參數分別是圓心 x, y 和半徑，取值同線性漸變 color: {type: 'radial',x: 0.5,y: 0.5,r: 0.5,colorStops: [{offset: 0, color: 'red' // 0% 處的顏色}, {offset: 1, color: 'blue' // 100% 處的顏色}],globalCoord: false // 缺省為 false } // 紋理填充 color: {image: imageDom, // 支持為 HTMLImageElement, HTMLCanvasElement，不支持路徑字符串repeat: 'repeat' // 是否平鋪, 可以是 'repeat-x', 'repeat-y', 'no-repeat' }

第二種方法：使用echarts內置的漸變色生成器echarts.graphic.LinearGradient

{type: 'bar',itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, //4個參數用于配置漸變色的起止位置, 這4個參數依次對應右/下/左/上四個方位. 而0 0 0 1則代表漸變色從正上方開始[{offset: 0, color: '#000'},{offset: 0.5, color: '#888'},{offset: 1, color: '#ddd'}] //數組, 用于配置顏色的漸變過程. 每一項為一個對象, 包含offset和color兩個參數. offset的范圍是0 ~ 1, 用于表示位置)}} }

效果：

echarts使用技巧（一）echarts的圖表自適應resize問題、單選、縮放等

???????這些東西要是有精力和時間可以通讀echarts文檔，里面都有配置詳細介紹。該博客只是把自己使用echarts遇到的問題記錄下，并不全，加深印象，拋磚引玉而已，完整學習的請移步官方文檔
1、legend設置單選

legend: {data:['db block gets', 'consistent gets'],selectedMode: 'single', },

修改圖例legend顏色，定義color數組，對應圖例即可

color:['#48cda6','#fd87ab','#11abff','#ffdf33','#968ade'], //手動設置每個圖例的顏色 legend: { //圖例組件right:68, //圖例組件離右邊的距離orient : 'vertical', //布局 縱向布局width:40, //圖行例組件的寬度,默認自適應x : 'right', //圖例顯示在右邊itemWidth:10, //圖例標記的圖形寬度itemHeight:10, //圖例標記的圖形高度data:['30%','10%','15%','20%','25%'],textStyle:{ //圖例文字的樣式color:'#333',fontSize:12} },

效果圖:

2、添加縮放滾動

加上dataZoom配置

dataZoom: [{show: true,realtime: true,start: 65,end: 85},{type: 'inside',realtime: true,start: 45,end: 85} ],

需要配合grid配置給dataZoom留出底部位置

也可以將show設置為false就不會顯示那個滾動圖，但是依然有滾動效果

grid: {top: 30,bottom: 60 },

3、視圖里面添加多個線條：在series數組里面繼續加對象即可

series: [{name:'db block gets',type:'line',xAxisIndex: 1,//加這個dataZoom對該對象不起作用，需要去掉這個屬性smooth: true,//代表平滑曲線，如需要折線，則去掉即可data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]},{name:'consistent gets',type:'line',smooth: true,data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]} ]

4、視圖里面加陰影提示：tooltip，提示框組件

show，默認true，是否顯示提示框組件

trigger，觸發類型，item、axis、none，當為none的時候代表什么都不觸發，就不會顯示提示框

axisPointer，坐標軸指示器配置項，實際上坐標軸指示器的全部功能，都可以通過軸上的 axisPointer 配置項完成

label屬性加formatter函數，可以格式化提示框顯示內容

　　tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label:{formatter: function (params) {return '快照時間：' + params.value;}}} },

效果圖如下:

5、雷達圖添加陰影提示

series: [{type: 'radar',tooltip: {trigger: 'item'},itemStyle: {normal: {areaStyle: {type: 'default'}}},data: [{value: this.radarValues,name: '指標值'}]} ]

6、一般echarts里面配色都是默認的，如果需要修改，就加上 color:[]配置項 ，這里也推薦一個取色器，很好用Pipette

7、stackedBar圖形配置

{name: '表使用比例',type: 'bar',stack: '總量',//代表疊加的形態，如果去掉這個，該條就會單獨出來label: { //就是每條目上會顯示數字，去掉label屬性就不顯示normal: {show: true,position: 'insideRight'}},data: [20, 2, 1, 34, 20] },

8、legrend的data數組里面的內容必須與series配置里面對象的name完全一樣，否則會不顯示。所以當你legrend不顯示的時候，一定是這里沒對應上，修改即可。

9、echarts的圖表自適應，resize問題

???????echarts官網的實例都具有響應式功能，確實不是單純的寬度改變，是每次調整后圖表是重新繪制。猜想echart源碼里應該有resize這個API，打開調試器，打開echart源碼，Ctrl+F，果然找到了

echart圖表本身是提供了一個resize的函數的。

于是當瀏覽器發生resize事件的時候，讓其觸發echart的resize事件，重繪canvas。

???????用window.onresize = myChart.resize; 可以完成自適應，就是把window的onresize事件賦值為echart的resize事件

???????當然這是單個圖表的情況，要是多個圖表，發現會不起作用。

???????多個圖表可以使用addEventListener

window.addEventListener("resize", () => { this.myChart.resize(); this.myChart2.resize(); this.myChart3.resize(); });

在vue組件上就可以直接單個組件添加進事件列表

myLogLine.setOption(option); window.addEventListener("resize", () => { myLogLine.resize();});myLine.setOption(option); window.addEventListener("resize", () => { myLine.resize();});

ECharts 折線圖數據堆疊問題解決方法

數據堆疊即：

第2條數據值 = 第1條數據值 + 第2條數據值

第3條數據值 = 第2條數據值 + 第3條數據值

…

以此類推

部分代碼及其圖表如下：

option = {title: {text: '折線圖堆疊'},tooltip: {trigger: 'axis'},legend: {data:['直接訪問','搜索引擎']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: ['周一','周二','周三','周四','周五','周六','周日']},yAxis: {type: 'value'},series: [{name:'直接訪問',type:'line',stack: '總量',data:[320, 332, 301, 334, 390, 330, 320]},{name:'搜索引擎',type:'line',stack: '總量',data:[0, 0, 0, 0, 1290, 0, 0]}] };

最后一步步查找，原來是 stack 的原因，stack 值為 ‘總量是’，折線圖堆疊（第二條線的數值=本身的數值+第一條線的數值，第三條的數值=第二條線圖上的數值+本身的數值，以此類推…）顯示
解決方法：
去掉series中stack屬性，或者將stack設置為不同的值
去掉stack屬性后的圖表，數值正常

echart如何去除折線圖中默認的網格

echart中折線圖中有默認的網格如何去除呢？

原圖如下

附上代碼

var myChart = echarts.init(document.getElementById('main')); option = {title: {text: '折線圖堆疊'},grid: {show:false},tooltip: {trigger: 'axis'},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: ['14:00','15:00','16:00','17:00','18:00','19:00','20:00'] },yAxis: {type: 'value',},series: [{name:'搜索引擎',type:'line',areaStyle: {normal: {color:'#87CEFA'}},data:[488, 932, 1100, 1500, 1702, 2045, 2244]}] }; myChart.setOption(option);

去除后的圖如下

只要在對應的Axis中的屬性splitLine設置show：false即可

完整代碼

var myChart = echarts.init(document.getElementById('main')); option = {title: {text: '折線圖堆疊'},grid: {show:false},tooltip: {trigger: 'axis'},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: ['14:00','15:00','16:00','17:00','18:00','19:00','20:00'],//splitLine:{//show:false//}},yAxis: {type: 'value',splitLine:{show:false},},series: [{name:'搜索引擎',type:'line',areaStyle: {normal: {color:'#87CEFA'}},data:[488, 932, 1100, 1500, 1702, 2045, 2244]}] }; myChart.setOption(option);

設置echarts 的網格樣式顏色

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],//網格樣式splitLine: {show: true,lineStyle:{color: ['red'],width: 1,type: 'solid'}}},yAxis: {type: 'value',//網格樣式splitLine: {show: true,lineStyle:{color: ['blue'],width: 1,type: 'solid'}}},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',smooth: true}] };

效果圖如下:

總結

以上是生活随笔為你收集整理的echarts使用大总结的全部內容，希望文章能夠幫你解決所遇到的問題。

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