Echarts在线免费图表

 
            function contains(arr, val) {
    var i = arr.length;
    while (i--) {
        if (arr[i].name === val) {
            return i;
        }
    }
    return false;
}
let list = [
    {
        name: '道路结冰',
        max: 88,
    },
    {
        name: '暴雪',
        max: 88,
    },
    {
        name: '暴雨',
        max: 88,
    },
    {
        name: '冰雹',
        max: 88,
    }
];
let data1 = [[80, 50, 55, 80]];
let data2 = [[60, 40, 50, 60]];
option = {
    backgroundColor: 'grey',
    tooltip: {
        show: true,
        trigger: 'item',
        formatter: (data) => {
            // console.log(data.seriesIndex);
            var tip = '<h5 class="echarts-tip-h5">' + data.seriesName + '</h5>';
            let tmpData = [];
            if (data.seriesIndex === 0) {
                tmpData = data1;
            } else if (data.seriesIndex === 1) {
                tmpData = data2;
            }
            console.log(tmpData)
            data.value.forEach((item, index) => {
                // console.log(list[index].name)
                tip += '<div>';
                tip += '<div>' + list[index].name + ': '+ tmpData[0][index] + '万</div>'
                tip += '</div>';
            });
            return tip;
        },
    },
    radar: {
        name: {
            textStyle: {
                color: '#fff',
                fontSize: 16,
            },
            rich: {
                a: {
                    fontSize: 16,
                    color: 'yellow',
                    padding: [0, 0, 8, 0],
                },
                b: {
                    fontSize: 18,
                    color: '#ACD3FF',
                },
                c: {
                    fontSize: 15,
                    color: 'red',
                },
                 d: {
                    fontSize: 15,
                    color: 'red',
                },
                e: {
                    fontSize: 18,
                    color: '#ACD3FF',
                },
            },
            formatter: (a) => {
                let i = contains(list, a); // 处理对应要显示的样式
                return `{a| ${a}}\n\n{c| 最大负荷：}{b| ${data1[0][i] }kw}\n\n{d| 最小负荷：}{e| ${data2[0][i]}kw}`;
            },
        },
        center: ['50%', '50%'],
        radius: '70%',
        startAngle: 45,
        splitNumber: 5,
        shape: 'circle',
        splitArea: {
            show:false,
           
        },
        axisLabel: {
            show: false,
        },
        axisLine: {
            show: true,
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: ['rgba(4, 130, 248, 0)',
                    'rgba(4, 130, 248, 0.5)', 'rgba(4, 130, 248, 0.5)',
                    'rgba(4, 130, 248, 0.5)', 'rgba(4, 130, 248, 0.5)'
                ],
                width: '1'
            }
        },
        indicator: list,
    },
    series: [
        {
            name: '数据1',
            type: 'radar',
            symbol: 'circle',
            symbolSize: 13,
            "itemStyle": {
            "normal": {
                color:'white',
                "borderColor": "rgba(19, 173, 255, 0.4)",
                "borderWidth": 2
            }
        },
        "lineStyle": {
            "normal": {
                "color": "rgba(19, 173, 255, 1)",
                "width": 2,
            }
        },
          
            data: data1,
        },
        {
            name: '数据2',
            type: 'radar',
            symbol: 'circle',
            symbolSize: 3,
            itemStyle: {
                normal: {
                    color: 'rgba(19, 173, 255, 1)',
                    borderColor: 'rgba(19, 173, 255, 0.4)',
                    borderWidth: 10,
                },
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        1,
                        0,
                        0,
                        [
                            {
                                offset: 0,
                                color: 'rgba(82, 247, 242, 1)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(65, 105, 213, 1)',
                            },
                        ],
                        false
                    ),
                },
            },
            data: data2,
        },
    ],
};