多县市区指标仪表盘legend选择查看ECharts Gallery

20:11:45图表已生成
代码
   option = {
    animation: true,
    animationThreshold: 2000,
    animationDuration: 1000,
    animationEasing: "cubicOut",
    animationDelay: 0,
    animationDurationUpdate: 300,
    animationEasingUpdate: "cubicOut",
    animationDelayUpdate: 0,
    color: [
        "#c23531",
        "#2f4554",
        "#61a0a8",
        "#d48265",
        "#749f83",
        "#ca8622",
        "#bda29a",
        "#6e7074",
        "#546570",
        "#c4ccd3",
        "#f05b72",
        "#ef5b9c",
        "#f47920",
        "#905a3d",
        "#fab27b",
        "#2a5caa",
        "#444693",
        "#726930",
        "#b2d235",
        "#6d8346",
        "#ac6767",
        "#1d953f",
        "#6950a1",
        "#918597"
    ],
    series: [{
            type: "gauge",
            title: {
                show: true,
                position: "top",
                color: "green",
                margin: 8,
                fontSize: 12
            },
            detail: {
                show: true,
                position: "top",
                color: "white",
                margin: 8,
                fontSize: 12,
                formatter: "{value}%",
                backgroundColor: "green"
            },
            name: "\u5fb7\u57ce\u533a",
            min: 0,
            max: 1.5,
            splitNumber: 5,
            radius: "85%",
            startAngle: 225,
            endAngle: -45,
            data: [{
                name: "\u5fb7\u57ce\u533a",
                value: 0.75
            }],
            axisLine: {
                show: true,
                onZero: true,
                onZeroAxisIndex: 0
            },
            itemStyle: {
                color: "red",
                opacity: 1
            }
        },
        {
            type: "gauge",
            title: {
                show: true,
                position: "top",
                color: "green",
                margin: 8,
                fontSize: 12
            },
            detail: {
                show: true,
                position: "top",
                color: "white",
                margin: 8,
                fontSize: 12,
                formatter: "{value}%",
                backgroundColor: "green"
            },
            name: "\u5e86\u4e91\u53bf",
            min: 0,
            max: 1.5,
            splitNumber: 5,
            radius: "85%",
            startAngle: 225,
            endAngle: -45,
            data: [{
                name: "\u5e86\u4e91\u53bf",
                value: 0.78
            }],
            axisLine: {
                show: true,
                onZero: true,
                onZeroAxisIndex: 0
            },
            itemStyle: {
                color: "red",
                opacity: 1
            }
        },
        {
            type: "gauge",
            title: {
                show: true,
                position: "top",
                color: "green",
                margin: 8,
                fontSize: 12
            },
            detail: {
                show: true,
                position: "top",
                color: "white",
                margin: 8,
                fontSize: 12,
                formatter: "{value}%",
                backgroundColor: "green"
            },
            name: "\u4e34\u9091\u53bf",
            min: 0,
            max: 1.5,
            splitNumber: 5,
            radius: "85%",
            startAngle: 225,
            endAngle: -45,
            data: [{
                name: "\u4e34\u9091\u53bf",
                value: 0.33
            }],
            axisLine: {
                show: true,
                onZero: true,
                onZeroAxisIndex: 0
            },
            itemStyle: {
                color: "red",
                opacity: 1
            }
        },
        {
            type: "gauge",
            title: {
                show: true,
                position: "top",
                color: "green",
                margin: 8,
                fontSize: 12
            },
            detail: {
                show: true,
                position: "top",
                color: "white",
                margin: 8,
                fontSize: 12,
                formatter: "{value}%",
                backgroundColor: "green"
            },
            name: "\u5b81\u6d25\u53bf",
            min: 0,
            max: 1.5,
            splitNumber: 5,
            radius: "85%",
            startAngle: 225,
            endAngle: -45,
            data: [{
                name: "\u5b81\u6d25\u53bf",
                value: 1.48
            }],
            axisLine: {
                show: true,
                onZero: true,
                onZeroAxisIndex: 0
            },
            itemStyle: {
                color: "red",
                opacity: 1
            }
        },
        {
            type: "gauge",
            title: {
                show: true,
                position: "top",
                color: "green",
                margin: 8,
                fontSize: 12
            },
            detail: {
                show: true,
                position: "top",
                color: "white",
                margin: 8,
                fontSize: 12,
                formatter: "{value}%",
                backgroundColor: "green"
            },
            name: "\u4e50\u9675\u5e02",
            min: 0,
            max: 1.5,
            splitNumber: 5,
            radius: "85%",
            startAngle: 225,
            endAngle: -45,
            data: [{
                name: "\u4e50\u9675\u5e02",
                value: 0.53
            }],
            axisLine: {
                show: true,
                onZero: true,
                onZeroAxisIndex: 0
            },
            itemStyle: {
                color: "red",
                opacity: 1
            }
        },
        {
            type: "gauge",
            title: {
                show: true,
                position: "top",
                color: "green",
                margin: 8,
                fontSize: 12
            },
            detail: {
                show: true,
                position: "top",
                color: "white",
                margin: 8,
                fontSize: 12,
                formatter: "{value}%",
                backgroundColor: "green"
            },
            name: "\u9675\u53bf",
            min: 0,
            max: 1.5,
            splitNumber: 5,
            radius: "85%",
            startAngle: 225,
            endAngle: -45,
            data: [{
                name: "\u9675\u53bf",
                value: 1.25
            }],
            axisLine: {
                show: true,
                onZero: true,
                onZeroAxisIndex: 0
            },
            itemStyle: {
                color: "red",
                opacity: 1
            }
        },
        {
            type: "gauge",
            title: {
                show: true,
                position: "top",
                color: "green",
                margin: 8,
                fontSize: 12
            },
            detail: {
                show: true,
                position: "top",
                color: "white",
                margin: 8,
                fontSize: 12,
                formatter: "{value}%",
                backgroundColor: "green"
            },
            name: "\u5e73\u539f\u53bf",
            min: 0,
            max: 1.5,
            splitNumber: 5,
            radius: "85%",
            startAngle: 225,
            endAngle: -45,
            data: [{
                name: "\u5e73\u539f\u53bf",
                value: 0.39
            }],
            axisLine: {
                show: true,
                onZero: true,
                onZeroAxisIndex: 0
            },
            itemStyle: {
                color: "red",
                opacity: 1
            }
        },
        {
            type: "gauge",
            title: {
                show: true,
                position: "top",
                color: "green",
                margin: 8,
                fontSize: 12
            },
            detail: {
                show: true,
                position: "top",
                color: "white",
                margin: 8,
                fontSize: 12,
                formatter: "{value}%",
                backgroundColor: "green"
            },
            name: "\u6b66\u57ce\u53bf",
            min: 0,
            max: 1.5,
            splitNumber: 5,
            radius: "85%",
            startAngle: 225,
            endAngle: -45,
            data: [{
                name: "\u6b66\u57ce\u53bf",
                value: 0.29
            }],
            axisLine: {
                show: true,
                onZero: true,
                onZeroAxisIndex: 0
            },
            itemStyle: {
                color: "red",
                opacity: 1
            }
        },
        {
            type: "gauge",
            title: {
                show: true,
                position: "top",
                color: "green",
                margin: 8,
                fontSize: 12
            },
            detail: {
                show: true,
                position: "top",
                color: "white",
                margin: 8,
                fontSize: 12,
                formatter: "{value}%",
                backgroundColor: "green"
            },
            name: "\u590f\u6d25\u53bf",
            min: 0,
            max: 1.5,
            splitNumber: 5,
            radius: "85%",
            startAngle: 225,
            endAngle: -45,
            data: [{
                name: "\u590f\u6d25\u53bf",
                value: 1.27
            }],
            axisLine: {
                show: true,
                onZero: true,
                onZeroAxisIndex: 0
            },
            itemStyle: {
                color: "red",
                opacity: 1
            }
        },
        {
            type: "gauge",
            title: {
                show: true,
                position: "top",
                color: "green",
                margin: 8,
                fontSize: 12
            },
            detail: {
                show: true,
                position: "top",
                color: "white",
                margin: 8,
                fontSize: 12,
                formatter: "{value}%",
                backgroundColor: "green"
            },
            name: "\u9f50\u6cb3\u53bf",
            min: 0,
            max: 1.5,
            splitNumber: 5,
            radius: "85%",
            startAngle: 225,
            endAngle: -45,
            data: [{
                name: "\u9f50\u6cb3\u53bf",
                value: 0.94
            }],
            axisLine: {
                show: true,
                onZero: true,
                onZeroAxisIndex: 0
            },
            itemStyle: {
                color: "red",
                opacity: 1
            }
        },
        {
            type: "gauge",
            title: {
                show: true,
                position: "top",
                color: "green",
                margin: 8,
                fontSize: 12
            },
            detail: {
                show: true,
                position: "top",
                color: "white",
                margin: 8,
                fontSize: 12,
                formatter: "{value}%",
                backgroundColor: "green"
            },
            name: "\u79b9\u57ce\u5e02",
            min: 0,
            max: 1.5,
            splitNumber: 5,
            radius: "85%",
            startAngle: 225,
            endAngle: -45,
            data: [{
                name: "\u79b9\u57ce\u5e02",
                value: 0.31
            }],
            axisLine: {
                show: true,
                onZero: true,
                onZeroAxisIndex: 0
            },
            itemStyle: {
                color: "red",
                opacity: 1
            }
        }
    ],
    legend: [{
        data: [
            "\u5fb7\u57ce\u533a",
            "\u5e86\u4e91\u53bf",
            "\u4e34\u9091\u53bf",
            "\u5b81\u6d25\u53bf",
            "\u4e50\u9675\u5e02",
            "\u9675\u53bf",
            "\u5e73\u539f\u53bf",
            "\u6b66\u57ce\u53bf",
            "\u590f\u6d25\u53bf",
            "\u9f50\u6cb3\u53bf",
            "\u79b9\u57ce\u5e02"
        ],
        selected: {
            "\u5fb7\u57ce\u533a": false,
            "\u5e86\u4e91\u53bf": false,
            "\u4e34\u9091\u53bf": false,
            "\u5b81\u6d25\u53bf": false,
            "\u4e50\u9675\u5e02": false,
            "\u9675\u53bf": false,
            "\u5e73\u539f\u53bf": true,
            "\u6b66\u57ce\u53bf": false,
            "\u590f\u6d25\u53bf": false,
            "\u9f50\u6cb3\u53bf": false,
            "\u79b9\u57ce\u5e02": false
        },
        type: "scroll",
        selectedMode: "single",
        show: true,
        left: "left",
        top: "top",
        padding: 0,
        itemGap: 2,
        itemWidth: 5,
        itemHeight: 7,
        inactiveColor:'grey',
        textStyle: {color:'red'}
    }],
    tooltip: {
        show: true,
        trigger: "item",
        triggerOn: "mousemove|click",
        axisPointer: {
            type: "line"
        },
        formatter: "{a} <br/>{b} : {c}%",
        textStyle: {
            fontSize: 14
        },
        borderWidth: 0
    },
    title: [{
        padding: 5,
        itemGap: 10
    }]
};

setInterval(function () {
  var i = 0;
    var name = option.legend[0].data[i];
    console.log(i, name, option.legend[0].selected[name]);

    while (i < 10) {
        //option.legend[0].selected[name]='false'     ;
        if (option.legend[0].selected[name] == true) 
            { break;}
        else {
            i++;
            name = option.legend[0].data[i];
        }

        console.log(i, name, option.legend[0].selected[name]);

    }

    //option.legend[0].selected[name]='true'     ;        
    option.series[i].axisLine.show=true;
    option.series[i].splitLine = {
        //show:'true'     
        distance: -30,
        length: 30,
        lineStyle: {
            color: 'white',
            width: 4
        }
    };
    //console.log("end1====",i,name,option.legend[0].selected[name])    
    option.series[i].data[0].value = (Math.random() * 1.5).toFixed(2) - 0;
    //option.series[6].data[0].value = (Math.random() * 1.5).toFixed(2) - 0;
  
    myChart.setOption(option, true);
}, 2000);

myChart.on('legendselectchanged', function(param) {
    var selectedName = param.name;
    console.log(selectedName, "selectedName", param);
    option.legend[0].selected = param.selected;
    console.log(selectedName, "option.legend[0].selectede", option.legend[0].selected);
});
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
