echart的option進階使用

1.title: {

text: '折線圖堆疊'subtext: '有一定誤差',left: 'center' }

title用來配置標題

subtext:副標題

left:位置

2.tooltip: {

trigger: 'axis' }

圖標的提示框組件

trigger（觸發方式）:axis(坐標軸) item(數據項)

3.legend: {

data: ['郵件營銷', '聯盟廣告', '視頻廣告', '直接訪問', '搜索引擎'] }

圖例組件

4.toolbox: {

feature: {saveAsImage: {}} }

工具箱組件（將圖表另存為一張圖片）

5.grid: {
left: ‘3%’,
right: ‘4%’,
bottom: ‘3%’,
containLabel: true
}

控制圖標大小

方向:百分數是距離那個邊緣的距離

cotainLabel:true（顯示刻度）flase（不顯示刻度）

6.xAxis: {
type: ‘category’,
boundaryGap: false,
data: [‘周一’, ‘周二’, ‘周三’, ‘周四’, ‘周五’, ‘周六’, ‘周日’]
},
yAxis: {
type: ‘value’
}

type（坐標軸類型）:category(類目軸)? ? ? value(數值軸)

boundaryGap:false(和坐標軸無縫隙) true(有縫隙)(這個好像不太對，待更新，歡迎大佬指正)</

7.series: [
{
name: ‘郵件營銷’,
type: ‘line’, //顯示形式
stack: ‘總量’, //數據堆疊（為了讓折線不重疊，值會疊加） 刪掉就不會堆疊了

? data: [120, 132, 101, 134, 90, 230, 210]
? },
? {
? name: ‘聯盟廣告’, //series如果有name值，legend里的data可以刪掉
? type: ‘line’,
? stack: ‘總量’,
? data: [220, 182, 191, 234, 290, 330, 310]
? }
? ]

8.color:[‘pink’,‘green’,‘skyblue’,‘pink’],

//顏色配置

總結

以上是生活随笔為你收集整理的echart的进阶使用（option）的全部內容，希望文章能夠幫你解決所遇到的問題。

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