Highcharts 3D饼图（2）自定义颜色以及仿echarts饼图颜色标注

自定义颜色

效果

官网： https://www.highcharts.com.cn/demo/highcharts#3d.
找到官方文档的通用配置 :如下图

colors: [
                   '#714fe3',
                   '#6497f4',
                   '#5f75e5',
                   '#67acfe',
                   '#5f75e5',
                   '#7ca2ff',
                   '#4bcdec',
                   '#6648ff',
                   '#5f75e5',
                   '#5a9be7'
               ],

仿echarts饼图颜色标注

效果：

vue遍历数据加上自定义的颜色以及名称
毕竟三目运算的方式就只可以给两个元素添加自定义颜色

html:

	    <div class="mainBox">
            <div
                class="courier-box"
                v-for="(item, index) in home_list"
                :key="index"
            >
                <div class="img-box">
                    <div class="same-three" :class="color[index]"></div>
                    <div class="courier">{{ item.Title }}</div>
                </div>
            </div>
        </div>

js

 data() {
        return {
            home_list: [
                {
                    Title: "中通快递",
                },
                {
                    Title: "韵达快递",
                },
                {
                    Title: "邮政包裹",
                },
                {
                    Title: "圆通快递",
                },
                {
                    Title: "京东快递",
                },
                {
                    Title: "申通快递",
                },
                {
                    Title: "德邦物流",
                },
                {
                    Title: "天天快递",
                },
                {
                    Title: "顺丰快递",
                },
                {
                    Title: "其他",
                },
            ],
            color: [
                "color1",
                "color2",
                "color3",
                "color4",
                "color5",
                "color6",
                "color7",
                "color8",
                "color9",
                "color10",
            ],
         }

css

.mainBox {
        display: block;
        margin: 9px 10px;
        width: 97%;
        .courier-box {
            .img-box {
                float: left;
                padding: 5px 9px;
            }
        }
        .same-three {
            float: left;
            display: block;
            height: 9px;
            width: 12px;
            border-radius: 1px;
        }
        .courier {
            line-height: 9px;
            float: right;
            color: rgba(250, 250, 250, 0.54);
            font-size: 8px;
            margin: 0 3px;
        }
        .color1 {
            background: #5f75e5;
        }
        .color2 {
            background: #5a9be7;
        }
        .color3 {
            background: #714fe3;
        }
        .color4 {
            background: #6497f4;
        }
        .color5 {
            background: #5f75e5;
        }
        .color6 {
            background: #67acfe;
        }
        .color7 {
            background: #5f75e5;
        }
        .color8 {
            background: #7ca2ff;
        }
        .color9 {
            background: #4bcdec;
        }
        .color10 {
            background: #6648ff;
        }
    }