Echarts 地图设置默认颜色

最新推荐文章于 2024-09-05 10:30:15 发布
最新推荐文章于 2024-09-05 10:30:15 发布
阅读量8.3k 收藏 3
点赞数 1
分类专栏： js 文章标签： javascript vue.js 容器
原文链接：https://www.wanjunshijie.com/note/vue/1998.html
版权

areaColor: '#00BCFF',

itemStyle: {
              normal: {
                borderColor: 'rgba(13, 38, 77, 1)',
                borderWidth: 1,
                areaColor: '#00BCFF',
              },
              emphasis: {
                areaColor: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#00BCFF' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#00BCFF' // 100% 处的颜色
                  }],
                  globalCoord: false // 缺省为 false
                },
                borderWidth: 0,
                color: 'green'
              }
            },

    drawLine () {
      var that = this
      window.addEventListener('resize', this.drawLine)
      var myChart = this.$echarts.init(this.$refs.echarts)
      this.$echarts.registerMap('js', jiaxing)
      var fData = []
      var geoCoordMap = {
        '桐乡市': [120.584193, 30.630593],
        '海宁市': [120.687714, 30.507719],
        '平湖市': [121.009352, 30.67752],
        '海盐县': [120.957618, 30.533117],
        '嘉善县': [120.945159, 30.839851],
        '秀洲区': [120.775801, 30.766483],
        '南湖区': [120.783284, 30.750802],
      }
      for (var key in geoCoordMap) {
        for (var key1 in geoCoordMap) {
          if (key1 != key) {
            fData.push({
              coords: [
                geoCoordMap[key],
                geoCoordMap[key1],
              ],
              fromName: key,
              toName: key1,
            })
            break
          }
        }

      }
      var mapdata = [
        {
          name: '嘉善县',
          value: 100
        }, {
          name: '南湖区',
          value: 10
        }, {
          name: '平湖市',
          value: 20
        }, {
          name: '桐乡市',
          value: 100
        }, {
          name: '海盐县',
          value: 100
        }, {
          name: '海宁市',
          value: 20
        }, {
          name: '通化市',
          value: 61
        }, {
          name: '秀洲区',
          value: 61
        }
      ]
      var option = {
        visualMap: {
          show: false,
          max: 100,
          pieces: [
            {
              max: 15,
              min: 0,
              label: '安全',
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 1,
                colorStops: [{
                  offset: 0,
                  color: '#A0EDFF' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#A0EDFF' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              }
            },
            {
              max: 90,
              min: 20,
              label: '安全',
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 1,
                colorStops: [{
                  offset: 0,
                  color: '#00DFFF' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#00DFFF' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              }
            },
            {
              min: 100,
              label: '危险',
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 1,
                colorStops: [{
                  offset: 0,
                  color: '#00BCFF' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#00BCFF' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              }
            },
          ]
        },
        tooltip: {
          trigger: 'item',
          showDelay: 0,
          transitionDuration: 0.2,
          borderWidth: 0,
          padding: [5, 10, 5, 10],
          show: true,
          formatter: function (params) {
            return params.name
          }
        },
        geo: [
          {
            map: 'js',
            roam: false, //是否允许缩放
            zoom: 1.1, //默认显示级别
            scaleLimit: {
              min: 0,
              max: 3
            }, //缩放级别
            itemStyle: {
              normal: {
                areaColor: '#00BCFF',
                shadowColor: '#00BCFF',
                shadowBlur: 1,
                shadowOffsetX: 0,
                shadowOffsetY: 5,
                color: '#00BCFF',
              }
            },
          }],
        series: [
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            z: 5,
            data: [],
            symbolSize: 14,
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  return '{fline|地点：' + params.data.city + '}\n{tline|' + (params.data.info || '发生xx集件') + '}'
                },
                position: 'top',
                backgroundColor: '#00BCFF',
                padding: [0, 0],
                borderRadius: 3,
                lineHeight: 32,
                color: '#00BCFF',
                rich: {
                  fline: {
                    padding: [0, 10, 10, 10],
                    color: '#00BCFF'
                  },
                  tline: {
                    padding: [10, 10, 0, 10],
                    color: '#00BCFF'
                  }
                }
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              color: '#00BCFF',
              normal: {
                color: '#00BCFF',
              }
            }
          },
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            z: 5,
            data: [],
            symbolSize: 14,
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  return '{fline|地点：' + params.data.city + '}\n{tline|' + (params.data.info || '发生xx集件') + '}'
                },
                position: 'top',
                backgroundColor: '#00BCFF',
                padding: [0, 0],
                borderRadius: 3,
                lineHeight: 32,
                color: '#00BCFF',
                rich: {
                  fline: {
                    padding: [0, 10, 10, 10],
                    color: '#ffffff'
                  },
                  tline: {
                    padding: [10, 10, 0, 10],
                    color: '#ffffff'
                  }
                }
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              color: 'rgba(13, 38, 77, 1)',
              normal: {
                color: '#00BCFF',
              }
            }
          },
          {
            type: 'map',
            mapType: 'js',
            geoIndex: -1,
            zoom: 1.1, //默认显示级别
            label: {
              show: true,
              color: 'rgba(13, 38, 77, 1)',
              emphasis: {
                color: 'white',
                show: false
              }
            },
            itemStyle: {
              normal: {
                borderColor: 'rgba(13, 38, 77, 1)',
                borderWidth: 1,
                areaColor: '#00BCFF',
              },
              emphasis: {
                areaColor: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#00BCFF' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#00BCFF' // 100% 处的颜色
                  }],
                  globalCoord: false // 缺省为 false
                },
                borderWidth: 0,
                color: 'green'
              }
            },
            data: mapdata
          },
          {
            type: 'lines',
            zlevel: 3,
            effect: {
              show: true,
              period: 4, //箭头指向速度，值越小速度越快
              trailLength: 0.1, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: 'arrow', //箭头图标
              symbolSize: 4, //图标大小
            },
            lineStyle: {
              normal: {
                color: '#F46E36',
                width: 0.5, //尾迹线条宽度
                opacity: 0.5, //尾迹线条透明度
                curveness: 0.3 //尾迹线条曲直度
              }
            },
            data: fData,
          },
        ]
      }
      myChart.resize()
      myChart.on('click', function (params) {
        console.log(params.name)
        that.list.forEach((type) => {
          if (params.name == type.title) {
            openLink(type.link, '_target')
          }
        })
      })
      myChart.setOption(option)
    }
