2022.12.07今天我学习了如何简单通过echarts做一个pie饼图。
<template>
<div ref="Pie" style="width:100%;height: 100%;position: absolute;z-index: 999;"></div>
</template>
<script>
import echartMixins from "@/utils/resizeMixins";
export default {
data() {
return {}
},
mounted() {
this.pieEcharts()
},
methods: {
pieEcharts() {
this.chart = this.$echarts.init(this.$refs.Pie);
this.chart.setOption({
tooltip: {
show: true
},
// 设置字体的样式
textStyle: {
fontSize: 15,
fontWeight: "bolder",
},
legend: {
data: ['糖尿病', '甲状腺', '肥胖症', '骨质疏松症'],
// 设置item按钮的整体宽度大小
width: "100%",
top:'80px',
// 设置item按钮的水平和重置安放位置
// x:'left',
// y:'center',
// 设置Item按钮的宽
// itemHeight设置高
itemWidth:20,
textStyle: {
color: 'white'
},
// 设置item按钮的间隔
itemGap:30,
// 设置item按钮的背景颜色
// backgroundColor:"#00e",
// 按钮样式为圆形
icon: "circle",
},
// 可视化的工具箱
toolbox: {
show: true,
},
series: [{
name: '疾病',
top:'70px',
// 内圆和外园的比例
radius: ["0", "260"],
itemStyle: {
// emphasis:设置鼠标放到哪一块扇形上面的时候,扇形样式、阴影
emphasis: {
shadowBlur: 100,
shadowOffsetX: 20,
shadowColor: "black"
},
},
// 设置value比例
type: 'pie',
data: [
{
name: '甲状腺',
value: 5000,
label: {
normal: {
show: true,
// position:'inner'在图表内部显示
position:'inner',
formatter: ' b:{d}%' //自定义显示格式(b:name, c:value, d:百分比)
}
}
},
{
name: '肥胖症',
value: 6600,
label: {
normal: {
show: true,
// position:'inner'在图表内部显示
position:'inner',
formatter: 'b: {d}%' //自定义显示格式(b:name, c:value, d:百分比)
}
}
},
{
name: '骨质疏松症',
value: 3000,
label: {
normal: {
show: true,
// position:'inner'在图表内部显示
position:'inner',
formatter: 'b: {d}%' //自定义显示格式(b:name, c:value, d:百分比)
}
}
},
{
name: '糖尿病',
value: 7800,
label: {
normal: {
show: true,
// position:'inner'在图表内部显示
position:'inner',
formatter: 'b: {d}%' //自定义显示格式(b:name, c:value, d:百分比)
}
}
}
]
}]
})
}
},
mixins: [echartMixins]
}
</script>
<style>
</style>