Echarts常用元件常用簡單使用彙總

1.折線圖常用命令：

//根據第獲取元素

var dom = document.getelementbyid("bottom_02");
//載入echarts元件
var mychart = echarts.init(dom);
//折線圖資料來源
var data_line=;
option = null;
option = ,
xaxis: ,
//設定座標軸刻度屬性
axisline: 
},},
yaxis: ,
axisline: 
},},
//載入顯示資料
series: [}},
}]};if (option && typeof option === "object") 

var dom = document.getelementbyid("right_top");

var mychart = echarts.init(dom);
option = null;
//右側柱狀圖資料集合
var data_apar_right=;
option = 
},//類目顯示 對應圖中最上面兩個
legend: ,
toolbox: ,
calculable: true,
xaxis: [
,data:data_apar_right.xaxis,
axislabel: },}
],yaxis: [},}
],series: [,]
)},//滑鼠移入時樣式變化
emphasis: ,])
}},},,
])},emphasis: ,])
}}},]
};if (option && typeof option === "object") 

由於餅狀圖使用很簡單官方api也說明的很詳細 所以就不介紹了 ，直接介紹餅狀圖另一種樣式-圓環圖

var dom = document.getelementbyid("bottom_03");

var mychart = echarts.init(dom);
option = null;
//資料來源
var data_circle=,,,,],
//備註框顯示的內容
legend:['火警','違規操作','裝置損毀','盜竊','摔倒']
};option = 
},grid: ,
color:['#00bd8d','#d90051','#01b4d2','#ffb508','#9702fe'],
//顯示移入彈框
tooltip: 
次"//自定義顯示資料
//a:系列名稱,b:資料項名稱,c:數值,d:百分比
},legend: 
},dataset: ,
series: [
]};if (option && typeof option === "object") 

ECharts 常用設定

目錄 設定預設觸發事件action 滑鼠指向別的圖塊時,展示選中資料的圖塊資訊,隱藏預設色塊高亮資訊 滑鼠離開環形圖時，展示預設第一條資料 mychart.dispatchaction type 觸發action型別 seriesindex series索引 dataindex 高亮資料索引 注意 ...

常用基本元件簡單介紹

一 基本矩形 矩形1 帶邊框的長方形，可以新增文字，通過樣式控制邊框 背景色 字型等。矩形2 不帶邊框的長方形，可以新增文字，通過樣式控制邊框 背景色 字型等。矩形3 不帶邊框的長方形，可以新增文字，通過樣式控制邊框 背景色 字型等。橢圓形 帶邊框的圓形，可以新增文字，通過樣式控制邊框 背景色 字型...

按需引入echarts元件

echarts元件非常多，有時候我們的業務就需要兩三個不多，這時候如果全部引入的就會導致打包過大，這時候就可以按需引入。const echarts require echarts lib echarts 引入折線圖 require echarts lib chart line 餅圖 require ...