echarts单环饼图

最新推荐文章于 2023-04-05 00:52:19 发布

漂移的电子

最新推荐文章于 2023-04-05 00:52:19 发布

阅读量841

点赞数

分类专栏： echarts 文章标签： echarts 前端

本文链接：https://blog.csdn.net/weixin_40030173/article/details/127907255

版权

echarts 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<template>
    <div class="box">
        <div id="echarts" style="width:600px;height:200px;margin:50px auto;"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    data() {
        return {}
    },
    created() { },
    mounted() {
        this.showEcharts()
    },
    methods: {
        showEcharts() {
            let data1 = {
                text: 200,
                subtext: '设备总数',
                top: "100",
                itemGap: 0,
                legend_data: ["正常", "故障"],
                series_data: [
                    { value: 190, name: '正常' },
                    { value: 10, name: '故障' },

                ]
            };
            this.typeCharts0('echarts', data1)
        },
        typeCharts0(id, summary) {
            let fontColor = '#61646a';
            var chartDom = document.getElementById(id);
            var myChart = echarts.init(chartDom);
            let option = {
                color: ["#009CFF", "#F8276C"],
                title: {
                    text: summary.text,   //标题
                    subtext: summary.subtext,
                    left: "center",
                    top: summary.top,
                    itemGap: summary.itemGap,
                    textBaseline: "middle",
                    textStyle: {
                        color: fontColor,
                        fontFamily: "微软雅黑",
                        fontSize: 24,
                        fontWeight: "normal",
                        lineHeight: 26,
                    },
                },
                tooltip: {  //浮框 （显示数值）
                    trigger: "item",
                    formatter: "{a} <br/>{b}: {c} ({d}%)",
                },
                legend: {
                    orient: 'horizontal',
                    x: 'center',
                    y: 'top',
                    itemGap: 5,
                    itemWidth: 18,
                    itemHeight: 12,
                    textStyle: {
                        color: fontColor,
                        fontSize: 10,
                    },
                    data: summary.legend_data,
                },
                series: [
                    {
                        name: "",
                        type: "pie",
                        radius: ["50%", "70%"],
                        center: ["50%", "60%"],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: "center",
                            },
                            emphasis: {
                                show: false,
                                textStyle: {
                                    fontSize: "20",
                                    fontWeight: "bold",
                                },
                            },
                        },
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false,
                                },
                                labelLine: {
                                    show: false,
                                },
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    position: "center",
                                    textStyle: {
                                        fontSize: "20",
                                        fontWeight: "bold",
                                    },
                                },
                            },
                        },
                        labelLine: {
                            normal: {
                                show: false,
                            },
                        },
                        data: summary.series_data,
                    },
                ],
            };
            if (summary.font_size) {
                option.title.textStyle.fontSize = summary.font_size;
            }
            option && myChart.setOption(option);
        }
    }
}
</script>