Echarts在线免费图表

 
             function contains(arr, val) {
        var i = arr.length;
        while (i--) {
          if (arr[i].name === val) {
            return i;
          }
        }
        return false;
      }
let list = [
    {
        name: '北方',
         max: 100,
    },
    {
        name: '西北',
         max: 100,
    },
    {
        name: '西方',
         max: 100,
    },
    {
        name: '西南',
         max: 100,
    },
    {
        name: '东方',
         max: 100,
    },
    {
        name: '东南',
         max: 100,
    },
    {
        name: '东方',
         max: 100,
    },
    {
        name: '东北',
         max: 100,
    }
];
let data1 = [60, 60, 65, 60, 70, 40, 80, 63];

option = {
    backgroundColor: '#FFFFFF',
    tooltip: {
        show: true,
        trigger: 'item',
        formatter: (data) => {
            // console.log(data.seriesIndex);
            var tip =data.seriesName ;
            let tmpData = [];
            if (data.seriesIndex === 0) {
                tmpData = data1;
            } 
            console.log(tmpData)
            data.value.forEach((item, index) => {
                // console.log(list[index].name)
                tip += '<div>';
                tip += '<div>' + list[index].name + ': '+ tmpData[index] + '</div>'
                tip += '</div>';
            });
            return tip;
        },
    },
    radar: {
        name: {
            textStyle: {
                color: '#2273DA',
                fontSize: 16,
            },
            rich: {
              a: {
                fontSize: 16,
                color: "#ACD3FF",
                // padding: [0, 0, 8, 0]
              },
              b: {
                fontSize: 16,
                color: "#ACD3FF"
              }
            },
            formatter: a => {
              let i = contains(list, a); // 处理对应要显示的样式
              return `{a| ${a}}{b|(${data1[i]})}`;
            }
        },
        center: ['50%', '50%'],
        radius: '70%',
        startAngle: 90,
        splitNumber: 4,
        splitArea: {
            areaStyle: {
                color: ['rgba(50, 72, 130, 0.7)', 'rgba(50, 72, 130, 0.5)', 'rgba(50, 72, 130, 0.6)'],
            },
        },
        axisLabel: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: 'rgba(50, 72, 130, 0.4)',
            },
        },
        indicator: list,
    },
    series: [
        {
            name: '数据',
            type: 'radar',
            symbol: 'circle',
            symbolSize: 10, 
            itemStyle: {
                normal: {
                    color: 'rgba(19, 173, 255, 1)',
                    borderColor: 'rgba(19, 173, 255, 0.4)',
                    borderWidth: 10,
                },
            },
            
            label: {
                normal: {
                    show: true,
                    formatter: (params) => {
                        return params.value;
                    },
                    color: '#fff',
                },
            },
            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: [
              {
                value: data1
              }
            ]
        },
    ],
};