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

npm install echarts --save

2.2 业务组件进行引入

import * as echarts from 'echarts'

2.3 创建容器

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

<div ref="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这些都没有提及到，以后有时间给小伙伴们补充上。这个其实就是一个熟能生巧的过程，写的多了自然就会了。