vue echarts柱状图封装

Vue Echarts 是一个基于 ECharts 封装的 Vue.js 组件，可以很方便地在 Vue.js 项目中使用 ECharts。下面是一个简单的柱状图封装示例：

1. 安装 ECharts 和 Vue Echarts：

npm install echarts vue-echarts

2. 创建一个 BarChart.vue 组件：

<template>
  <div ref="chart" style="width:100%;height:100%;"></div>
</template>

<script>
import ECharts from 'vue-echarts';

export default {
  name: 'BarChart',
  components: {
    'v-chart': ECharts,
  },
  props: {
    data: {
      type: Array,
      required: true,
    },
    xName: {
      type: String,
      default: '',
    },
    yName: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: '',
    },
  },
  mounted() {
    this.drawChart();
  },
  watch: {
    data() {
      this.drawChart();
    },
  },
  methods: {
    drawChart() {
      const chart = this.$refs.chart;
      const myChart = this.$refs.chart.echarts.init(chart);
      myChart.setOption({
        title: {
          text: this.title,
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {},
        xAxis: {
          type: 'category',
          data: this.data.map(item => item.name),
          name: this.xName,
        },
        yAxis: {
          type: 'value',
          name: this.yName,
        },
        series: [
          {
            name: this.yName,
            type: 'bar',
            data: this.data.map(item => item.value),
          },
        ],
      });
    },
  },
};
</script>

3. 在需要使用柱状图的组件中使用：

<template>
  <div>
    <bar-chart :data="chartData" x-name="X轴名称" y-name="Y轴名称" title="图表标题" />
  </div>
</template>

<script>
import BarChart from './BarChart.vue';

export default {
  name: 'MyComponent',
  components: {
    'bar-chart': BarChart,
  },
  data() {
    return {
      chartData: [
        { name: '项目1', value: 100 },
        { name: '项目2', value: 200 },
        { name: '项目3', value: 300 },
      ],
    };
  },
};
</script>

这样就可以在页面中显示一个简单的柱状图了。可以根据需要在 BarChart.vue 组件中添加更多的配置项，以满足不同的需求。