ECharts介紹

• ECharts 是一個由百度開發和維護的開源的可視化圖表庫。
• 它提供了豐富的圖表類型和交互功能，可以用于創建各種類型的數據可視化圖表，包括折線圖、柱狀圖、餅圖、散點圖、雷達圖、地圖等。
  

ECharts 特點

1. 強大的兼容性：ECharts 可以在主流的瀏覽器上運行，包括 Chrome、Firefox、Safari、IE8+ 等。

2. 靈活的配置選項：ECharts 提供豐富的配置選項，可以自定義圖表的樣式、布局、標簽、動畫等，以滿足不同的需求。

3. 豐富的交互功能：ECharts 支持多種交互方式，如鼠標懸停、點擊、拖拽等，可以實現圖表的聯動、篩選、縮放等交互效果。

4. 多維度的數據展示：ECharts 支持多維度的數據可視化，可以通過數據的不同維度來展示數據的關聯性、分布情況等。

5. 可視化的配置工具：ECharts 提供了一個可視化的配置工具，可以通過拖拽和編輯來創建和調整圖表，讓非開發人員也能輕松使用。

總的來說，ECharts 是一個功能強大、靈活易用的數據可視化圖表庫，廣泛應用于數據分析、商業報表、可視化大屏等領域。

Vue2使用EChats步驟

在 Vue2 中使用 ECharts 需要進行以下幾個步驟：

安裝 ECharts

可以通過 npm 或者 CDN 的方式安裝 ECharts。如果使用 npm，可以在項目目錄下運行以下命令安裝 ECharts：

npm install echarts --save
//或者
npm install echarts@4.8.0 --save

引入 ECharts

main.js中加入以下配置

import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;

創建圖表容器

在 Vue 的模板中創建一個用于顯示圖表的容器元素。

<template><div id="chart" style="width:50%;height: 300px;border: 1px solid blue"></div>
</template>

初始化圖表

在 Vue 的方法中初始化 ECharts，通過 ECharts 的實例來配置和渲染圖表。

