vue2使用echarts_chartref使用实例-优快云博客

本文链接：https://blog.youkuaiyun.com/Garryon/article/details/132080242

本文介绍了如何在Vue应用中使用Echarts库创建柱状图，包括准备DOM容器、初始化Echarts实例、设置图表配置项和数据显示的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先准备一个容器，Echarts 会在指定的 DOM 容器中渲染图表。

<template>
  <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template>

引入echarts

创建一个 echarts 实例，并将其绑定到指定的 DOM 容器上

let mychart = echarts.init(this.$refs.chartContainer);

设置图表配置项和数据

let options = {
  // 图表的配置项和数据
};
mychart.setOption(options);

完整代码

<template>
  <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template>

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

export default {
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      let myChart = echarts.init(this.$refs.chartContainer);
      // 模拟一些数据
      const data = [120, 200, 150, 80, 70, 110];

      let option = {
        title: {
          text: '柱状图示例',
          left: 'center',
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: ['A', 'B', 'C', 'D', 'E', 'F'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '销量',
            type: 'bar',
            data: data,
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>

<style>

</style>