Echarts在线免费图表

 
            const FORMATTER = function (value, indicator, name) {
   return value == name
      ? [
         `{b|${indicator.val.toFixed(2)}}`,
         `{c|${value}}`,
         indicator.val >= indicator.average
            ? "{d|高于标准" +
            (indicator.val - indicator.average).toFixed(2) +
            "}"
            : "{e|低于标准" +
            (indicator.average - indicator.val).toFixed(2) +
            "}",
      ].join("\n")
      : `{a|${value}}`;
}
const RICH = {
   a: {
      align: "left",
      fontSize: 14,
      color: "#C9DFFF",
      lineHeight: 20,
   },
   b: {
      fontSize: 24,
      height: 24,
      color: "#F9C956",
      fontFamily: "YouSheBiaoTiHei",
   },
   c: {
      align: "left",
      fontSize: 14,
      color: "#F9C956",
      lineHeight: 20,
   },
   d: {
      align: "left",
      fontSize: 14,
      color: "#70d956",
      lineHeight: 20,
   },
   e: {
      align: "left",
      fontSize: 14,
      color: "#ed4a32",
      lineHeight: 20,
   },
};
const INDICATOR = [
   { name: "经济发展基础", max: 100, val: 67.86, average: 81.67 },
   { name: "土地资源基础", max: 100, val: 75.18, average: 80 },
   { name: "区位交通基础", max: 100, val: 54.57, average: 85 },
   { name: "文化艺术资源基础", max: 100, val: 75.43, average: 73.67 },
   { name: "乡村治理基础", max: 100, val: 79.16, average: 86.67 },
],
   option = {
      backgroundColor: '#141518',
      radar: {
         indicator: INDICATOR,
         splitArea: {
            show: false,
         },
         splitLine: {
            lineStyle: {
               color: '#484849'
            }
         },
         triggerEvent: true,
         startAngle: 0,
         center: ["45%", "51%"],
         radius: "60%",
         nameGap: 30,
         axisName: {
            formatter: function (value, indicator) {
               return FORMATTER(value, indicator, '经济发展基础')
            },
            rich: RICH,
         },
      },
      series: [
         {
            type: "radar",
            data: [
               {
                  value: [67.86, 75.18, 56, 90, 79],
               },
            ],
            itemStyle: {
               color: "#fff",
            },
            lineStyle: {
               color: "#38D7FF",
            },
            areaStyle: {
               color: "rgba(40,136,255,0.2000)",
            },
         },
         {
            type: "radar",
            data: [
               {
                  value: [81.67, 80, 85, 76.67, 86.67],
               },
            ],
            itemStyle: {
               color: "#fff",
            },
            lineStyle: {
               color: "#F9C956",
            },
            areaStyle: {
               color: "rgba(249,201,86,0.2000)",
            },
         },
      ],
   };
let nowName = ''
let time = null
let currentIdx = 0 //当前高亮位置

setIntervalList()

myChart.on("mousemove", (param) => {
   stopSetInterval() //清除计时器
   if (param.targetType == "axisName") {
      const arr = /^({a\|)(.*?)(?=\})/.exec(param.name);
      if (!arr) return;
      const name = arr[2];

      if (name == nowName) return;
      nowName = name;
      updateOption(nowName) //切换要高亮的元素
   }
});
myChart.on("mouseout", (param) => {
   nowName = "";
   if (!time) {
      setIntervalList()
   }
});

//更新高亮位置
function updateOption(name) {
   const axisName = {
      formatter: function (value, indicator) {
         return FORMATTER(value, indicator, name)
      },
      rich: RICH,
   };
   myChart.setOption({
      radar: {
         axisName,
      },
   });
}
function setIntervalList() {
   time = setInterval(() => {
      if (currentIdx == 0) {
         currentIdx = INDICATOR.length
      }
      currentIdx--
      change(INDICATOR[currentIdx], currentIdx)
   }, 2000)
}
//清除计数器
function stopSetInterval() {
   if (time) {
      clearInterval(time)
      time = null
   }
}
//切换高亮  （当前要展示的数据，位置索引）
function change(e, i) {
   nowName = e.name
   if (!i) {                 //无索引（悬浮图表节点）时切为0  （更新滚动列表）
      currentIdx = 0
   }
   updateOption(nowName)
}