ggfwjsc/src/view/echarts_education/pie4.vue

145 lines
4.5 KiB
Vue
Raw Normal View History

2024-04-17 13:08:03 +08:00
<template>
2024-04-18 11:52:01 +08:00
<div ref="chart" style="width: 50%;height: 220px;"></div>
2024-04-17 13:08:03 +08:00
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
// 局部引入echarts核心模块
import * as echarts from "echarts";
const chart = ref(); // 创建DOM引用
const datas = {
value: 0.1,
text: "享 受 低 保"
}
let option = {
series: [
// 外圈背景
{
type: "pie",
center: ["40%", "45%"],
radius: ["50%", "82%"],
hoverAnimation: false,
clockWise: false,
itemStyle: {
normal: {
borderWidth: 1,
borderColor: "rgba(193, 229, 255, .1)",
color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
{
offset: 1,
color: "rgba(127, 242, 255, .2)",
},
{
offset: 0,
color: "rgba(109, 195, 255, 0)",
},
]),
},
},
tooltip: {
show: false,
},
label: {
show: false,
},
data: [100],
},
/*内心原型图,展示整体数据概览*/
{
name: 'pie',
type: 'pie',
roundCap: true,
clockWise: true,
startAngle: 180,
labelLine: {
show: false
},
radius: ['50%', '70%'],
hoverAnimation: false,
center: ['40%', '45%'],
data: [
{
value: datas.value,
label: {
normal: {
formatter: '{d}{cell|%}\n{text|' + datas.text + '}',
position: 'center',
show: true,
textStyle: {
fontSize: '24',
fontWeight: 'normal',
color: '#fff',
lineHeight: 30,
rich: {
cell: {
fontSize: '24',
fontWeight: 'normal',
color: '#fff',
},
text: {
fontSize: 16,
fontFamily: 'FZLanTingHeiS-L-GB',
color: '#fff',
}
}
}
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
offset: 0,
color: 'rgba(254, 135, 98, 0.29)'
}, {
offset: 1,
color: 'rgba(254, 135, 98, 1)'
}]),
shadowColor: 'rgba(1,1,1,0.5)',
shadowBlur: 1
}
}
},
{
value: 100 - datas.value,
name: '',
itemStyle: {
normal: {
color: 'rgba(254, 135, 98, 0.1)', // 未完成的圆环的颜色
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
color: 'rgba(254, 135, 98, 0.1)' // 未完成的圆环的颜色
}
}
}]
}
]
};
// 使用生命钩子
onMounted(() => {
// 基于准备好的dom初始化echarts实例
// var myChart = echarts.init(document.getElementById('main'));
// Vue3中 需要引入
var myChart = echarts.init(chart.value);
// init(); // vue3.2没有this
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 单图表响应式: 跟随浏览器大小改变
// window.addEventListener("resize", () => {
// myChart.resize();
// });
});
</script>
<style scoped></style>