vue3半圆进度条,基于echarts仪表盘改造半环形进度图,扇形饼状图

### Vue3 结合 ECharts 实现半圆进度条、半环形进度图以及扇形饼状图 #### 使用 Vue3 和 ECharts 的基本配置 为了在 Vue3 中使用 ECharts，首先需要安装 `echarts` 库并将其集成到项目中。可以通过 npm 或 yarn 安装依赖项： ```bash npm install echarts --save ``` 接着，在 Vue 组件中引入 ECharts 并初始化图表实例。 --- #### 半圆进度条的实现方法 以下是基于 ECharts 配置的一个典型半圆进度条示例[^1]： ```javascript const option = { series: [ { type: 'gauge', radius: '90%', startAngle: 180, endAngle: 0, // 设置起始角度和结束角度形成半圆形 min: 0, max: 100, splitNumber: 5, axisLine: { lineStyle: { width: 20, color: [[0.7, '#ebebeb'], [1, '#f45b5b']] // 进度颜色渐变设置 } }, pointer: { show: false }, // 不显示指针 detail: { formatter: '{value}%', // 显示百分比数值 offsetCenter: [0, '-60%'] // 调整文字位置 }, data: [{ value: 70 }] // 当前进度值 } ] }; ``` 此选项通过调整 `startAngle` 和 `endAngle` 来控制图形形状为半圆，并利用 `axisLine.lineStyle.color` 属性定义动态填充效果。 --- #### 半环形进度图的实现方式 对于半环形进度图，可以采用类似的思路，但需进一步自定义样式以突出“环”的特性[^2]： ```javascript const option = { series: [ { name: 'Progress', type: 'pie', clockWise: true, hoverAnimation: false, radius: ['70%', '90%'], center: ['50%', '50%'], itemStyle: { normal: { label: { show: false }, labelLine: { show: false }, borderWidth: 5, borderColor: '#fff' } }, data: [ { value: 70, name: '完成', itemStyle: { color: '#ffde3c' } }, { value: 30, name: '未完成', itemStyle: { color: '#dfe6ec' } } ] } ] }; ``` 上述代码片段展示了如何通过两个数据点分别表示已完成部分与剩余部分的比例关系，从而构建出一个直观的半环形结构。 --- #### 扇形饼状图的设计方案 最后来看一下标准的扇形饼状图设计案例[^3]。它通常用于展示不同类别之间的比例分布情况： ```html <div id="chart" style="width: 100%; height: 300px;"></div> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script> var chartDom = document.getElementById('chart'); var myChart = echarts.init(chartDom); var option = { tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left' }, series: [ { name: 'Access From', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '20', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ { value: 1048, name: 'Search Engine' }, { value: 735, name: 'Direct' }, { value: 580, name: 'Email' }, { value: 484, name: 'Union Ads' }, { value: 300, name: 'Video Ads' } ] } ] }; myChart.setOption(option); </script> ``` 这段脚本创建了一个带有交互提示框 (`tooltip`) 及标签说明功能的标准饼状图布局形式。 --- ### 总结 以上介绍了三种常见的可视化图表类型——半圆进度条、半环形进度图以及扇形饼状图的具体实现细节及其背后逻辑原理。每种类型的图表都具有独特的应用场景价值所在之处。