ggfwjsc/src/view/echarts_education/pie4.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>