export default {mounted() {this.initChart()},methods: {initChart() {// 獲取容器元素const chartContainer = document.getElementById('chart')// 創建圖表實例const chart = echarts.init(chartContainer)// 配置圖表const option = {// 圖表的配置項}// 渲染圖表chart.setOption(option)}}
}

上述代碼中，通過 mounted 鉤子函數來在組件掛載后調用 initChart 方法初始化圖表。在 initChart 方法中，通過 echarts.init 方法創建圖表實例，并通過 setOption 方法將配置項應用到圖表中。

更新圖表

如果需要在組件中根據數據的變化來更新圖表，可以在相應的方法中調用 setOption 方法來更新圖表的數據。

export default {methods: {updateChart() {const chart = echarts.getInstanceByDom(document.getElementById('chart'))// 更新圖表的配置項const option = {// 新的配置項}// 更新圖表chart.setOption(option)}}
}

通過以上步驟，你可以在 Vue2 中使用 ECharts 來創建和更新圖表。記得在組件銷毀時調用 dispose 方法來銷毀圖表實例，以釋放資源。

export default {beforeDestroy() {const chart = echarts.getInstanceByDom(document.getElementById('chart'))chart.dispose()}
}

示例

基本柱狀圖

• 柱狀圖（或稱條形圖）是一種通過柱形的長度來表現數據大小的一種常用圖表類型。
• 設置柱狀圖的方式，是將 series 的 type 設為 ‘bar’。

后臺代碼

@RestController
@RequestMapping("/bill")
@CrossOrigin
public class BillController {@RequestMapping("/product")public Object bill(){Map<String,Object> resultMap = new HashMap<>();List<String> productNameList = new ArrayList<>();List<Integer> productNumberList = new ArrayList<>();Collections.addAll(productNameList,"電腦","鼠標","鍵盤","鼠標墊","顯示器","擴展屏");Collections.addAll(productNumberList,200,220,317,211,179,302);resultMap.put("xMap",productNameList);resultMap.put("seriesMap",productNumberList);return resultMap;}
}

vue2代碼

配置

serverConfig.js：后臺url路徑

const baseurl = {dev: 'http://192.168.2.220:9006',
}
export default baseurl

request.js：配置axios

import axios from 'axios'
import baseurl from '@/utils/serverConfig'// create an axios instance
const service = axios.create({baseURL: baseurl.dev, // url = base url + request urlwithCredentials: false, // 是否跨域timeout: 60000 // 請求超時
})export default service

bill.js：訪問后臺bill模塊的接口文件

import request from '@/utils/request'
function getBillProductData() {return request({url: '/bill/product',method: 'post',//params})
}export default {getBillProductData,
}

組件代碼

<template><div id="chart" style="width:50%;height: 300px;border: 1px solid blue"></div>
</template><script>
import billReq from '@/api/bill'
export default {name: "MyEChart",mounted() {this.initData()},data() {return {}},methods: {initData() {billReq.getBillProductData().then(response=>{//const resultJson = JSON.stringify(response.data);this.createEcharts(response.data.xMap,response.data.seriesMap);})},createEcharts(x,s) {let options = {//配置項tooltip: {//鼠標觸摸顯示值trigger: "axis",axisPointer: {type: 'shadow'}},xAxis: {//x軸設置data: x},yAxis: {},//y軸設置series: [{type:'bar',data:s}]}// 獲取容器元素var chartContainer = document.getElementById('chart')// 創建圖表實例var chart = this.$echarts.init(chartContainer)// 渲染圖表chart.setOption(options)window.addEventListener("resize", function () {chart.resize(); //圖表自適應的一個方法});}}
}
</script><style scoped></style>

運行效果

基本折線圖

折線圖主要用來展示數據項隨著時間推移的趨勢或變化。

示例代碼

組件

<template><div id="chart" style="width:50%;height: 300px;border: 1px solid blue"></div>
</template><script>
import billReq from '@/api/bill'
export default {name: "ZheEChart",mounted() {this.initData()},data() {return {}},methods: {initData() {billReq.getBillProductData().then(response=>{//const resultJson = JSON.stringify(response.data);this.createEcharts(response.data.xMap,response.data.seriesMap);})},createEcharts(x,s) {let options = {//配置項tooltip: {//鼠標觸摸顯示值trigger: "axis",axisPointer: {type: 'shadow'}},xAxis: {//x軸設置type:'category',data: x},yAxis: {type:'value'},//y軸設置series: [{type:'line',data:s}]}// 獲取容器元素var chartContainer = document.getElementById('chart')// 創建圖表實例var chart = this.$echarts.init(chartContainer)// 渲染圖表chart.setOption(options)window.addEventListener("resize", function () {chart.resize(); //圖表自適應的一個方法});}}
}
</script><style scoped></style>

基礎餅圖

• 餅圖主要用于表現不同類目的數據在總和中的占比。
• 每個的弧度表示數據數量的比例。
• 餅圖的配置和折線圖、柱狀圖略有不同，不再需要配置坐標軸，而是把數據名稱和值都寫在系列中。

示例代碼

后臺

    @RequestMapping("/bing")public Object bing(){List<Map<String,Object>> resultList = new ArrayList<>();Map<String,Object> resultMap1 = new HashMap<>();resultMap1.put("name","鼠標");resultMap1.put("value","45");Map<String,Object> resultMap2 = new HashMap<>();resultMap2.put("name","鼠標墊");resultMap2.put("value","35");Map<String,Object> resultMap3 = new HashMap<>();resultMap3.put("name","鍵盤");resultMap3.put("value","512");Map<String,Object> resultMap4 = new HashMap<>();resultMap4.put("name","顯示器");resultMap4.put("value","233");Collections.addAll(resultList,resultMap1,resultMap2,resultMap3,resultMap4);return resultList;}

前端配置

import request from '@/utils/request'
function getBillProductData() {return request({url: '/bill/product',method: 'post',//params})
}
function getBillProductBing() {return request({url: '/bill/bing',method: 'post',//params})
}export default {getBillProductData,getBillProductBing,
}

組件

<template><div id="chart" style="width:50%;height: 300px;border: 1px solid blue"></div>
</template><script>
import billReq from '@/api/bill'
export default {name: "BingEChart",mounted() {this.initData()},data() {return {}},methods: {initData() {billReq.getBillProductBing().then(response=>{//const resultJson = JSON.stringify(response.data);this.createEcharts(response.data);})},createEcharts(s) {let options = {//配置項tooltip: {//鼠標觸摸顯示值trigger: "axis",axisPointer: {type: 'shadow'}},series: [{type:'pie',data:s}]}// 獲取容器元素var chartContainer = document.getElementById('chart')// 創建圖表實例var chart = this.$echarts.init(chartContainer)// 渲染圖表chart.setOption(options)window.addEventListener("resize", function () {chart.resize(); //圖表自適應的一個方法});}}
}
</script><style scoped></style>

運行效果

其他

更多內容，參考官網，很詳細，很適合學習