vue3+echarts：echarts地图打点显示的样式

意初

已于 2024-04-03 22:11:39 修改

阅读量742

点赞数 1

CC 4.0 BY-SA版权

文章标签： echarts vue.js 前端 javascript es6 ecmascript

于 2024-04-03 22:09:22 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43928112/article/details/137358944

本文介绍了如何在Vue3项目中，结合ElementPlus库，创建带有颜色渐变和动态数字滚动的气泡图，以优化大屏可视化的数据展示。特别关注了colorStops配置和label自定义样式。

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

colorStops是打点的颜色和呼吸灯、label为show是打点是否显示数据、rich里cnNum是自定义的过滤模板用来改写显示数据的样式

series: [
  {
        type: "effectScatter",
        coordinateSystem: "geo",
        rippleEffect: {
          brushType: "stroke",
        },
        showEffectOn: "render",
        itemStyle: {
            color: {
              type: "radial",
              x: 0.5,
              y: 0.5,
              r: 0.5,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(14,245,209,0.2)' //打点颜色
                },
                {
                  offset: 0.8,
                  color: 'rgba(14,245,209,0.2)'
                },
                {
                  offset: 1,
                  color: 'rgba(14,245,209,1)'
                },
              ],
              global: false, // 缺省为 false
            },
        },
        label: {
            show: true,// 打点显示数据
            color: "#fff",
            fontWeight: "bold",
            position: "inside",
            formatter: function (para) {      
              return "{cnNum|" + para.data.name + "}"; //打点的显示以及样式定义为cnNum
            },
            rich: {
              cnNum: {
                fontSize: 10.5,//文字大小
                fontWeight: 'bold',//文字加粗
                color: "#ABF8FF",
              },
            },
        },
        symbol: "circle",
        //气泡大小
        symbolSize: function (val) {
          if (val[2] === 0) {
            return 0;
          }
          let a = (maxSize4Pin - minSize4Pin) / (max - min);
          let b = maxSize4Pin - a * max;
          return a * val[2] + b * 1.2;
        },
        data: convertData(data),
        zlevel: 1,
      },      
 ]
 
  const maxSize4Pin = 100,
    minSize4Pin = 20;

上一篇文章，

vue3+elementPlus：实现数字滚动效果（用于大屏可视化）-优快云博客文章浏览阅读46次。vue3+elementPlus：实现数字滚动效果。自行封装注册一个公共组件，或拉取vue-count-to插件源码，因为这个插件在vue3里不能用https://blog.youkuaiyun.com/weixin_43928112/article/details/137358802?spm=1001.2014.3001.5501