145 lines
4.5 KiB
Vue
145 lines
4.5 KiB
Vue
<template>
|
||
<div ref="chart" style="width: 50%;height: 220px;"></div>
|
||
</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> |