Echarts实现中国地图涟漪点分布

最新推荐文章于 2024-07-11 15:59:08 发布

winne雪

最新推荐文章于 2024-07-11 15:59:08 发布

阅读量2.7k

点赞数 1

分类专栏： ECharts 文章标签： echarts china

本文链接：https://blog.csdn.net/m0_38134431/article/details/102785709

版权

1、效果图

在这里插入图片描述

2、完整配置项代码

可以直接把代码贴到官网看效果：
https://www.echartsjs.com/examples/zh/editor.html?c=map-polygon

option ={
    
    backgroundColor: '#0c1c30', // 图形容器背景色
    tooltip: {
    // 鼠标移到涟漪点上的浮动提示框
        borderWidth:1,
        borderColor:"#6E98FC",
        // formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatter
        formatter (params, ticket, callback) {
    // https://echarts.baidu.com/option.html#tooltip.formatter
        // params.data 就是series配置项中的data数据
        // console.log(params)
        let lossPercent,
          delay
        if (params.data) {
   
          lossPercent = params.data.lossPercent
          delay = params.data.delay
        } else {
   
          lossPercent = 0
          delay = 0
        }
        let htmlStr = `
            <div style='font-size:16px;'> ${
     params.name}</div><br/>
            <p style='text-align:left;margin-top:-10px;'>
            丢包率：${
     lossPercent}%<br/>
            延时：${
     delay}ms<br/>
            </p>`
        return htmlStr
      }
    }, 
    // grid: { // 网格配置
    //     show: true,
    //      backgroundColor: '#ddd'
    // },
    // 左下角指示颜色
    legend: {
   
      type: "plain",
      show: true,
      orient: 'vertical',
      //   top: 'bottom',
      bottom: '20',
      left: '3%',
      data: [
        {
   
          name: "非常好",
          icon: "circle",
          textStyle: {
   
            color: "#6ad86e"
          }
        },
        {
   
          name: "正常",
          icon: "circle",
          textStyle: {
   
            color: "#9adcfa"
          }