vue使用环图 百分比显示 导出
时间: 2024-10-13 11:09:31 浏览: 10
Vue.js可以结合图表库如ECharts、AntV等来创建环形图,并实现百分比显示。例如,使用ECharts构建环状图的一般步骤如下:
1. 首先,在项目中安装ECharts依赖:
```bash
npm install echarts --save
```
2. 在HTML中引入ECharts库和相关的样式:
```html
<script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>
<div id="chart" style="width: 600px;height:400px;"></div>
```
3. 在Vue组件中,数据驱动图表:
```js
import ECharts from 'echarts';
export default {
data() {
return {
chartData: { // 这里存放环形图的数据,比如百分比数组
labels: ['A', 'B', 'C', 'D'],
values: [30, 45, 20, 5],
},
};
},
mounted() {
this.renderChart();
},
methods: {
renderChart() {
const myChart = ECharts.init(document.getElementById('chart'));
const option = {
series: [
{
type: 'pie',
radius: '55%', // 设置饼图半径占容器的比例
center: ['50%', '60%'], // 中心位置
data: this.chartData.values,
name: this.chartData.labels, // 每个扇区标签
label: {
normal: {
show: true,
position: 'center',
}
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
}
}
}
```
4. 如果需要导出图表,可以使用ECharts提供的`export`功能,例如:
```js
export function downloadImage(chartInstance) {
const html = `
<img src="${chartInstance.getDom().toDataURL()}">
`;
const link = document.createElement('a');
link.href = html;
link.download = 'chart.png';
link.click();
}
```
然后可以在适当的地方触发下载。
阅读全文