echarts柱折结合vue组件示例

ECharts是一个强大的数据可视化库，在Vue.js中使用它可以创建交互式的图表，比如将柱状图和折线图结合。下面是一个简单的例子，展示如何在Vue组件中集成ECharts并创建一个柱状图和折线图混合的图表：

<template>
  <div id="chartContainer" ref="chart"></div>
</template>

<script>
import * as ECharts from '@ecomfe/echarts-core';
import 'echarts-gl';

export default {
  name: 'EChartsComponent',
  data() {
    return {
      chart: null,
      options: {
        tooltip: {},
        series: [
          {
            type: 'bar', // 柱状图
            name: '销售额',
            data: [120, 200, 150, 80, 90], // 数据点
            label: {
              normal: {
                show: true,
                position: 'right'
              }
            }
          },
          {
            type: 'line', // 折线图
            name: '趋势',
            data: [122, 145, 170, 160, 155],
            smooth: true,
            lineStyle: {
              width: 2
            }
          }
        ]
      }
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const container = this.$refs.chart;
      this.chart = ECharts.init(container);
      this.chart.setOption(this.options);
    },
    // 在这里添加其他的ECharts操作，如事件监听、数据更新等
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose(); // 销毁时记得清理图表
    }
  }
};
</script>

<style scoped>
#chartContainer {
  height: 400px;
  width: 100%;
}
</style>

在这个例子中，我们在`mounted`生命周期钩子里初始化了ECharts图表，并设置了柱状图和折线图的数据。你可以通过修改`options`对象来改变图表的行为。