fd_dwgz_zhyw_nx/src/components/chart/pie/radar-pie-chart.vue

<template>
    <div class="chart" :id="id"></div>
</template>

<script>
    import util from "@/helper/util.js";
    import partten from "@/helper/partten.js";
    import * as echarts from "echarts";

    export default {
        name: "radar-pie",
        componentName: "radar-pie",
        props: {
            width: {
                type: String,
                default: "100%",
            },
            height: {
                type: String,
                default: "18.519vh",
            },
            // 百分比值
            // 外部饼图数据
            list: {
                type: Array,
                default: () => [{
                        value: 310,
                        name: "邮件营销",
                    },
                    {
                        value: 234,
                        name: "联盟广告",
                    },
                    {
                        value: 335,
                        name: "视频广告",
                    },
                    {
                        value: 548,
                        name: "百度",
                    },
                    {
                        value: 351,
                        name: "谷歌",
                    },
                ],
            },
            title: {
                type: String,
                default: "title",
            },
            unit: {
                type: String,
                default: "",
            },
        },
        data() {
            return {
                id: "",
                chart: null,
            };
        },
        computed: {},
        methods: {
            initChart() {
                let that = this
                let option = {
                    color: [
                        "#3e73e9",
                        "#4fa6e8",
                        "#70d0f4",
                        "#ffc149",
                        "#ff7a87",
                        "#70d0f4",
                        "#cff4d8",
                    ],
                    tooltip: {
                        trigger: "item",
                        backgroundColor: this.$store.state.themeName === "dark" ?
                            "rgba(0,0,0,0.4)" :
                            "rgba(255,255,255,0.4)",
                        borderColor: this.$store.state.themeName === "dark" ?
                            partten.getColor("gray") :
                            "#000",
                        textStyle: {
                            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
                            fontSize: util.vh(16),
                        },
                        formatter: function(param) {
                            let marker = '<span style="display:inline-block;margin-right:0.370vh;border-radius:0.926vh;width:0.926vh;height:0.926vh;background-color:' + partten.getColor("green") + ';"></span>';
                            return param.seriesName + "<br >" + marker + param.name + "：" + param.value + that.unit;
                        },
                    },
                    grid: {
                        top: 8,
                        left: 8,
                        right: 8,
                        bottom: 8,
                        containLabel: true,
                    },
                    legend: {
                        icon: "circle",
                        orient: "vertical",
                        top: "center",
                        right: "0",
                        align: "left",
                        textStyle: {
                            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
                        },
                        itemGap: 8,
                    },
                    // radar: {
                    //     center: ["25%", "50%"],
                    //     radius: "80%",
                    //     startAngle: 90,
                    //     splitNumber: 8,
                    //     shape: "circle",
                    //     splitArea: {
                    //         areaStyle: {
                    //             color: ["transparent"],
                    //         },
                    //     },
                    //     axisLabel: {
                    //         show: false,
                    //         fontSize: 18,
                    //         color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
                    //         fontStyle: "normal",
                    //         fontWeight: "normal",
                    //     },
                    //     axisLine: {
                    //         show: true,
                    //         lineStyle: {
                    //             color: "#606769", //
                    //         },
                    //     },
                    //     splitLine: {
                    //         show: true,
                    //         lineStyle: {
                    //             color: "#606769", //
                    //         },
                    //     },
                    //     indicator: [{
                    //             name: "",
                    //             max: 100,
                    //         },
                    //         {
                    //             name: "",
                    //             max: 100,
                    //         },
                    //         {
                    //             name: "",
                    //             max: 100,
                    //         },
                    //         {
                    //             name: "",
                    //             max: 100,
                    //         },
                    //         {
                    //             name: "",
                    //             max: 100,
                    //         },
                    //         {
                    //             name: "",
                    //             max: 100,
                    //         },
                    //         {
                    //             name: "",
                    //             max: 100,
                    //         },
                    //         {
                    //             name: "",
                    //             max: 100,
                    //         },
                    //         {
                    //             name: "",
                    //             max: 100,
                    //         },
                    //         {
                    //             name: "",
                    //             max: 100,
                    //         },
                    //         {
                    //             name: "",
                    //             max: 100,
                    //         },
                    //         {
                    //             name: "",
                    //             max: 100,
                    //         },
                    //         {
                    //             name: "",
                    //             max: 100,
                    //         },
                    //         {
                    //             name: "",
                    //             max: 100,
                    //         },
                    //         {
                    //             name: "",
                    //             max: 100,
                    //         },
                    //         {
                    //             name: "",
                    //             max: 100,
                    //         },
                    //         {
                    //             name: "",
                    //             max: 100,
                    //         },
                    //         {
                    //             name: "",
                    //             max: 100,
                    //         },
                    //         {
                    //             name: "",
                    //             max: 100,
                    //         },
                    //         {
                    //             name: "",
                    //             max: 100,
                    //         },
                    //         {
                    //             name: "",
                    //             max: 100,
                    //         },
                    //         {
                    //             name: "",
                    //             max: 100,
                    //         },
                    //         {
                    //             name: "",
                    //             max: 100,
                    //         },
                    //         {
                    //             name: "",
                    //             max: 100,
                    //         },
                    //     ],
                    // },
                    series: [{
                        name: this.title,
                        type: "pie",
                        clockwise: false,
                        startAngle: 90,
                        radius: "70%",
                        center: ["25%", "50%"],
                        hoverAnimation: false,
                        // roseType: "radius", //area
                        data: this.list,
                        label: {
                            show: false,
                        },
                        labelLine: {
                            normal: {
                                length: 20,
                                length2: 30,
                                lineStyle: {
                                    width: 1,
                                },
                            },
                        },
                    }, ],
                };

                this.chart.setOption(option);
            },
        },
        created() {
            this.id = "pie-chart-" + util.newGUID();
        },
        mounted() {
            this.$el.style.width = this.width;
            this.$el.style.height = this.height;
            this.chart = echarts.init(this.$el);
            this.initChart();
        },
        updated() {
            this.initChart();
        },
        watch: {
            list() {
                this.initChart();
            },
        },
    };
</script>

<style lang="less">
    .chart {
        width: 100%;
        height: 100%;
        display: inline-block;
    }
</style>