ECharts用法及常用配置項詳解（Vue環境）

目錄

一、案例展示

二、ECharts 用法與常用屬性介紹

1.在項目中引入 ECharts

2.繪制圖表

3.常用配置項

三、案例完整代碼 + 詳細注釋

一、案例展示

本例通過一個 echarts 圖表的 demo 來熟悉圖表的各屬性；

此 demo 實現了圖表數據的展示、縮放、全屏展示、拖拽以及自定義工具如圖表切換等功能；效果如下：

二、ECharts 用法與常用屬性介紹

1.在項目中引入 ECharts

（1）首先使用 npm下載安裝 ECharts；

npm install echarts --save

（2）在項目的 main.js 文件中引入（此處為全局引入，后續在單個 .vue 頁面中無需再引）；

//引入

import echarts from 'echarts'

import * as Echarts5 from 'echarts5' //echarts新版本echarts5

//使用

Vue.prototype.$echarts = echarts;

Vue.prototype.$echarts5 = Echarts5; //新版本

2.繪制圖表

（1）首先為 ECharts 準備一個定義了高寬的 DOM 容器；

（2）初始化 echarts 實例并顯示圖表

在 vue?的 methods:{ } 中定義方法繪制圖表，初始化 echarts 實例；

注意在 vue 中初始化 echarts 實例與官網稍有不同，需要將?echarts.init?改為?this.$echarts.init?，定義后的方法也需要在 vue 掛載階段 mounted(){ }?中進行調用。

3.常用配置項

區域縮放，常用的為內置型數據區域縮放組件（dataZoomInside），內置于坐標系中，使用戶可以在坐標系上通過鼠標拖拽、鼠標滾輪、手指滑動（觸屏上）來縮放或漫游坐標系。

地理坐標系組件，用于地圖的繪制。

更多詳情請參見 ECharts 官網的配置項手冊：Documentation - Apache EChartsECharts, a powerful, interactive charting and visualization library for browserhttps://echarts.apache.org/zh/option.html#title

三、案例完整代碼 + 詳細注釋

Vue

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。