1、安装 ECharts 首先,你需要在项目中安装 ECharts。你可以通过在终端中运行以下命令来安装 ECharts
npm install echarts --save
2、创建一个 ECharts 实例 在 Vue 组件中,你可以通过引入 ECharts 库,然后在组件中使用 echarts.init()
方法来创建一个 ECharts 实例。这个实例将被用来配置和渲染图表。
import echarts from 'echarts'
export default {
data() {
return {
chart: null,
chartData: {
// 这里是你要绘制的饼图数据
}
}
},
mounted() {
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart)
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption())
},
methods: {
getOption() {
return {
// 这里是你的 ECharts 配置项
}
}
}
}
3、配置 ECharts 在 getOption
方法中,你可以为饼图配置 ECharts 配置项。例如,你可以设置饼图的颜色、大小、数据等。
methods: {
getOption() {
return {
title: {
text: '饼图标题',
subtext: '饼图副标题',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
data: ['数据1', '数据2', '数据3', '数据4', '数据5']
},
series: [
{
name: '饼图名称',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 335, name: '数据1'},
{value: 310, name: '数据2'},
{value: 234, name: '数据3'},
{value: 135, name: '数据4'},
{value: 1548, name: '数据5'}
]
}
]
}
}
}
4. 在模板中绘制饼图 最后,在 Vue 组件的模板中,你需要添加一个用来呈现饼图的 div 元素,并通过 ref 属性引用它。然后,你可以在模板中使用这个 ref 来调用 ECharts 实例。
<template>
<div ref="chart" style="width: 100%; height: 400px;"></div>
</template>
5、写法有很多种,附上我的写法
<template>
<div>
<div class="content-inner chart-style" ref="chart"></div>
</div>
</template>
<script>
import echarts from "echarts";
export default {
name: "echartsTool",
props: {
charData: {
type: Object
},
charTitle: {
type: String
}
},
data() {
return {
chart: null,
pieData: []
};
},
watch: {
charData: {
handler() {
this.renderChart();
},
deep: true
}
},
mounted() {
// 在组件mounted时绑定resize事件,当窗口大小发生变化时自动调整图表大小
window.addEventListener("resize", this.handleResize);
// 创建Echarts实例并绘制饼状图
this.creatCharts();
},
beforeDestroy() {
// 在组件销毁前解绑resize事件
window.removeEventListener("resize", this.handleResize);
},
methods: {
async creatCharts() {
this.renderChart();
},
// 处理resize事件,调整图表大小
handleResize() {
if (this.chart) {
// 调用Echarts实例的resize方法,重新绘制图表
this.chart.resize();
}
},
renderChart() {
const chart = echarts.init(this.$refs.chart);
let option;
if (this.charData.length > 0) {
option = {
title: {
text: this.charTitle,
textStyle: {
fontWeight: "normal",
fontSize: 16
},
left: "center"
},
color: ["#6395F9", "#62DAAB", "#657798", "#F6C022", "#E96C5B", "#74CBED", "#9968BD", "#FF9D4E", "#299998"],
tooltip: {
trigger: "item",
formatter: "{b}:{d}%"
},
series: [
{
type: "pie",
radius: ["60%", "90%"],
top: 6,
bottom: 25,
left: "center",
textStyle: {
color: "#999",
fontSize: "12px"
},
itemWidth: 6,
itemHeight: 6,
label: {
show: true,
formatter: "{b}: {d}%"
},
data: this.charData
}
]
};
} else {
option = {
title: {
text: this.charTitle,
textStyle: {
fontWeight: "normal",
fontSize: 16
},
left: "center"
},
tooltip: {
trigger: "none"
},
color: ["#d3d3d3"],
series: [
{
type: "pie",
radius: ["60%", "90%"],
left: "center",
label: {
show: true,
formatter: "{b}"
},
data: [{ value: 1, name: "暂无数据" }]
}
]
};
}
chart.setOption(option);
this.chart = chart;
}
}
};
</script>
大致效果
如果需要饼图自适应浏览器缩放比例的话,可以参考我的这篇文章 https://blog.csdn.net/qijing19991210/article/details/129379925