VUE整合Echarts实现简单的数据可视化

<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>用户来源</span>
          </div>
          <div ref="sourceChart" style="height: 300px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>用户分布</span>
          </div>
          <div ref="distributionChart" style="height: 300px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
 
<script>
import * as echarts from 'echarts';
 
export default {
  name: 'UserAnalysis',
  data() {
    return {
      sourceData: {
        legend: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
        series: [33, 22, 33, 55, 66]
      },
      distributionData: {
        legend: ['桌面', '移动', '平板'],
        series: [33, 22, 44]
      }
    };
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      const sourceChart = echarts.init(this.$refs.sourceChart);
      const distributionChart = echarts.init(this.$refs.distributionChart);
 
      const option = {
        color: ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE'],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            data: this.sourceData.series.map((value, index) => ({ value, name: this.sourceData.legend[index] }))
          }
        ]
      };
 
      sourceChart.setOption(option);
 
      const distributionOption = {
        color: ['#5470C6', '#91CC75', '#FAC858'],
        series: [
          {
            name: '设备分布',
            type: 'pie',
            radius: '55%',
            data: this.distributionData.series.map((value, index) => ({ value, name: this.distributionData.legend[index] }))
          }
        ]
      };
 
      distributionChart.setOption(distributionOption);
    }
  }
};
</script>
 
<style scoped>
.box-card {
  margin-bottom: 20px;
}
</style>

这个代码实例使用Vue和Element UI来构建用户界面，并通过ECharts绘制图表。在data函数中定义了两组用于ECharts图表的数据，在mounted钩子中调用initCharts方法来初始化图表。initCharts方法中使用ECharts的实例方法init来在对应的DOM元素上初始化图表，并设置相应的配置项。这个例子展示了如何在Vue项目中整合ECharts，并简单地展示了两个饼图的绘制。