echarts地图坐标系及多个省份json文件的合并

安装echarts

yarn add echarts

获取省市区数据来源的json文件
datav使用的是高德坐标系,即国测局坐标(GCJ-02)。对于GPS,即WSG84坐标系经纬度需要转GCJ-02坐标才能在地图上正确显示

生成地理坐标系

var uploadedDataURL = "./js/henan.json"; //地区的json
  (function(){
    $.getJSON(uploadedDataURL,null,function(data){
      var myChart = echarts.init(document.getElementById('chart1'), "westeros");
      echarts.registerMap('henan', data);  //将地区数据注入到地图中
      option = {
        geo: {
            show: true,
            map: 'henan',
            
            itemStyle: {
                normal: {
                    // areaColor: '#031525',
                    // borderColor: '#3B5077',
                },
                emphasis: {
                    areaColor: '#2B91B7',
                }
            }
        },
        series:[
        {
            type: 'map',
            map: 'henan',
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
          
            
            animation: false,
            data: [
              {name:'武清区',value:39},
            ]
        },
        ]
      }
      myChart.setOption(option);
    })
  })()
多省份的json文件合并

多省份合并json地址:http://geojson.io/#map=5/33.229/108.149

使用方式

1.上传需要合并的地区json文件
在这里插入图片描述

2.上传成功后会生成合并好的json数据,将其复制到自己的项目文件中即可
在这里插入图片描述

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 可以使用 echartsdataset 组件来实现多个横坐标的柱子合并。 首先,需要将数据按照不同的横坐标分组,并将每组数据转换为一个二维数组。例如,假设有三个横坐标 A、B、C,对应的数据分别为 [1, 2, 3]、[4, 5, 6]、[7, 8, 9],则可以转换为以下格式: ```javascript { dimensions: ['x', 'y'], source: [ ['A', 1], ['A', 2], ['A', 3], ['B', 4], ['B', 5], ['B', 6], ['C', 7], ['C', 8], ['C', 9] ] } ``` 然后,在 echarts 的 option 中配置 dataset 组件和 series 组件。其中,dataset 组件需要指定数据源,并配置 dimensions 和 source;series 组件需要使用 dataset 中的数据,并设置 seriesLayoutBy 属性为 'column',表示按列排列。 下面是一个简单的示例代码: ```javascript option = { dataset: { dimensions: ['x', 'y'], source: [ ['A', 1], ['A', 2], ['A', 3], ['B', 4], ['B', 5], ['B', 6], ['C', 7], ['C', 8], ['C', 9] ] }, series: [{ type: 'bar', seriesLayoutBy: 'column', encode: { x: 'x', y: 'y' } }] }; ``` 这样就可以实现多个横坐标的柱子合并了。需要注意的是,如果多组数据之间的横坐标不一致,需要在 dataset 中使用 unionDimensions 属性来合并相同的维度。例如,如果有两组数据分别为 [A, B, C] 和 [B, C, D],则可以配置 unionDimensions: ['x'] 来合并横坐标为 B 和 C 的数据。 ### 回答2: 要实现echarts柱状图中多个横坐标的柱子合并,可以通过设置柱状图的宽度和坐标轴的配置来实现。 首先,设置柱状图的宽度。可以通过设置series中的itemStyle属性,将barWidth属性设置为一个较小的数值来实现。该数值决定了每根柱子的宽度,可以根据实际需求进行调整。 其次,调整坐标轴的配置。对于多个横坐标的柱子合并,可以通过设置xAxis的type属性为"category",将多个横坐标作为一个数组赋值给xAxis的data属性。然后,设置xAxis的axisLabel属性中的interval属性来控制横坐标显示的间隔,以适应多个横坐标的显示需求。 例如,假设有两个横坐标:"A"和"B",可以将它们作为数组["A", "B"]赋值给xAxis的data属性,然后将xAxis的axisLabel的interval属性设置为0,即每个横坐标都显示。 最后,将以上配置应用到echarts的实例中,即可实现多个横坐标的柱子合并。 ### 回答3: 在Echarts柱状图中实现多个横坐标的柱子合并,可以通过使用Echarts中的堆叠柱状图(stack)属性来实现。 首先,需要在Echarts的配置中设置xAxis参数,其中的type属性设置为"category"表示横坐标类型为分类类型,而不是连续类型。 接下来,设置series参数,其中的type属性设置为"bar"表示图表类型为柱状图,而不是其他类型,同时设置stack属性为"合并名称",表示需要将此series下的柱子合并为一组。例如: ``` xAxis: { type: 'category', data: ['横坐标1', '横坐标2', '横坐标3'] }, series: [ { name: '柱子1', type: 'bar', stack: '合并名称', data: [100, 200, 300] }, { name: '柱子2', type: 'bar', stack: '合并名称', data: [150, 250, 350] } ] ``` 上述代码中,横坐标有三个分类,即"横坐标1"、"横坐标2"、"横坐标3"。设置了两个series,它们的stack属性均设置为"合并名称",表示需要将这两个series下的柱子进行合并。 这样配置后,在图表中就会显示出两个柱子组,并且横坐标相同的柱子会进行合并,形成一组数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值