引言
不知道大家初学 Echarts 时有没有一种感觉，就是配置项极其的繁杂，根本不知道对应图中的哪个部分。本文将从 Echarts 常用配置项开始，最终实现一个基础的大屏项目。项目基于Vue 及 Echarts5 实现。先看下最终效果：
因公司项目不方便展示，除地图外，此项目中的 图形 样式来自 pink 老师的 B 站 ECharts 教程，感谢 pink 老师的无私奉献！创作不易，如文章对您有些许帮助，还请您点个赞再走！
1 快速上手
先介绍下最基础的用法，心里有个底先：
1.1 引入 Apache ECharts
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
</html>
打开这个 index.html，你会看到一片空白。但是不要担心，打开控制台确认没有报错信息，就可以进行下一步。
1.2 绘制一个简单的图表
在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 </head> 之后，添加：
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
这样你的第一个图表就诞生了！
以上内容来自官网介绍：echarts.apache.org/handbook/zh…
2 Echarts 常用配置项图解
下面介绍下 myChart.setOption(option) 中的配置项 option，仅对我在项目中用到的常见配置项作介绍，起来抛砖引玉的作用：
通过术语速查手册可快速了解功能名称，帮助定位到配置项手册。文档地址：echarts.apache.org/zh/cheat-sh…
配置项手册地址：echarts.apache.org/zh/option.h…
2.1 color
如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。默认为：
['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
Echarts 5 开始默认采用 '#5470c6' 色如下：
自定义color示例：color: ['yellow', 'green']
上方柱状图中有两个系列（黄色及绿色），黄色对应2011年，绿色对应2012年。3个类目（World、China、India）。系列的颜色根据给定的 color: ['yellow', 'green'] 来渲染。
要给系列中的单个柱子设置不同颜色，在 series 的 itemStyle 中设置：
option = {
...
series: [
{
data: [
20,
52,
{
value: 200,
itemStyle: {
color: 'red',
},
},
334,
390,
330,
220,
],
type: 'bar'
}
]
};
2.2 title
标题组件，包含主标题和副标题。
title: {
text: '特性示例：渐变色 阴影 点击缩放',
subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
}
2.3 tooltip
鼠标悬浮在图上显示的提示框。
1、 show：<boolean> [ default: true ] 是否显示提示框组件，包括提示框浮层和 axisPointer。
2、 trigger： <string> [ default: 'item' ] 触发类型。
- 'item'：光标指在图形上触发，主要在散点图，饼图等无类目轴的图表中使用。
- 'axis'：光标进入类目轴时触发，主要在柱状图，折线图等有类目轴的图表中使用。
- 'none'：什么都不触发。
3、 axisPointer：<string> [ default: 'line' ] 坐标轴指示器配置项。
注意： tooltip.axisPointer 中诸配置项的优先级低于轴上的 axisPointer 的配置项。
- 'line'：直线指示器
- 'shadow'：阴影指示器
- 'none'：无指示器
- 'cross' ：十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer
4、 formatter：提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
-
字符串模板
模板变量有
{a},{b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为'axis'的时候，会有多个系列的数据，此时可以通过{a0},{a1},{a2}这种后面加索引的方式表示系列的索引。 不同图表类型下的{a}，{b}，{c}，{d}含义不一样。 其中变量{a},{b},{c},{d}在不同图表类型下代表数据含义为：- 折线（区域）图、柱状（条形）图、K线图 :
{a}（系列名称），{b}（类目值），{c}（数值）,{d}（无） - 散点图（气泡）图 :
{a}（系列名称），{b}（数据名称），{c}（数值数组）,{d}（无） - 地图 :
{a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无） - 饼图、仪表盘、漏斗图:
{a}（系列名称），{b}（数据项名称），{c}（数值）,{d}（百分比）
饼图示例：
formatter: '{a} <br/>{b} : {c} ({d}%)', - 折线（区域）图、柱状（条形）图、K线图 :
-
回调函数示例：
params 参数部分属性释义：
-
seriesName：对应字符串模板中的
{a}（系列名称） -
name：对应字符串模板中的
{b}（数据项名称） -
value：对应字符串模板中的
{c}（数值） -
percent：对应字符串模板中的
{d}（百分比）...
-
实现和字符串模板一样的效果的回调：
formatter: function(params) {
return `${params.seriesName} <br/>${params.name} : ${params.value} (${params.percent}%)`
}
回调函数参数 params 中更多属性请查看文档：echarts.apache.org/zh/option.h…
2.4 legend
图例组件。图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
当 series 中有 name 值时，legend 可不指定 data 而从 series.name 中获取，不过 legend 属性必须填上，即便为 空对象
2.5 axisPointer
这是坐标轴指示器（axisPointer）的全局公用设置。
注意： 一般来说，axisPointer 的具体配置项会配置在各个轴中（如 xAxis.axisPointer）或者
tooltip中（如 tooltip.axisPointer）。
但是这几个选项只能配置在全局的 axisPointer 中：axisPointer.triggerOn、axisPointer.link。
2.6 backgroundColor
整个canvas画布的背景色，默认无背景（transparent）。
2.7 grid
直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。
可以控制 echarts 图形在 dom容器 中所占的大小：
上图中的 left、right、tip、bottom 分别对应 grid.left、grid.right、grid.top、grid.bottom。
1、 show：是否显示直角坐标系网格，即下图红框区域，默认false。
2、 borderColor：网格的边框颜色，注意：此配置项生效的前提是，设置了 show: true。
2.8 xAxis
直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
1、 type： [ default: 'category' ] 坐标轴类型。
-
'category' ：类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
xAxis: { type: 'category' ， data: ['旅游行业','教育培训','游戏行业','医疗行业','电商行业','社交行业','金融行业',] } -
'value'：数值轴，适用于连续数据。
2、 axisLabel：<Object> 坐标轴刻度标签的相关设置。
示例：设置颜色 和 字体大小
axisLabel: {
color: 'rgba(255,255,255,.6)',
fontSize: '12',
}
3、 axisLine：<Object> 坐标轴轴线相关设置。
-
show：是否显示坐标轴轴线。从
v5.0.0开始，数值轴 (type: 'value') 默认不显示轴线，需要显式配置。 -
lineStyle：设置单独的线条样式。
lineStyle: { color: '#f00', // 颜色 width: 1, // 宽度 type: 'solid', // 类型 }
4、 axisTick：<Object> 坐标轴刻度相关设置。
-
show：是否显示坐标轴刻度。默认显示
-
alignWithLabel：类目轴中在 xAxis.boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐。
false的时候刻度线不在类目轴的中点处：
5、 boundaryGap：<Boolean> 坐标轴两边留白策略，类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true。
为 true 的时候折线图如右：x 类目轴标签显示在刻度中间：
为 false 的时候：x 类目轴标签显示在刻度处:
柱状图不要设为false，否则会变成这样：
6、 data：<Object> 类目数据，在类目轴（type: 'category'）中有效。数组中的数据会作为 坐标轴的 【刻度标签】显示在 坐标轴区域。
-
Array <String> 方式设置：
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] -
Array <Object> 方式设置:
data: [ { value: '衬衫', textStyle: { fontSize: 20, color: 'red', }, },'羊毛衫','雪纺衫','裤子','高跟鞋','袜子', ]
7、 splitLine：<Object> 坐标轴在 grid 区域中的分隔线。
splitLine: {
show: true, // 是否显示分隔线。默认数值轴显示，类目轴不显示。
// 线条样式
lineStyle: {
color: 'rgba(255,255,255,.1)',
},
}
类目轴图形show为false时示例：
类目轴图形show为true时示例：
2.9 yAxis
直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。
1、 splitLine：<Object> 坐标轴在 grid 区域中的分隔线。
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)',
},
}
2、 axisLine：<Object> 坐标轴轴线相关设置。
-
show：是否显示坐标轴轴线。设置成 false 时 将隐藏 y 轴轴线。
-
lineStyle：设置单独的坐标轴轴线样式。
lineStyle: { color: 'rgba(255,255,255,.1)', width: 2, type: 'solid', }
3、 axisLabel：<Object> 坐标轴刻度标签的相关设置。
-
show：是否显示刻度标签。
-
formatter：刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
示例:
// 使用字符串模板，模板变量为刻度默认标签 {value}
formatter: '{value} %'
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
formatter: function (value, index) { return value + '%'; }
这样给y轴label添加上了百分号。关于 formatter 更多配置参考文档：echarts.apache.org/zh/option.h…
4、 inverse：<Boolean> 是否是反向坐标轴。默认false。
默认 false 即坐标轴从原点向上延伸为正向，yAxis.data 中的坐标轴刻度标签 对应 series.data 中的数据。
2.10 series
Array，系列列表。每个系列通过 type 决定自己的图表类型。数组里面的每个对象代表一类数据。
2.10.1 柱状图（type：'bar'）
是一种通过柱形的高度（横向的情况下则是宽度）来表现数据大小的一种常用图表类型。
1、 barWidth：<数值 或 百分比> 柱条的宽度，不设时自适应。
2、 barCategoryGap： 同一系列的柱间距离，默认为类目间距的20%，可设固定值。
下方设为 50% 后，绿色以绿色的类目轴宽度100 为基准来设置。
series: [{
barCategoryGap: '50%',
...
}]
3、 yAxisIndex： 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
此例中有两个 y 轴，左侧y轴对应内部柱形图，右侧y轴对应柱形外框，右侧 y 轴设置 yAxisIndex 属性值比左侧大即可实现压住左侧内部柱形：
4、 itemStyle： 整体图形样式生效，单个生效需设置在 data 项中的 itemStyle 中。
-
borderRadius：圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。
borderRadius: 5, // 统一设置四个角的圆角大小 borderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下） -
color：柱条的颜色。
设置为函数时 params 对应系列中的柱形对象，dataIndex 对应柱形对象索引，通过此方法给每个柱形设置不同颜色。
color: (params) => { const colorList = [ '#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6', ] return colorList[params.dataIndex] },
5、 label： 单个柱条文本的样式设置。
-
一般样式设置：
label: { show: true, // 是否显示标签。 position: 'inside', // 标签的位置。 color: 'rgba(255,255,255,.7)', // 文本颜色 fontSize: 16, // 文字的字体大小 } -
formatter：标签内容格式器，支持字符串模板和回调函数，支持 \n 换行。
模板变量：{a}：系列名。{b}：数据名。{c}：数据值。
formatter: '{c}%'， // 此时 series.data: [70, 34, 60, 78, 69]
6、 name： 系列名称，用于tooltip的显示，legend 的图例筛选。
7、 data： 当只有一个轴为类目轴（axis.type 为 'category'）的时候，数据可以简化用一个一维数组。
-
itemStyle
和 xAxis.data 类似，数组项可用对象：
data: [{value: 5, itemStyle: { color: 'green', }, },20,36,10,10,20,] // data: [5, 20, 36, 10, 10, 20] 对应 xAxis.data 中的类目项 ['衬衫', '羊毛衫','雪纺衫','裤子','高跟鞋','袜子'] 中的值。此时会改变单个 类目轴对应的 图形颜色 及 tooltip 对应的颜色
-
label：单个柱条 label 的样式设置。
2.10.2 折线/面积图（type：'line'）
1、 stack： 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。
-
'samesign'只在要堆叠的值与当前累积的堆叠值具有相同的正负符号时才堆叠。 -
'all'堆叠所有的值，不管当前或累积的堆叠值的正负符号是什么。 -
'positive'只堆积正值。 -
'negative'只堆叠负值。数据未堆叠时，折线显示的数据对应的就是 各自series.data 中的数据，此时折线可能出现重叠：
数据堆叠时，折线显示的数据会累加前一个系列中 series.data 中的数据，此时折线不会重叠，且对应的 y 轴坐标和 series.data 中的不一致：
2、 smooth：<boolean，number> 默认false。
如果是 boolean 类型，则表示是否开启平滑处理。如果是 number 类型（取值范围 0 到 1），表示平滑程度，越小表示越接近折线段，反之则反。设为 true 时相当于设为 0.5。
3、 lineStyle： 线条样式。
注： 修改 lineStyle 中的颜色不会影响图例颜色，如果需要图例颜色和折线图颜色一致，需修改 itemStyle.color，线条颜色默认也会取该颜色
```js
// 单独修改线的样式
lineStyle: {
color: 'red',
width: 2,
}
```
4、 areaStyle：<Object> 区域填充样式。设置后显示成区域面积图。
-
color：渐变色可参考文档写法 echarts.apache.org/zh/option.h…
如白色箭头所示渐变色由上至下：
areaStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(1, 132, 213, 0.4)', // 渐变色的起始颜色
},
{
offset: 0.8,
color: 'rgba(1, 132, 213, 0.1)', // 渐变线的结束颜色
},
],
false
),
shadowColor: 'rgba(0, 0, 0, 0.1)',
},
-
shadowColor：阴影颜色。支持的格式同color。
areaStyle: { shadowColor: 'rgba(0, 0, 0, 0.1)', },
5、 拐点标记相关
-
showSymbol：是否显示拐点标记 symbol, 如果 false 则只有在 tooltip hover 的时候显示
-
symbol：拐点标记的图形
-
symbolSize：拐点标记的大小
-
itemStyle：折线拐点标志的样式
示例：
// 开始不显示拐点， 鼠标经过显示
showSymbol: false,
// 设置拐点 小圆点
symbol: 'circle',
// 拐点大小
symbolSize: 8,
// 设置拐点颜色以及边框
itemStyle: {
color: '#0184d5',
borderColor: 'rgba(221, 220, 107, .1)',
borderWidth: 12,
},
2.10.3 饼图（type：‘pie’）
饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。
1、 name： 系列名称，用于tooltip的显示，legend 的图例筛选。
2、 center： default: ['50%', '50%'] 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
3、 radius：<number、string、Array> [ default: [0, '75%'] 饼图的半径，数组的第一项是内半径，第二项是外半径。百分比单位相对于容器大小。
radius: ['40%', '60%'] // 此时有内圆
radius: ['0', '60%'] // 此时内圆消失，变成了饼图
4、 label： 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
-
show：default: false 默认不显示标签, 即饼图中每一项对应的名称
-
fontSize：文字的字体大小
-
position：default: 'outside' 标签的位置
-
formatter：标签内容格式器，支持字符串模板和回调函数，支持\n 换行
* {a}：系列名。 * {b}：数据名。 * {c}：数据值。 * {d}：百分比。
5、 label 及 labelLIne 实例：
示例：
label: {
show: true,
position: 'outside',
},
labelLine: {
show: true,
}
6、 labelLine： 标签的视觉引导线样式，在 label 位置 设置为'outside'的时候会显示视觉引导线。
-
show 是否显示视觉引导线。
-
length 视觉引导线第一段的长度
-
length2 视觉引导项第二段的长度
7、 data： 系列中的数据内容数组。
data: [
{ value: 1, name: "0岁以下" },
{ value: 4, name: "20-29岁" },
{ value: 2, name: "30-39岁" },
{ value: 2, name: "40-49岁" },
{ value: 1, name: "50岁以上" }
]
8、 roseType：<boolean、string> [default: false] 是否展示成南丁格尔图。
- 'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。数据不一样圆心角也不一样
- 'area' 所有扇区圆心角相同，仅通过半径展现数据大小。圆心角都是一样的
9、 emphasis： hover 在图形上时的效果，高亮状态的扇区和标签样式。
- scale 默认true，是否开启高亮后扇区的放大效果。
- scaleSize 默认10，高亮后扇区的放大尺寸，在开启 emphasis.scale 后有效。
2.10.4 二维地图（type：‘map’）
二维地图的完整用法在本节后面列出，这里先对配置项作一下说明。
geo 常用配置项：
geo: {
map: 'hunan', // 使用 registerMap 注册的地图名称
aspectScale: 1, // 长宽比
zoom: 0.8, // 地图放大 1.1 倍
roam: true, // 开启后可以鼠标可以拖动和缩放
scaleLimit: { // 滚轮缩放的极限控制，通过min, max最小和最大的缩放值，默认的缩放为1
min: 0.5,
// max: 20,
},
// left: '0%', // 组件离容器左侧的距离。
// top: '0%', // 组件离容器上侧的距离。
// layoutCenter: ['50%', '50%'], // 需要将地图定位到容器中间且不超出容器时使用
// layoutSize: 100, // 需要将地图定位到容器中间且不超出容器时使用
// 区域样式
itemStyle: {
areaColor: 'rgba(20,41,80,.6)', // 地图区域的颜色
borderColor: '#0692a4', // 图形的描边颜色。
borderWidth: 1, // 描边线宽。为 0 时无描边
shadowColor: '#182f68', // 阴影颜色
shadowOffsetX: 0, // 阴影水平方向上的偏移距离
shadowOffsetY: 25, // 阴影垂直方向上的偏移距离
},
label: {
show: true, // 是否显示标签
textStyle: {
color: '#fff', // 默认标签颜色
},
},
// 指上去时的样式
emphasis: {
itemStyle: {
areaColor: 'rgba(20,41,80,.6)', // 指上去时的区域背景色
borderWidth: 1, // 指上去时的区域边框大小
},
label: {
textStyle: {
color: '#fff', // 指上去时的标签颜色
},
},
},
},
series 常用配置项
series: [
{
// 如配置了 geo 时指定 geoIndex：0，就会和 geo 共用 geo 地图组件，当前 map 中的 label，itemStyle，emphasis等从 geo 中取，自身的则会失效,如果需要缩放，平移时适合设置它，否则缩放时会出现两个地图
geoIndex: 0,
type: 'map',
},
{
type: 'scatter', // 2d散点（气泡）图
coordinateSystem: 'geo', // 该系列使用的坐标系，可选：'cartesian2d'、'polar'、'geo'、'calendar'、
// 标记的大小 如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数：
symbolSize: (item) => {
const current = this.hospitalList.find(
(data) => data.id === item[2]
)
return current.size
},
// 图形样式
itemStyle: {
// 图形的颜色。 默认从全局调色盘 option.color 获取颜色。支持使用回调函数。回调函数格式如下：
color: (item) => {
// console.log(item)
const current = this.hospitalList.find(
(data) => data.id === item.value[2]
)
if (current) {
return current.color
}
},
},
// 系列中的数据内容数组。数组项通常为具体的数据项。
data: [
// 格式如下：
// {
// name: '长沙市第一医院',
// value: [
// 112.988817,
// 28.210389,
// 1,
// [
// {
// label: '诊疗数',
// value: 666,
// },
// {
// label: '报告数',
// value: 666,
// },
// ],
// ],
// },
...
],
},
],
3 二维地图完整步骤
生成的地图效果：
3.1 获取地图坐标数据
通过下面的链接可以获取到中国 及 下属的省市县 Json 数据，可先用鼠标选取行政区域，然后右侧会展示对应的接口地址及Json数据下载地址。
3.2 获取点坐标数据
通过下面的链接可以查询到对应详细地点的坐标：
api.map.baidu.com/lbsapi/getp…
3.3 生成完整配置项
import * as echarts from 'echarts'
// 通过 3.1节 方式获取到湖南省地图的 json 数据
import hunanMapJson from '@/assets/map/hunan.json'
...
// 生成地图配置项的函数
function getMapOptions() {
// 注册名称为 hunan 的地图
echarts.registerMap('hunan', hunanMapJson)
const option = {
// 定义提示框
tooltip: {
trigger: 'item',
formatter: function (params, ticket, callback) {
// 指到 scatter 2d散点（气泡）图时的表现
if (params.seriesType == 'scatter') {
let desc = ''
if (params.data.value[3]) {
params.data.value[3].forEach((item) => {
desc += `</br> ${item.label}: ${item.value}`
})
}
return params.marker + params.name + desc
// 指到地图地区的表现
} else if (params.seriesType == 'map') {
return params.name
}
},
backgroundColor: 'rgba(50,50,50,0.7)',
textStyle: {
color: '#fff',
},
borderWidth: 0,
}
geo: {...}, // 定义地图相关配置，参考 2.10.4
series: {...}, // 定义 series 相关配置，参考 2.10.4
}
// 生成模拟数据
const arr = this.hospitalList
.map((item) => {
item.list.forEach((data) => {
data.value[3] = [
{
label: '诊疗数',
value: 666,
},
{
label: '报告数',
value: 666,
},
]
})
return item.list
})
.flat()
// 添加模拟数据
option.series[1].data = arr
return option
}
const mapOptions = this.getMapOptions()
...
4 Vue 项目结合 Echarts
完整的 Vue 项目 demo 地址：github.com/wangjunjie0…
以下是我在 Vue 中渲染 Echarts 的大致思路，因为图形较少，没有封装成 Vue 组件，供大家参考：
<template>
<div class="home_wrapper">
...
</div>
</template>
<script>
export default {
name: 'home',
data() {
return {
bar1: {},
bar2: {},
line1: {},
line2: {},
pie1: {},
pie2: {},
hunanMap: {},
}
},
methods: {
initEcharts() {
this.bar1 = config.bar1
this.bar2 = config.bar2
this.line1 = config.line1
this.line2 = config.line2
this.pie1 = config.pie1
this.pie2 = config.pie2
this.hunanMap = this.getMapOptions()
// dom: 包含 echarts 实例的dom容器或 选择器值
// options: 传入 echarts 实例的选项对象
this.dataArr = [
{
dom: '.employment_industry1',
options: this.bar1,
},
{
dom: '.employment_industry2',
options: this.bar2,
},
{
dom: '.people_change',
options: this.line1,
},
{
dom: '.play_amount',
options: this.line2,
},
{
dom: '.age_distribution',
options: this.pie1,
},
{
dom: '.district_distribution',
options: this.pie2,
},
{
dom: '.hunan_map',
options: this.hunanMap,
},
]
this.initEchartsInstance(this.dataArr)
},
// 初始化 echarts 实例
initEchartsInstance(data) {
data.forEach((item, index) => {
let domContainer
if (typeof item.dom === 'string') {
domContainer = document.querySelector(item.dom)
} else if (typeof item.dom === 'object') {
domContainer = item.dom
}
// console.log(domContainer);
this[`echartsInstance${index}`] = echarts.init(domContainer)
this[`echartsInstance${index}`].setOption(item.options)
})
},
// 改变浏览器窗口大小时触发
resiseMethod() {
this.dataArr.forEach((item, index) => {
this[`echartsInstance${index}`].resize()
})
},
}，
mounted() {
this.initEcharts()
window.addEventListener('resize', this.resiseMethod)
}，
beforeDestroy() {
window.removeEventListener('resize', this.resiseMethod)
},
}
</script>
参考链接：
