记录vue封装echarts的柱状图以及饼图

1、 封装柱状图

1.1、前提

先创建一个名为BarChart.vue的vue文件

1.2、子组件

<template>
  <div :id="chartId" class="grid-content bg-purple"></div>
</template>

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

export default {
  props: {
    data: {
      type: Object,
      required: true,
    },
    chartId: {
      type: String,
      required: true,
    },
    text: {
      type: String,
      required: false,
      default: "柱状图",
    },
    subtext: {
      type: String,
      required: false,
    },
  },
  data() {
    return {
      yearList: [],
      barChart: null,
    };
  },
  watch: {
    data: {
      handler(newData) {
        this.updateChart(newData);
      },
      deep: true,
    },
    // 监听标题属性
    text(newText) {
      this.updateText(newText);
    },
    // 监听副标题属性
    subtext(newSubText) {
      this.updateSubText(newSubText);
    },
  },
  mounted() {
    this.initChart();
    this.updateChart(this.data);
  },
  methods: {
    initChart() {
      this.barChart = echarts.init(document.getElementById(this.chartId));
    },
    updateChart(data) {
      if (this.barChart) {
        const option = {
          title: {
            text: this.text,
            subtext: this.subtext,
            left: "center",
          },

          xAxis: {
            type: "category",
            data: data.xData,
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              name: "数据",
              type: "bar",
              data: data.yData,
            },
          ],
        };
        this.barChart.setOption(option);
      }
    },
    // 更新副标题
    updateSubText(newSubText) {
      if (this.barChart) {
        this.barChart.setOption({
          title: {
            subtext: newSubText,
          },
        });
      }
    },
    // 更新标题
    updateText(newText) {
      if (this.barChart) {
        this.barChart.setOption({
          title: {
            text: newText,
          },
        });
      }
    },
  },
};
</script>

<style scoped>
/* 可以添加组件的样式 */
</style>

1.3.父组件

 <bar-chart
  :data="xmmjBarChartData"
  chartId="myBarChart"
  text="柱状图标题"
  subtext="柱状图副标题"
  style="height: 400px"
 ></bar-chart>

2、封装饼图

2.1、前题条件

先创建一个名为PieChart.vue的vue文件

2.2、子组件

<template>
  <div class="grid-content bg-purple" :id="chartId"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
  props: {
    data: {
      type: Object,
      required: true,
    },
    chartId: {
      type: String,
      required: true,
    },
    text: {
      type: String,
      required: false,
      default: "饼图",
    },
    subtext: {
      type: String,
      required: false,
    },
  },
  data() {
    return {
      pieChart: null,
    };
  },
    watch: {
    // 监听数据对象
    data: {
      handler(newData) {
        this.updateChart(newData);
      },
      deep: true,
      },
    // 监听标题属性
    text(newText) {
      this.updateText(newText);
      },
    // 监听副标题属性
    subtext(newSubText) {
      this.updateSubText(newSubText);
    },
    },
  
  mounted() {
    this.initChart();
    this.updateChart(this.data);
    this.updateText(this.text);
    this.updateSubText(this.subtext);
  },
    methods: {
    // 初始化图表
    initChart() {
      this.pieChart = echarts.init(document.getElementById(this.chartId));
      },
    //   更新图表
    updateChart(data) {
      if (this.pieChart) {
        const option = {
          title: {
            text: this.text,
            subtext: this.subtext,
            left: "center",
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            orient: "vertical",
            left: "left",
          },
          series: [
            {
              name: "测试",
              type: "pie",
              radius: "60%",
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
              data: data,
            },
          ],
          };
        // 使用刚指定的配置项和数据显示图表。
        this.pieChart.setOption(option);
      }
      },
    // 更新副标题
    updateSubText(newSubText) {
      if (this.pieChart) {
        this.pieChart.setOption({
          title: {
            subtext: newSubText,
          },
        });
      }
      },
    // 更新标题
    updateText(newText) {
      if (this.pieChart) {
        this.pieChart.setOption({
          title: {
            text: newText,
          },
        });
      }
    },
  },
};
</script>

<style scoped>
/* 可以添加组件的样式 */
</style>

2.3、父组件

<pie-chart
   :data="zlxsPieChartData"
    text="饼图标题"
    subtext="饼图副标题"
    chartId="zlxsPieChart"
    style="height: 400px"
 ></pie-chart>