Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

echarts中涟漪颜色动态设置

项目通过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?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share

2.1m questions

2.1m answers

63 comments

56.6k users

...