度娘，不光能用来搜索——echarts

面对elementUi的内卷，度娘找准了自己差异化赛道，通过对势能积累的简单复用实现了价值转化，通过特有抓手找到了自己擅长的垂直领域，实现了行业共建和载体打通，通过点线结合的对焦性打法，找到了前端行业的精细化引爆点，深追未来可视化大屏的潮流，面对无数前端工程师头疼的图表，百度推出了Echarts，这个引爆整个行业的第三方插件。

接下来为大家演示一个简单的例子

首先，我们通过以下代码npm安装Echarts

npm install echarts

我们直接百度搜索Echarts，来到Echarts的官网，点击左上角的示例，点击第一个折线图中的基础折线图。

接下来点击完整代码：

简单介绍一下

通过,

import * as echarts from 'echarts';

在页面内引入Echarts

var chartDom = document.getElementById('main');

以上代码是规定表格生成的位置，通过js获取元素的id，此时必须给元素设置宽高，图表才能正常显示

var myChart = echarts.init(chartDom);，

这里基于准备好的dom，初始化Echarts实例

PS：

//此处引用echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

//此时页面中引入时需要把初始化实例的代码改成如下所示，这样页面中就不需要import * as echarts from 'echarts'来引入了

var myChart = this.$echarts.init(chartDom);

如果你的许多其他页面也都需要Echarts表格，也可以通过以上代码在main.js里全局引入

下面介绍一些重要的配置：

xAxis：x轴的参数，type是坐标轴类型。data是类目数据，反应的是x轴的元素

yAxis：y轴的参数，type如上

Series：type是图表的类型,这里是折线图，line，类似的柱状图为bar，而data就是我们的表格的数据的，这里需要和xAxis的data数目一致，图表才更具有美感。