echarts地图上绘制堆叠柱状图并切换地市

1、echarts地图上绘制堆叠柱状图

地图堆叠柱状图

 1、js

import echarts from 'echarts'
function initMap(myChart, region, geoCoordMap, rawData) {
  myChart.showLoading()
  // 市区坐标
  let option = {
    tooltip: {
      show: true,
      trigger: 'item',
      // 是否设置让提示框的内容一直显示  默认值是false
      alwaysShowContent: false,
      formatter: function(params, val, item) {
        console.log(params, val, item)
        return  (
            '容量1: ' + params.data.fdInstall.toFixed(2) + 'MW' + '<br />' +
            '功率1: ' + params.data.fdOutput.toFixed(2) + 'MW' + '<br />' +
            '容量2: ' + params.data.gfInstall.toFixed(2) + 'MW' + '<br />' +
            '功率2: ' + params.data.gfOutput.toFixed(2) + 'MW'
          )
      },
    },
    legend: {
      right: '5%',
      bottom: '5%',
      selectedMode: false, //关闭图例点击事件
      orient: 'vertical',
      data: ['容量1', '功率1', '容量2', '功率2'],
      itemWidth: 20,
      itemHeight: 14,
      textStyle: {
        color: '#FFFFFF',
        padding: 5,
      },
    },
    geo: {
      map: region,
      selectedMode: false, //是否允许选中多个区域,
      zoom: 1.1,
      show: true,
      roam: true,
      // zlevel: 10,
      markLine: {
        lineStyle: {
          color: '#fff',
        },
      },
      label: {
        show: false,
        color: '#fff',
        fontWeight: 'bolder',
        emphasis: {
          show: false,
          color: '#ff0',
        },
      },
      itemStyle: {
        normal: {
          borderColor: 'rgb(48,255,239)',
          borderWidth: 1,
          areaColor: 'RGB(6,31,51)',
          // areaColor: 'RGBA(0,204,255, 0.2)',
          shadowColor: 'rgba(88,175,190, 0.8)',
          shadowBlur: 6,
          shadowOffsetY: 5,
        },
        emphasis: {
          borderColor: '#FFFF0F',
          shadowBlur: 6,
          areaColor: 'rgba(88,175,190, 0.8)',
        },
      },
      // 设置地图上默认高亮的区域
      // regions:[
      //   {name: '青岛市', selected:true}
      // ]
    },
    series: [],
  }
  function renderEachCity() {
    var option = {
      xAxis: [],
      yAxis: [],
      grid: [],
      series: [],
    }

    echarts.util.each(rawData, function(dataItem, idx) {
      var geoCoord = geoCoordMap[dataItem[0]]
      var coord = myChart.convertToPixel('geo', geoCoord)
      idx += ''

      var item1 = dataItem[1] * 1;
      var item2 = dataItem[2] * 1;
      var item3 = dataItem[3] * 1;
      var item4 = dataItem[4] * 1;
      var data1 = {
        name: 'data1',
        value: item1,
        fdInsta
  • 1
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 9
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值