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( '

' + option.angleAxis.data[weekDay].value + '
' + '

' + '' + params.name + ': ' + params.value ); } else { valuesFormatter.push( '

' + params.seriesName + '

' + '' + params.name + ' : ' + params.value + '
'); } return valuesFormatter; }

Echarts在线免费图表