Vue整合折线图、柱状图、扇形图

下载依赖

npm install echarts --save

业务代码

<template>
  <div>
    <div ref="lineChart" style="width: 300px; height: 300px;"></div>
    <div ref="pieChart" style="width: 300px; height: 300px;"></div>
    <div ref="barChart" style="width: 300px; height: 300px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'ChartComponent',
  components: {}, // 如果有其他组件需要注册，可以在这里注册
  props: {},
  data() {
    return {
      // 这里存放数据
    };
  },
  computed: {},
  watch: {},
  methods: {
    initLineChart() {
      const myChart = echarts.init(this.$refs.lineChart);
      const option = {
        title: {
          text: '折线图'
        },
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周五']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'line',
            data: [120, 200, 150, 80, 70],
            smooth: true
          }
        ]
      };
      myChart.setOption(option);
    },

    initPieChart() {
      const myChart = echarts.init(this.$refs.pieChart);
      const option = {
        title: {
          text: '扇形图（饼图）'
        },
        tooltip: {},
        legend: {
          data: ['直接访问', '邮件营销', '联盟广告']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' }
            ]
          }
        ]
      };
      myChart.setOption(option);
    },

    initBarChart() {
      const myChart = echarts.init(this.$refs.barChart);
      const option = {
        title: {
          text: '柱状图'
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
      myChart.setOption(option);
    }
  },
  created() {
    // 在创建阶段可以做一些准备工作
  },
  mounted() {
    this.initLineChart();
    this.initPieChart(); // 确保调用正确的方法
    this.initBarChart(); // 确保调用正确的方法
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {}
};
</script>

<style scoped>
/* 可以在这里添加样式 */
</style>