Vue3快速集成ECharts图表

原创于 2025-08-08 17:50:25 发布 · 210 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

安装

npm install echarts --save

使用

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

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';

// 创建DOM引用
const chartContainer = ref(null);

onMounted(() => {
  // 确保DOM已挂载后再初始化图表
  const myChart = echarts.init(chartContainer.value);
  
  // 设置图表选项
  myChart.setOption({
    title:{
      text:'例子'    //标题
    },
    xAxis: {        //x轴
      type: 'category',     //坐标轴类型
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']   //类目数据，在类目轴（type: 'category'）中有效。
    },
    yAxis: {      //y
      type: 'value'   //坐标轴类型。
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],    //内容数组
        type: 'bar'     //柱状图
      }
    ]
  });
   //指定图表大小
  myChart.resize({
    width:600,
    height:400
  });

  //颜色主题（Theme）
  myChart.setTheme('dark')
});
</script>

<style scoped>

</style>