echarts中在geo上绘制lines时,对于lines上各个点的响应处理办法。

目前的echarts版本中,对于在geo上绘制lines时,主要的代码如下:

geo: {
                map: 'world',
                silent: true,
                roam: true,
                show: true,
                zoom: 25,
                selectedMode: 'single',
                nameMap: {
                    // China:'中国'
                },
                label: {
                    show: true,
                    position: ['50%', '50%'],
                    color: "#63e5ff"
                },
                center: [124.5, 29.3],
                data: this.makeMapData(rawData),
                activeOpacity: 1,
                symbolSize: 10,
                itemStyle: {
                    borderWidth: 0.5,
                    borderColor: '#43c5ff',
       areaColor: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.8,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(10,104,204,0)'
                        }, {
                            offset: 1,
                            color: 'rgba(10,104,204,.2)'
                        }],
                        globalCoord: false
                    },
                },

如果想要在geo上绘制航路点,我们可以要使用lines或者scatter,

lines是针对每个具体的点,绘制线段,
scatter实际上是锚点,然后绘制两点连线。

但是如果想要在一个线段中,对于关键的拐点、重点的线上点进行响应,目前echarts好像没有提供官方的API。

我的解决思路是,绘制相同name的lines和scatter进行geo坐标系的连接,这样就可以实现了。

代码如下:

{
                    type: 'lines',
                    name: item.name,
                    coordinateSystem: 'geo',
                    polyline: true,
                    lineStyle: {
                        color: this.props.colorList[index],
                    },
                    emphasis: {
                        show: false,
                        position: 'start',
                        formatter: '{a}-{b}--{c}'
                    },
                    data: [{
                        name: item.name,
                        coords: item.data,
                    }]
  }
  {
                    type: 'scatter',
                    name: item.name,
                    coordinateSystem: 'geo',
                    polyline: true,
                    // symbol:'cricle',
                    // symbolSize:10,
                    itemStyle: {
                        color: this.props.colorList[index],
                    },
                    emphasis: {
                        show: false,
                        position: 'start',
                        formatter: '{a}-{b}--{c}'
                    },
                    data: item.data.map((item, index) => {
                        return {
                            name: index,
                            value: item
                        }
                    }),
                }

效果如下:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/wgh295360998/article/details/84564045