vue使用echarts开发大屏可视化（附echarts案例资源）

近年来，

可视化

在前端领域是越来越多。最近投入的一个项目就是关于大屏可视化，基本就是用到了

echarts

，所以项目结束后，我也来总结一下如何在Vue中去引入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中涉及到的

配置项

有很多，所以我们会经常到官网查阅一些api和属性，这里附上官网地址(https://echarts.apache.org/zh/)

2.1 安装echarts

npminstall echarts --save

2.2 业务组件进行引入

import*as echarts from'echarts'

2.3 创建容器

我们需要一个有

宽高的div

作为我们echarts的容器。

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

2.4 生成echarts实例

mounted(){this.initChart()},methods:{initChart(){const chart =this.$refs.chart
        if(chart){const myChart = echarts.init(chart)const option ={...}
            myChart.setOption(option)
            window.addEventListener('resize',function(){
                myChart.resize()})}}},destroyed:{
    window.removeEventListener('resize',function(){
        myChart.resize()})}

三、小结

今天的知识点比较基础，向map这些都没有提及到，以后有时间给小伙伴们补充上。这个其实就是一个熟能生巧的过程，写的多了自然就会了。