近年来，<code>可视化在前端领域是越来越多。最近投入的一个项目就是关于大屏可视化，基本就是用到了echarts，所以项目结束后，我也来总结一下如何在Vue中去引入echarts并使用。

文章目录

一、echarts案例网站可视化社区(https://www.makeapie.cn/echarts)ISQQWPPChart(https://ppchart.com)分享你我 – ECharts 作品集 (http://chart.majh.top)Make A Pie(https://madeapie.com)

二、echarts使用2.1 安装echarts2.2 业务组件进行引入2.3 创建容器2.4 生成echarts实例

三、小结

一、echarts案例网站

这里先给大家列出我在项目中用到的一些demo实例供小伙伴们参考。

可视化社区(https://www.makeapie.cn/echarts)

优点：案例资源丰富，有主体分类且分类较细，有分页，可检索，提供登录和社区。缺点：访问速度慢，有广告。

ISQQW

优点：案例资源丰富，可检索，有主体分类。缺点：未做分页，访问速度较慢。

PPChart(https://ppchart.com)

优点：案例资源丰富，有主体分类且分类较细，有分页，可检索，访问速度较快。

分享你我 – ECharts 作品集 (http://chart.majh.top)

优点：案例资源丰富，有主体分类，可检索，访问速度较快。缺点：未做分页。

Make A Pie(https://madeapie.com)

优点：案例资源丰富，可检索，有主体分类。缺点：访问速度较慢，未做分页。

二、echarts使用

因为echarts中涉及到的<code>配置项有很多，所以我们会经常到官网查阅一些api和属性，这里附上官网地址(https://echarts.apache.org/zh/)

2.1 安装echarts

npm install echarts --save

2.2 业务组件进行引入

import * as echarts from 'echarts'

2.3 创建容器

我们需要一个有宽高的div作为我们echarts的容器。

<div ref="chart" style="width: 600px; height: 400px;"></div>code>

2.4 生成echarts实例