echarts图表的应用

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'
            }
          }
        ]
      })
    }
  },