Apache ECharts——一个基于 JavaScript 的开源可视化图表库
- 安装 echarts 包--------------------> npm i echarts
- 准备容器（宽高）-----------------> div 设置宽高 ======> 完成图表初始化，获取数据后设置图表
- 基于容器进行初始化--------------> echarts.init(容器)
- 设置数据和选项--------------------> setOption(选项)
- 准备带宽高容器
<div class="chart"><!-- 图表 --><div ref="socialChart" style="width: 100%; height: 100%" /></div><div class="chart"><!-- 图表 --><div ref="providentChart" style="width: 100%; height: 100%" /></div>
- 在 mounted 中对容器进行初始化
无需在data中声明
social和provident，因为这两个数据不用是响应式的，只是用来设置图表数据和选项的
mounted() {this.social = echarts.init(this.$refs.socialChart)this.provident = echarts.init(this.$refs.providentChart)}
- 监听首页数据变化设置图表选项
data() {return {homeData: {} // 获取数据省略...}},
watch: {homeData() {this.social.setOption({xAxis: {type: 'category',boundaryGap: false,data: this.homeData.socialInsurance?.xAxis // 可选链防止值为空而报错},yAxis: {type: 'value'},series: [{data: this.homeData.socialInsurance?.yAxis, // 可选链防止值为空而报错type: 'line',areaStyle: {color: '#04c9be'},lineStyle: {color: '#04c9be'}}]})}},
)
