ecahrts 散点图根据数据不同在地图上显示不同的颜色

最新推荐文章于 2024-02-29 11:22:44 发布

原创最新推荐文章于 2024-02-29 11:22:44 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端

echarts 专栏收录该内容

1 篇文章

订阅专栏

这篇博客探讨了如何根据接口返回的数据，在地图上动态显示不同颜色的圆柱和波浪。作者遇到问题是在`color`属性中无法使用回调函数来改变颜色，但发现可以利用`lineStyle`属性在`lines`类型的series中为每个数据点设置单独的样式。示例代码展示了如何根据数据的`abnormalData`字段判断并应用异常颜色。这为地图数据的可视化提供了一种灵活的方法。

根据需求要根据接口返回数据的不同在地图上行显示不同的圆柱以及波浪

本来是想在color中使用回调根据数据返回不同的颜色但是在color属性中使用回调函数发现不起作用而且没有进入回调函数中查询文档发现

在type为lines scatter efferctScatter类型的series中的data属性

以type='lines'为例 data属性中有个lineStyle的属性可以根据单个数据设置样式

return data.map(item => {
    return {
        name: item.name,
        value: item.value,
        coords: [
            geoCoordMap[item.name],
            [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + (item.value ? 0.15 : 0)],
        ],
        lineStyle: {
            color: item.abnormalData && item.abnormalData > 0 ? abnormalColor.lineColor : normalColor.lineColor
        },
    };