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
- 1
Step2. 使用 echarts
接下来讲的是在组件化开发中的使用方法
首先,你要先有一个组件
<template>
</template>
<script>
</script>
<style>
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
接下来,是 echarts 的使用步骤
Step2.1 导入 echarts
<script>
// 注意,以下写法固定,不能写错
import echarts from 'echarts'
</script>
- 1
- 2
- 3
- 4
Step2.2 创建 DOM
注意:创建的DOM 应该具备宽高
<template>
<div id="echarts_box" style="width: 600px;height:400px;"></div>
</template>
- 1
- 2
- 3
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)
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
完整实例代码
<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.KaTeX parse error: Expected '}', got 'EOF' at end of input: …ation">.</span>message.error(‘获取折线图数据失败!’)
}
// 3. 使用刚指定的配置项和数据,显示图表
myChart.setOption(data)
}
}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
情形二:在 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'));
<span class="token comment">// 4. 指定图表的配置项和数据</span> <span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span> title<span class="token punctuation">:</span> <span class="token punctuation">{<!-- --></span> text<span class="token punctuation">:</span> <span class="token string">'第一个 ECharts 实例'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> tooltip<span class="token punctuation">:</span> <span class="token punctuation">{<!-- --></span><span class="token punctuation">}</span><span class="token punctuation">,</span> legend<span class="token punctuation">:</span> <span class="token punctuation">{<!-- --></span> data<span class="token punctuation">:</span><span class="token punctuation">[</span><span class="token string">'销量'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> xAxis<span class="token punctuation">:</span> <span class="token punctuation">{<!-- --></span> data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">"衬衫"</span><span class="token punctuation">,</span><span class="token string">"羊毛衫"</span><span class="token punctuation">,</span><span class="token string">"雪纺衫"</span><span class="token punctuation">,</span><span class="token string">"裤子"</span><span class="token punctuation">,</span><span class="token string">"高跟鞋"</span><span class="token punctuation">,</span><span class="token string">"袜子"</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> yAxis<span class="token punctuation">:</span> <span class="token punctuation">{<!-- --></span><span class="token punctuation">}</span><span class="token punctuation">,</span> series<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{<!-- --></span> name<span class="token punctuation">:</span> <span class="token string">'销量'</span><span class="token punctuation">,</span> type<span class="token punctuation">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// 5. 使用刚指定的配置项和数据显示图表</span> myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
运行效果展示
二、echarts 中数据的说明
通过上面的实例,大概对 echarts 有了初步了解。下面针对 json 数据项进行分析,空口白话讲解不易理解,下面通过结合一个折线图细细道来~~
1. setOption(data)
setOption() 方法的参数 data 要求为 json 格式的数据,表示使用 json 数据格式的配置来绘制图表
2. 标题 title
即给图表配置的标题,通过 title 实现
title: {
text: '用户来源'
}
- 1
- 2
- 3
3. 提示信息 tooltip
配置提示信息,是鼠标移入图表上某位置时,显示出该位置对应的数据信息,实际效果如图
部分代码如下所示
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#76baf1"
}
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
4. 图例组件 legend
概念:图例组件展现了不同 系列 的标记(symbol)、颜色、名字,可以通过点击图例控制哪些系列不显示
图示:在折线图中,legend 对应的是每条折线的系列
legend: {
data: ["华东","华南","华北","西部","其他"]
}
- 1
- 2
- 3
5. X 轴 xAxis
配置要在 X 轴显示的项
xAxis: {
data: ["2017-12-27","2017-12-28","2017-12-29","2017-12-30","2017-12-31", "2018-1-1"]
}
- 1
- 2
- 3
6. Y 轴 yAxis
配置要在 Y 轴显示的项
yAxis: {
type: "value"
}
- 1
- 2
- 3
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] },
……
]
- 1
- 2
- 3
- 4
- 5
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':自定义系列
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
附:data 数据截图