echarts中涟漪颜色动态设置

发布于 2022-09-12 13:07:36 字数 2234 浏览 16 评论 0

项目通过websocket连接
不管设备是否在线,都是推给我全部的设备,仅仅是type:online/offline表示设备状态
设备为在线时,如下图所示
image.png
设备为离线时,如下图所示
image.png
采用的是:echart+百度地图
部分代码:
`
series: [

      {
        type: "effectScatter",
        coordinateSystem: "bmap",
        data: [
          { name: "", value: [114.22516079178804,30.776952401879107] },
          { name: "", value: [114.22505299512684,30.777720317845812] },
          { name: "", value: [114.22429841849846,30.778224501729785] },
          { name: "", value: [114.22336418076809,30.778899328290052] },
          // { name: "111", value: [114.21786,30.77253] },
          // { name: "111", value: [114.21786,30.77253] },
          // { name: "111", value: [114.21786,30.77253] },
          // { name: "111", value: [114.21786,30.77253] },
          // { name: "111", value: [114.21786,30.77253] },
          // { name: "111", value: [114.21786,30.77253] }
        ],
        symbolSize: [20, 20],
        showEffectOn: "render",
        rippleEffect: {
          color: 'red', //涟漪的颜色
          period: 2.5, //涟漪特效的动画周期
          scale: 3.5, //涟漪特效动画中波纹的最大缩放比例
          brushType: "fill" //涟漪特效的波纹绘制方式
        },
        hoverAnimation: true,
        label: {
          normal: {
            formatter: "{b}",
            show: false,
            fontSize: 16,
            color: "#222222",
            fontWeight: "bolder",
            lineHeight: 40,
            position: ["-200%", "-200%"],
            distance: 20,
            align: "center",
            backgroundColor: "#FFFFFF",
            borderRadius: 5,
            padding: 20,
            shadowColor: "rgba(0,0,0,0.16)",
            shadowBlur: 6,
            shadowOffsetX: 0,
            shadowOffsetY: 3,
            width: 200
          },
          emphasis: {
            show: true,
            opacity: 1
          }
        },
        itemStyle: {
          normal: {
            color: 'transparent'
          }
        },
        zlevel: 1
      }
    ]

`
image.png
目的:当某个设备离线时,就将对应点的颜色变为红色,应该怎么设置rippleEffect里面的color?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

梦屿孤独相伴 2022-09-19 13:07:36

自己的写法是:将data中的数据分出来,一个点就是一个数组对象

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文