資料可視化是前端必備技能之一，可視化插件也是非常常用且實用的一個插件，這里簡單介紹一下ECharts.js這個插件的基本使用步驟，
ECharts.js 是百度出品的一個開源javascript資料可視化庫，是目前國內最常用、最熱門的一個基于javaScript的資料可視化插件，
下面是ECharts.js的網址：
ECharts官網地址：https://www.echartsjs.com/zh/index.html/
Apache ECharts：https://echarts.apache.org/zh/index.html
下面簡答介紹一下ECharts.js庫的基本使用步驟--五步曲
ECharts使用五步曲：
1.下載并引入echarts.js檔案-->圖表依賴這個js庫
只需下載一個：echarts.min.js引入即可
2.準備一個具備大小的DOM容器-->生成的圖表會放入此容器中
3.初始化echarts實體物件-->實體化echarts物件
var myChart = echarts.init('容器物件')
// 第三步：初始化/實體化echarts物件
var myChart = echarts.init(document.querySelector(".box"));
4.指定配置項和資料（option）-->根據具體需求修改配置選項
var option = { 配置項資料 }
// 第四步：指定配置項和資料
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}
5.將配置項option設定給echarts實體物件-->讓echarts物件根據修改后的配置生效
myChart.setOption(option)
// 第五步：將配置項設定給echarts實體物件-->讓echarts物件根據修改后的配置生效
myChart.setOption(option)效果圖展示：
綜上已經基本介紹了ECharts資料可視化庫的使用方法和步驟，而這其中的第1、2、3、5步基本都是差不多不需要修改的，不同的專案所需要的不同圖形和資料基本都是在第4步（指定配置項和資料）中進行修改即可，而常用到的折線圖、柱狀圖、餅圖、散點圖等等都可以訪問文章開頭提供的網址--查看示例然后根據個人需求選擇一個類似的圖形再結合專案需求資料進行修改option中的配置項引數即可，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/290285.html
標籤：其他
上一篇：JavaScript事件回圈機制