echarts官網：https://www.echartsjs.com/zh/index.html
echarts官網手冊：https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
菜鳥教程：https://www.runoob.com/echarts/echarts-tutorial.html
菜鳥教程在線編輯器：https://www.runoob.com/try/try.php?filename=tryecharts_intro
文章目錄
一、使用案例
情形一：在Vue組件中使用
echarts 使用主要有以下幾個步驟：
Step1. 下載安裝
在項目中安裝echarts，安裝方式有多種，這裏採用 npm 方法
npm install echarts --save
Step2. 使用 echarts
接下來講的是在組件化開發中的使用方法
首先，你要先有一個組件
<template>
</template>
<script>
</script>
<style>
</style>
接下來，是 echarts 的使用步驟
Step2.1 導入 echarts
<script>
// 注意，以下寫法固定，不能寫錯
import echarts from 'echarts'
</script>
Step2.2 創建 DOM
注意：創建的DOM 應該具備寬高
<template>
<div id="echarts_box" style="width: 600px;height:400px;"></div>
</template>
Step2.3 初始化 echarts 和填充數據
注意：這步操作應該放在 mounted 中，即在 DOM 渲染完成之後觸發，顯示 echarts 圖表
此步驟具體分爲三步：
（1）基於準備好的 DOM，初始化 echarts 實例
（2）發起數據請求，獲取數據（json 格式）
（3）setOption
// DOM 渲染完成觸發
mounted() {
// 1. 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('echarts_box'))
// 2. 發起請求，獲取數據
const { data: res } = await this.$http.get('reports/type/1')
if (res.meta.status !== 200) {
return this.$message.error('獲取折線圖數據失敗！')
}
// 3. 使用剛指定的配置項和數據，顯示圖表
myChart.setOption(data)
}
完整實例代碼
<template>
<div id="echarts_box" style="width: 600px;height:400px;"></div>
</template>
<script>
import echarts from 'echarts'
export default {
data() {
return {}
},
created() {},
// DOM 渲染完成觸發
mounted() {
// 1. 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('echarts_box'))
// 2. 發起請求，獲取數據
const { data: res } = await this.$http.get('reports/type/1')
if (res.meta.status !== 200) {
return this.$message.error('獲取折線圖數據失敗！')
}
// 3. 使用剛指定的配置項和數據，顯示圖表
myChart.setOption(data)
}
}
</script>
情形二：在 html 頁面中使用
過程和上面差不多，只是這裏不需要下載安裝 echarts，可以直接通過 CDN 引入；或者將 echarts.js 文件下載到本地引入，這裏和普通的 js 文件引入一樣。
附上一個教程實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個 ECharts 實例</title>
// 1. 引入 echarts.js
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
// 2. 準備DOM
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 3. 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 4. 指定圖表的配置項和數據
var option = {
title: {
text: '第一個 ECharts 實例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 5. 使用剛指定的配置項和數據顯示圖表
myChart.setOption(option);
</script>
</body>
</html>
運行效果展示
二、echarts 中數據的說明
通過上面的實例，大概對 echarts 有了初步瞭解。下面針對 json 數據項進行分析，空口白話講解不易理解，下面通過結合一個折線圖細細道來~~
1. setOption(data)
setOption() 方法的參數 data 要求爲 json 格式的數據，表示使用 json 數據格式的配置來繪製圖表
2. 標題 title
即給圖表配置的標題，通過 title 實現
title: {
text: '用戶來源'
}
3. 提示信息 tooltip
配置提示信息，是鼠標移入圖表上某位置時，顯示出該位置對應的數據信息，實際效果如圖
部分代碼如下所示
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#76baf1"
}
}
}
4. 圖例組件 legend
概念：圖例組件展現了不同 系列 的標記(symbol)、顏色、名字，可以通過點擊圖例控制哪些系列不顯示
圖示：在折線圖中，legend 對應的是每條折線的系列
legend: {
data: ["華東","華南","華北","西部","其他"]
}
5. X 軸 xAxis
配置要在 X 軸顯示的項
xAxis: {
data: ["2017-12-27","2017-12-28","2017-12-29","2017-12-30","2017-12-31", "2018-1-1"]
}
6. Y 軸 yAxis
配置要在 Y 軸顯示的項
yAxis: {
type: "value"
}
7. 系列列表 series
每個 系列 的詳情
series: [
{ name: "華東", type: "line", stack: "總量", areaStyle: {normal: {}}, data: [999,3111,4100,3565,3528,6000] },
{ name: "華南", type: "line", stack: "總量", areaStyle: {normal: {}}, data: [5090,2500,3400,6000,6400,7800] },
……
]
8. 類型 type
每個 系列 通過 type 決定自己的圖表類型
type: 'bar'：柱狀/條形圖
type: 'line'：折線/面積圖
type: 'pie'：餅圖
type: 'scatter'：散點（氣泡）圖
type: 'effectScatter'：帶有漣漪特效動畫的散點（氣泡）
type: 'radar'：雷達圖
type: 'tree'：樹型圖
type: 'treemap'：樹型圖
type: 'sunburst'：旭日圖
type: 'boxplot'：箱形圖
type: 'candlestick'：K線圖
type: 'heatmap'：熱力圖
type: 'map'：地圖
type: 'parallel'：平行座標系的系列
type: 'lines'：線圖
type: 'graph'：關係圖
type: 'sankey'：桑基圖
type: 'funnel'：漏斗圖
type: 'gauge'：儀表盤
type: 'pictorialBar'：象形柱圖
type: 'themeRiver'：主題河流
type: 'custom'：自定義系列
附：data 數據截圖
