【echarts 饼图默认放大某块扇形+随机颜色】

常安cc

已于 2023-11-08 13:57:34 修改

阅读量1.3k

点赞数 1

文章标签： echarts javascript 前端

于 2023-04-21 17:25:27 首次发布

本文链接：https://blog.csdn.net/m0_55546349/article/details/130293526

版权

echarts 饼图默认放大某块扇形+随机颜色

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>销售统计</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> 
    <style>
        .title {
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            line-height: 40px;
            color: #333333;
            opacity: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    </style>
</head>

<body>


    <div class="layui-row layui-col-space15" style="height: 100%;box-sizing: border-box;">
        <div class="layui-col-md12" style="height: 100%;box-sizing: border-box;">
            <div class="layui-card" style="height: 100%;box-sizing: border-box;">
                <div class="layui-card-body" style="height: 100%;box-sizing: border-box;">
                    <div class="title">
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <span style="margin-right: 12px;">总销售额统计</span>
                            <span style="font-size: 12px;font-weight: 400;">最近更新于:2023-12-12 12:12</span>

                        </div>
                        <div id="daterange"
                            style="width: 260px;height: 40px;font-weight: 400;display: flex;align-items: center;justify-content: space-between;">
                            <select id="select_type" name="select_type"
                                style="height: 30px;width: 60px;border-color: #e6e6e6;color: #666;">

                                <option value="0">按年</option>
                                <option value="1" selected>按月</option>
                            </select>
                            <div class="layui-input-inline rangeTime">
                                <input type="text" id="rangeTime_year" name="rangeTime_year" autocomplete="off"
                                    class="layui-input" placeholder="选择时间，区间查找" style="display: none;height: 30px;">
                                <input type="text" id="rangeTime_month" name="rangeTime_month" autocomplete="off"
                                    class="layui-input" placeholder="选择时间，区间查找" style="height: 30px;">
                            </div>
                        </div>


                    </div>
                    <div id="echarts1" style="width: 95%;height: calc(100% - 54px);position: absolute;"></div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/html" id="xuhao">
    {{d.LAY_TABLE_INDEX+1}}
</script> 
    <script src="./echarts/echarts.min.js"></script> 
    <script>  
        var data = [
            { value: 1048, name: '0002集团智能化管理有限公司' },
            { value: 735, name: '公司735' },
            { value: 580, name: '客户580' },
            { value: 484, name: '公司484' },
            { value: 6, name: '客户6' },
            { value: 300, name: '客户300' },
            { value: 35, name: '客户35' },
            { value: 543, name: '客户543' },
            { value: 5, name: '客户5' },
            { value: 2, name: '客户2' },
            { value: 534, name: '客户534' },
            { value: 4, name: '客户4' },
            { value: 53, name: '客户53' },
            { value: 3, name: '客户3' },
        ];
        var color = [];
        var sum = 0;//总数
        for (var i = 0; i < data.length; i++) {
            color.push(handleColors());
            sum += data[i].value;
            // console.log(color);
        }
        // 随机生成颜色
        function handleColors() {
            let color = ''
            let r = Math.floor(Math.random() * 256)
            let g = Math.floor(Math.random() * 256)
            let b = Math.floor(Math.random() * 256)
            color = `rgb(${r},${g},${b})`
            return color// 所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
        };
        var myChart1 = echarts.init(document.getElementById("echarts1"));
        var option1 = { 
            color: color,

            tooltip: {
                trigger: 'item',
                backgroundColor: 'rgba(50,50,50,0.6)', // 提示框浮层的背景颜色
                borderColor: 'rgba(50,50,50,0.01)', // 提示框浮层的背景颜色
                formatter: function (params) {
                    // console.log(params);
                    var ss = (((params.value / sum) * 100).toFixed(2));
                    // console.log(ss);
                    var res = `<div style="color:#fff"><p> <span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` + params.name + ':  ' + ss + '%</p></div>'
                    return res;
                }
            },
            graphic: [{
                type: "text",
                left: "center",
                top: "45%",
                style: {
                    text: toThousand(sum) + '万元',
                    textAlign: "center",
                    fill: "#333",
                    fontSize: 28,
                    fontWeight: 700
                }
            }, {
                type: "text",
                left: "center",
                top: "52%",
                style: {
                    text: '销售订单总额',
                    textAlign: "center",
                    fill: "#333",
                    fontSize: 26,
                    fontWeight: 400
                }
            },],
            series: [
                {
                    // name: 'Access From',
                    type: 'pie',
                    radius: ['55%', '80%'],
                    data: data,
                    emphasis: {
                        scale: true,//是否开启高亮后扇区的放大效果。
                        scaleSize: 35,//高亮后扇区的放大尺寸，在开启 emphasis.scale 后有效。
                        // itemStyle: {
                        //     shadowBlur: 10,
                        //     shadowOffsetX: 0,
                        //     shadowColor: 'rgba(0, 0, 0, 0.5)'
                        // }
                    },
                    labelLine: {
                        length: 30,//视觉引导线第一段的长度。
                        length2: 60,//视觉引导项第二段的长度。
                        // smooth: 0.3,//是否平滑视觉引导线，默认不平滑，可以设置成 true 平滑显示，也可以设置为 0 到 1 的值，表示平滑程度。
                    },
                }
            ]
        };
        myChart1.setOption(option1);

        // 默认放大某块扇区
        myChart1.dispatchAction({
            type: 'highlight',
            name: '客户300',//可以通过name指定，或者数据项的 index

            // // 用 index 或 id 或 name 来指定系列。 
            // // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
            // dataIndex?: number | number[],
            // // 可选，数据项名称，在有 dataIndex 的时候忽略
            // name?: string | string[],
        });
    </script>

</body>

</html>