前言
最近可视化浪潮越发凶猛
但是有些小伙伴们就慌了，觉得自己不是很懂，或者说对里面的参数不是很清楚，所以也就印象也就很模糊
那么今天严老湿就带大家好好梳理梳理思路，顺便也带大家写几个Demo
首先得认识Echarts
商业级数据图表，它是一个纯Echarts
的图标库，兼容绝大部分的浏览器，底层依赖轻量级的JavaScript
类库canvas
，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。ZRender
简单起步
创建vue-cli
我们还是老套路，先创建一个
vue-cli
,如果你已经创建了项目可以跳转到 下一步
配置啥的 就不用老严多说了吧(你已经是一个成熟的前端开发者了~)
安装 Echarts
以下几种安装方式择其一
本项目安装的是采用的
yarn
，
echarts
版本号是
4.8.0
全局引入
在main.js中
到了这一步说明你已经把准备工作做完了
清空多余代码
我们先把页面其他不需要用到的代码给清除吧
创建一个容器
创建一个 id 为
EChart
的div 作为容器 (使用id会有个小问题，在最后解答)
创建一个方法
生命周期中调用此方法
请看大屏幕
吃瓜群众：“这特么不是官方示例么？能不能炫一点”
严老师：“说实话确实有点low ，不要慌这才哪到哪呢，我们先从基础讲堂开始嘛”
先了解其参数
先讲讲其中简单的一些配置参数，枯燥乏味，但是摸清楚之后，以后画图那是顺手得一**
先整点简单、常用的来看看(备注里面皆是对应
API
地址)
| 参数名 | 作用 | 备注 |
|---|---|---|
| 作为图表名称 | https://echarts.apache.org/zh/option.html#title |
| 作为图表的标记 | https://echarts.apache.org/zh/option.html#legend |
| 作为图表的X轴 | https://echarts.apache.org/zh/option.html#xAxis |
| 作为图表的Y轴 | https://echarts.apache.org/zh/option.html#yAxis |
| 作为图表的系列 | https://echarts.apache.org/zh/option.html#series |
| 作为图表的颜色列表 | https://echarts.apache.org/zh/option.html#color |
掰扯了这么多，估计大家心里也没个底，实战一下吧
来造作一下下
series type
来吧！！展示
series指系列列表。每个系列通过 type 决定自己的图表类型
折线图
修改折线图,复制上面的
config
代码
只用修改一处地方，那就是
series
中的
type
属性为
line
即可
饼状图
饼状图，我们也来看看，将
type
修改为
pie
当然我们需要把多余的
X轴Y轴
配置删除咯,data数据格式也需要修改一下
仪表盘
仪表盘将
type
修改为
gauge
嗯~ 看起来有那么一点味道了
legend
刚刚其实我们已经用到了这个参数噢 ps：饼状图
legend
可以作为图表的标记或颜色的名称描述(专业名词：图例)
它的type有两个参数
plain || scroll
默认为
plain
当图表内容比较丰富的时候可以使用
scroll
可以带有滚动操作
color
都说颜色是Web的灵魂所在，每一个人都是画手
color调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。
官方默认配色 ：
我们也可以自己修改颜色,规则是按数据对应的
index
找
color
颜色
例如这样：
yAxis
yAxis 指直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。
我们还是以线条为参考8
先看看基础篇,我们在y轴声明了一个name
但是有时候呢，我们会根据需求，要做一个双Y轴，顾名思义双Y轴，在加一个Y轴就好了
xAxis
xAxis指直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
x轴与y轴基本同理，直接改成数组就成为双x轴了
其他参数
- title 标题组件，包含主标题和副标题。
- backgroundColor背景色，默认无背景。
- animation是否开启动画。
- grid 直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图(气泡图)。
- tooltip提示框组件。
到了上面基础篇也就差不多了
使用id为问题所在
其实我们讲了这么多，我们梳理梳理最开始的问题
- id重名怎么办？
- 数据多个渲染怎么办？
答案：使用ref，因为vue是单页面，使用id出现 重名会导致渲染问题
具体怎么使用我们来看看
总结
使用
echarts
的熟练度最主要的就是写得多，社区的案例也是多不胜数，面向社区开发就好了
社区地址：https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all
参考文献
https://echarts.apache.org/zh/option.html
https://echarts.apache.org/examples/zh/index.html