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

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

天空中的星~

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

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签： echarts 前端

本文链接：https://blog.csdn.net/workhard0905/article/details/123318435

echarts 专栏收录该内容

1 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

本来是想在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
        },
    };