wanjunshijie
关注
专栏目录
echarts地图不同地区设置不同的颜色
ld395353765的博客
03-22 7057
echarts地图显示不同颜色
echarts 默认显示图例_echarts设置图例颜色和地图底色的方法实例
weixin_39718083的博客
12-20 2629
前言本来想写echarts初始化函数的，但最近因为要写一个地图与柱状图的混合方式，也就是每个省的地图上要有柱状图显示。于是仔细使用了一下地图。1、地图的一些基本属性就不介绍了，还是那些style2、地图数据的获取以及Series的加载和其他没有什么大的差异。地图数据都在map.js中，都可以自己看，也可以自己根据格式获取响应的数据。这里主要想处理的是图例颜色与地图底图颜色怎么设置的问题。1、图例的...
echarts默认的颜色
weixin_50885665的博客
06-06 2276
echarts默认的颜色方案是 [‘#c23531’,‘#2f4554’, ‘#61a0a8’, ‘#d48265’, ‘#91c7ae’,‘#749f83’, ‘#ca8622’, ‘#bda29a’,‘#6e7074’,‘#546570’, ‘#c4ccd3’]
echarts使用地图坐标，修改地图初始颜色。
m0_64427297的博客
11-24 1270
echarts地图
echars 3D地图为区域自定义颜色_echarts地图区域 颜色
最新发布
2401_86454745的博客
09-05 520
这里面的配置是根据自己的项目需求而来的 自己可以看文档都有详细的介绍。
echarts-地图自定义颜色
cwjxyp的博客
08-08 2407
echarts地图自定义颜色
echarts地图给不同区域设置不同颜色，动态改变地图颜色
m0_45237165的博客
07-21 1万+
（地图组件中监听数据变化）
echarts 地图区域显示不同颜色笔记
qq_38388578的博客
03-16 3728
【代码】echarts 地图区域显示不同颜色笔记。
echarts 默认颜色
fivestar2009的博客
11-09 2838
echart默认颜色
2.（echarts篇）echarts颜色地图边缘高亮.zip
12-31
在ECharts中，我们可以利用`itemStyle`属性来设置地图区域的样式，包括颜色、边框宽度以及边框颜色等，从而实现地图边缘的高亮。 1. **初始化ECharts实例** 在HTML页面中，我们需要创建一个`div`元素作为ECharts的...
echarts设置图例颜色和地图底色的方法实例
10-18
具体来说，可以设置`itemStyle.normal.color`来指定图例项的默认颜色，或者`itemStyle.emphasis.color`来指定鼠标悬停或选中时的高亮颜色。以下是一个简单的例子： ```javascript option = { legend: { show: ...
echarts地图设置legend_echarts设置图例颜色和地图底色的方法实例
weixin_36272673的博客
02-23 1511
导读热词前言本来想写echarts初始化函数的，但最近因为要写一个地图与柱状图的混合方式，也就是每个省的地图上要有柱状图显示。于是仔细使用了一下地图。1、地图的一些基本属性就不介绍了，还是那些style2、地图数据的获取以及Series的加载和其他没有什么大的差异。地图数据都在map.js中，都可以自己看，也可以自己根据格式获取响应的数据。这里主要想处理的是图例颜色与地图底图颜色怎么设置的问题。1...
echars 3D地图为区域自定义颜色
热门推荐
官方推荐
08-24 4万+
echars 3D地图为区域自定义颜色问题延伸解决问题 问题 根据项目需求，我们要将下面省级地图中的个别市进行高亮（不同颜色）展示 延伸 首先跟大家介绍这个地图的展示方式： 采用的是Vue框架中运用echarts 地图采用的是geo3D和scatter3D 当然他的实现很简单 首先我们要初始化echarts let echartsMap = this.$echarts.init(this.$refs.echartsMap); 注册地图 this.$echarts.registerMap('河
echarts初次使用,自定义china-map省份默认颜色
agax0312的博客
01-10 2万+
点击打开链接(修改后的echarts.js) <!-- 2017-01-09 有什么问题可以一起讨论,微信:Jerry_agax 大写J --> <!-- 修改某些省份默认颜色,我的做法是修改echarts.js文件,详见echarts-L33715. 修改后的echarts.js --> html> meta charset= "utf-8"> head>
echarts 地图默认文字颜色修改 normal和emphasis
seimeii的博客
11-14 4790
1、静态时显示 normal:{ //静态的时候显示的默认样式 　　show:true, //默认是否显示 　　textStyle:{ 　　　　color:'red' 　　} }, 2、鼠标移入时显示 emphasis:{ //鼠标移入动态的时候显示的默认样式 　　color:'green' } 3、完整option代码 const sactterMapOpt = { title: { tex
【删繁就简】Echarts 视觉映射组件中国地图分段颜色显示，选中范围内外颜色设置策略
追寻上飞的博客
03-09 2824
在前端项目开发过程中，需要在大屏模块模块中按照项目在各省份分部的数量进行可视化显示，该功能对应`Echarts`的视觉映射组件`VisualMap`，设置完成后，出现的效果如图所示。当项目量为0的省份是透明的。
笔记：Echarts地图 被选中更改颜色一系列配置
sky8880的博客
01-05 1万+
✈ 废话不多说直接直接起飞 1.点击选中变颜色配置字段： let option = { geo: [ // ???????????????????????????????????????????? select: { itemStyle: { areaColor: "yellow", borderColor: "#f18355",
ECharts地图颜色-选中颜色设置
唐策的博客
08-15 3万+
1. echarts版本 areaColor：3.0 color:2.0option = { tooltip: { trigger: 'item', formatter: '{b}' }, series: [ { name: '中国', type: 'map',
echars 3D地图为区域自定义颜色_echarts地图区域 颜色，2024年最新大学生程序设计大赛
2401_84160087的博客
04-08 1505
序、Python等项目供你选择，真正体系化！**
echarts设置地图默认颜色
06-03
你可以使用 ECharts 的 visualMap 组件来设置地图的默认颜色。具体步骤如下： 1. 在 option 中配置 visualMap 组件，设置 type 为 piecewise（分段型），并设置对应的 min、max 值和颜色列表。 ``` visualMap: { type: 'piecewise', min: 0, max: 100, align: 'right', top: 'bottom', left: 'right', inRange: { color: ['#e0ffff', '#006edd'] }, pieces: [ {min: 90, label: '>90', color: '#ff0'}, {min: 80, max: 90, label: '80-90', color: '#ff4e22'}, {min: 70, max: 80, label: '70-80', color: '#ff9900'}, {min: 60, max: 70, label: '60-70', color: '#ffdb00'}, {min: 50, max: 60, label: '50-60', color: '#e7ff00'}, {max: 50, label: '<50', color: '#00eaff'} ] } ``` 2. 在 series 中使用 map 属性指定地图类型，并设置对应的数据。 ``` series: [ { type: 'map', map: 'china', data: [ {name: '北京', value: 90}, {name: '上海', value: 80}, {name: '广东', value: 70}, {name: '四川', value: 60}, {name: '辽宁', value: 50} ] } ] ``` 这样就可以设置地图的默认颜色了。可以根据自己的需求调整对应的颜色和数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值