极坐标系echarts 柱状配置项内容和展示

      var weekDay = 0;
var data = [{
    name: 'TEST1',
    value: [1, 2, 5, 7, 6, 7, 1, 7, 6, 7, 1]
}, {
    name: 'TEST2',
    value: [3, 4, 5, 8, 2, 9, 10, 8, 2, 9, 10]
}, {
    name: 'TEST3',
    value: [2, 4, 5, 7, 3, 9, 11, 7, 3, 9, 11]
}, {
    name: 'TEST4',
    value: [2, 4, 5, 7, 3, 9, 11, 7, 3, 9, 11]
}, {
    name: 'TEST5',
    value: [2, 4, 5, 7, 3, 9, 11, 7, 3, 9, 11]
}, {
    name: 'TEST6',
    value: [2, 4, 5, 7, 3, 9, 11, 7, 3, 9, 11]
}]


//这玩意有缺陷

option = {
    backgroundColor: '#242424',

    tooltip: {
        trigger: 'item',
        padding: 10,
        backgroundColor: '#222',
        borderColor: '#777',
        borderWidth: 1,
        formatter: tooltipFormatter,

    },
    legend: {
        type: "scroll",
        orient: 'vertical',
        left: '10%',
        align: 'left',
        top: 'middle',
        textStyle: {
            color: '#FFF'
        },
    },

    angleAxis: {
        show: false,
        type: 'category',
        data: [{
            value: '',
            textStyle: {
                fontSize: 25,
            }
        }, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'],
        z: 10
    },
    polar: {
        center: ['50%', '50%'],
        radius: '80%',

    },
    radiusAxis: {
        min: 0,
        // max: 100,
        axisLine: {
            show: false,
            lineStyle: {
                color: "#00c7ff",
                width: 1,
                type: "dashed"
            }
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        },
        splitLine: {
            lineStyle: {
                color: "#eee",
                width: 1,
                type: "dashed",
                opacity: 0.7
            }
        },
        splitArea: {
            show: true,
            areaStyle: {
                color: '#353535',
                opacity: 0.9
            }
        }
    },

    series: [{
            type: 'bar',
            color: '#375498',
            data: [
                data["0"].value["0"],
                data["0"].value["1"],
                data["0"].value["2"],
                data["0"].value["3"],
                data["0"].value["4"],
                data["0"].value["5"],
                data["0"].value["6"],
                data["0"].value["7"],
                data["0"].value["8"],
                data["0"].value["9"],
                data["0"].value["10"],
            ],
            coordinateSystem: 'polar',
            name: data["0"].name,
            stack: 'a',
            itemStyle: {
                normal: {
                    borderWidth: 1,
                    borderColor: '#242424',
                },

            }
        },
        {
            type: 'bar',
            color: '#2e4a7a',
            data: [
                data["1"].value["0"],
                data["1"].value["1"],
                data["1"].value["2"],
                data["1"].value["3"],
                data["1"].value["4"],
                data["1"].value["5"],
                data["1"].value["6"],
                data["1"].value["7"],
                data["1"].value["8"],
                data["1"].value["9"],
                data["1"].value["10"],
            ],
            coordinateSystem: 'polar',
            name: data["1"].name,
            stack: 'a',
            itemStyle: {
                normal: {
                    borderWidth: 2,
                    borderColor: '#242424',
                },
                emphasis: {
                    borderWidth: 0,
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        },
        {
            type: 'bar',
            color: '#637696',
            data: [
                data["2"].value["0"],
                data["2"].value["1"],
                data["2"].value["2"],
                data["2"].value["3"],
                data["2"].value["4"],
                data["2"].value["5"],
                data["2"].value["6"],
                data["2"].value["7"],
                data["2"].value["8"],
                data["2"].value["9"],
                data["2"].value["10"],
            ],
            coordinateSystem: 'polar',
            name: data["2"].name,
            stack: 'a',
            itemStyle: {
                normal: {
                    borderWidth: 1,
                    borderColor: '#242424',
                },
            }
        },
        {
            type: 'bar',
            color: '#7b8bad',
            data: [
                data["3"].value["0"],
                data["3"].value["1"],
                data["3"].value["2"],
                data["3"].value["3"],
                data["3"].value["4"],
                data["3"].value["5"],
                data["3"].value["6"],
                data["3"].value["7"],
                data["3"].value["8"],
                data["3"].value["9"],
                data["3"].value["10"],
            ],
            coordinateSystem: 'polar',
            name: data["2"].name,
            stack: 'a',
            itemStyle: {
                normal: {
                    borderWidth: 1,
                    borderColor: '#242424',
                },
            }
        },
        {
            type: 'bar',
            color: '#b6c7dc',
            data: [
                data["4"].value["0"],
                data["4"].value["1"],
                data["4"].value["2"],
                data["4"].value["3"],
                data["4"].value["4"],
                data["4"].value["5"],
                data["4"].value["6"],
                data["4"].value["7"],
                data["4"].value["8"],
                data["4"].value["9"],
                data["4"].value["10"],
            ],
            coordinateSystem: 'polar',
            name: data["2"].name,
            stack: 'a',
            itemStyle: {
                normal: {
                    borderWidth: 1,
                    borderColor: '#242424',
                },
            }
        },
        {
            type: 'bar',
            color: '#8e9baa',
            data: [
                data["5"].value["0"],
                data["5"].value["1"],
                data["5"].value["2"],
                data["5"].value["3"],
                data["5"].value["4"],
                data["5"].value["5"],
                data["5"].value["6"],
                data["5"].value["7"],
                data["5"].value["8"],
                data["5"].value["9"],
                data["5"].value["10"],
            ],
            coordinateSystem: 'polar',
            name: data["2"].name,
            stack: 'a',
            itemStyle: {
                normal: {
                    borderWidth: 1,
                    borderColor: '#242424',
                },
            }
        },
    ]
}

function tooltipFormatter(params) {
    var valuesFormatter = [];
    if (params.componentSubType == 'pie') {
        valuesFormatter.push(
            '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' +
            option.angleAxis.data[weekDay].value + '<br>' + '</div>' +
            '<span style="color:' + params.color + '">' + params.name + '</span>: ' + params.value
        );
    } else {
        valuesFormatter.push(
            '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' +
            params.seriesName +
            '</div>' +
            '<span style="color:' + params.color + '">' + params.name + '</span> : ' + params.value + '<br>');
    }
    return valuesFormatter;
}