vue3折线图、3D饼图和环形图的应用

原创于 2025-08-12 14:19:05 发布 · 365 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

通常情况下的图表我们可以用echarts这个插件，我们可以浏览相关网站Apache ECharts来查看所需要的图表及其形式。

我们先做折线图：

1.在HTML中定义折线图

<div class="box">
    <div class="chart" ref="chart2Container">
        <div ref="lineChart" style="width: 100%; height: 100%"></div>
    </div>
</div>

2.在JS中写逻辑

// 引入 echarts
import * as echarts from 'echarts';

// 创建 ref 引用
const lineChart = ref(null);
let lineChartInstance = null;

// 初始化折线图函数
const initLineChart = () => {
  if (!lineChart.value) return;
  
  // 如果已有实例，先销毁
  if (lineChartInstance) {
    lineChartInstance.dispose();
  }
  
  // 初始化 echarts 实例
  lineChartInstance = echarts.init(lineChart.value);
  
  // 配置图表选项
  const option = {
    xAxis: {
      type: 'category',
      data: ['7/26', '7/27', '7/28', '7/29', '7/30', '7/31', '8/1'],
      // ... x轴样式配置
    },
    yAxis: {
      type: 'value',
      // ... y轴样式配置
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line',
        smooth: true,
        // ... 系列样式配置
      }
    ]
  };
  
  // 设置图表选项
  lineChartInstance.setOption(option);
  
  // 添加窗口大小调整监听
  const handleResize = () => {
    if (lineChartInstance) {
      lineChartInstance.resize();
    }
  };
  
  window.addEventListener('resize', handleResize);
  lineChart.value._handleResize = handleResize;
};

// 在组件挂载后初始化图表
onMounted(() => {
  nextTick(() => {
    initLineChart();
  });
});

// 组件销毁时清理资源
onUnmounted(() => {
  if (lineChartInstance) {
    lineChartInstance.dispose();
  }
  
  if (lineChart.value && lineChart.value._handleResize) {
    window.removeEventListener('resize', lineChart.value._handleResize);
  }
});

实现效果如下：

然后我们来做环形图

此次需要实现的样式有点类似于仪表盘。

我们可以把它看成是被挖了一部分的环图，由此我们可以这样设置饼图的属性：

type: 'pie',
radius: ['60%', '80%'],
center: ['50%', '50%'],
minAngle: 5,
startAngle: 220,
endAngle: 320,

其中radius的第一个值控制饼图内部空心部分的半径，第二个值控制饼图整体的半径。

startAngle:220, //起始角度220度

endAngle:320, //结束角度320度