首頁 > ��������������� ������������������������

��������������� ������������������������

互聯網 2021-12-05 10:31:01
1.ECharts的快速上手

ECharts 的入門使用特別簡單, 5分鐘就能夠上手. 他大體分為這幾個步驟

步驟1:引入 echarts.js 文件 步驟2:準備一個呈現圖表的盒子 步驟3:初始化 echarts 實例對象 let myCharts = echarts.init(document.getElementById('charts')) 步驟4:準備配置項 let option = {xAxis: {type: 'category',data: ['小明', '小紅', '小王']},yAxis: {type: 'value'},series: [{name: '語文',type: 'bar',data: [70, 92, 87],}]} 步驟5:將配置項設置給 echarts 實例對象 myCharts.setOption(option)

通過簡單的5個步驟, 就能夠把一個簡單的柱狀圖給顯示在網頁中了.這幾個步驟中, 步驟4最重要, 一個圖表最終呈現什麼樣子,完全取決於這個配置項.所以對於不同的圖表, 除了配置項會發生改變之外, 其他的代碼 都是固定不變的.

完整代碼

Documentlet myCharts = echarts.init(document.getElementById('charts'))let option = {xAxis: {type: 'category',data: ['小明', '小紅', '小王']},yAxis: {type: 'value'},series: [{name: '語文',type: 'bar',data: [70, 92, 87],}]}myCharts.setOption(option) 2.相關配置講解 xAxis 直角坐標系 中的 x 軸, 如果 type 屬性的值為 category ,那麼需要配置 data 數據, 代表在 x 軸的 呈現yAxis 直角坐標系 中的 y 軸, 如果 type 屬性配置為 value , 那麼無需配置 data , 此時 y 軸會自動去 series 下找數據進行圖表的繪製series 系列列表。每個系列通過 type 決定自己的圖表類型, data 來設置每個系列的數據

注意: 坐標軸 xAxis 或者 yAxis 中的配置, type 的值主要有兩種: category 和 value , 如果 type 屬性的值為 category ,那麼需要配置 data 數據, 代表在 x 軸的呈現. 如果 type 屬性配置為 value , 那麼無需配置 data , 此時 y 軸會自動去 series 下找數據進行圖表的繪製

3.echarts 常見圖表 3.1 柱狀圖 Document//初始化圖表let myCharts = echarts.init(document.getElementById('charts'))//準備x軸數據let xDataArr = ['小明', '小紅', '小王', '小李', '小張']//準備y軸數據let yDataArr = [70, 92, 87, 60, 85]let option = {xAxis: {type: 'category',data: xDataArr},yAxis: {type: 'value'},series: [{name: '語文',type: 'bar', //type指定為bar 為柱狀圖data: yDataArr,}]}myCharts.setOption(option)

在這裡插入圖片描述 柱狀圖的常用配置

series: [{name: '語文',type: 'bar', //type指定為bar 為柱狀圖data: yDataArr,markPoint:{ //最大值最小值data:[{type:'max',name:'最大值'},{type:'min',name:'最小值'}] },markLine:{ //平均值data:[{type:'average',name:'平均值'}] },label:{ //數值顯示 show:true, //是否顯示 rotate:80 //旋轉80度},barWidth:'30%', //柱子的寬度}]

通用配置

title title: {text: "成績", // 標題文字 textStyle: {color: 'red'// 文字顏色},borderWidth: 5, // 標題邊框 borderColor: 'green', // 標題邊框顏色borderRadius: 5, // 標題邊框圓角left: 20, // 標題的位置top: 20 // 標題的位置 },

tooltip tooltip 指的是當滑鼠移入到圖表或者點擊圖表時, 展示出的提示框

觸發類型: trigger 可選值 item/axis觸發時機: triggerOn 可選值有 mouseOver\click格式化顯示: formatter 詳情參照官方文檔

toolbox toolbox 是 ECharts 提供的工具欄, 內置有 導出圖片,數據視圖, 重置, 數據區域縮放, 動態類型切 換五個工具

let option = {toolbox: {feature: {saveAsImage: {}, // 將圖表保存為圖片dataView: {}, // 是否顯示出原始數據 restore: {}, // 還原圖表 dataZoom: {}, // 數據縮放magicType: {// 將圖表在不同類型之間切換,圖表的轉換需要數據的支持type: ['bar', 'line']}}},} 圖例 legend 是圖例,用於篩選類別,需要和 series 配合使用 //初始化圖表let myCharts = echarts.init(document.getElementById('charts'))//準備x軸數據let xDataArr = ['小明', '小紅', '小王', '小李', '小張']//準備y軸數據let yDataArr = [70, 92, 87, 60, 85]let yDataArr2 = [80, 95, 75, 63, 88]let option = {legend: {data:['語文', '數學']},xAxis: {type: 'category',data: xDataArr},yAxis: {type: 'value'},series: [{name: '語文',type: 'bar', //type指定為bar 為柱狀圖data: yDataArr,},{name: '數學',type: 'bar', //type指定為bar 為柱狀圖data: yDataArr,}]}myCharts.setOption(option)

在這裡插入圖片描述

免責聲明:非本網註明原創的信息,皆為程序自動獲取互聯網,目的在於傳遞更多信息,並不代表本網贊同其觀點和對其真實性負責;如此頁面有侵犯到您的權益,請給站長發送郵件,並提供相關證明(版權證明、身份證正反面、侵權鏈接),站長將在收到郵件12小時內刪除。

相關閱讀