居于vue的echart云南地图_echarts 云南地图-CSDN博客

本文链接：https://blog.csdn.net/qq_30228701/article/details/120707605

该博客介绍了如何利用HTML、JavaScript（ECharts库）和后端API来实现云南地图的可视化，并展示各城市的茶企数量分布。通过加载ECharts的云南地图数据，设置地图配置项，包括颜色范围、提示框、工具箱等功能，然后获取并处理后端返回的茶企注册城市统计数据，最终动态渲染到地图上，提供了一种直观的数据展示方式。

摘要由CSDN通过智能技术生成

1、HTML部分

<el-col :span="24">
    <div>
        <div ref="map" class="teaEnterpriseMap" style="margin: -20px 0 0 10px;"></div>
    </div>
</el-col>

2、JS部分

<script>
import '../../../node_modules/echarts/map/js/province/yunnan.js'
import echarts from 'echarts'
export default {
    data () {
        return {
            mapOption: {
                title: {},
                tooltip: {
                  trigger: 'item'
                },
                dataRange: {
                  min: 0,
                  max: 50,
                  x: 'left',
                  y: 'bottom',
                  text: ['高', '低'],
                  calculable: true,
                  inRange: {
                    color: ['lightskyblue', '#ffdb5c', '#F56C6C']
                  },
                  textStyle: {
                    color: '#fff'
                  }
                },
                toolbox: {
                  show: true,
                  orient: 'vertical',
                  x: 'right',
                  y: 'center',
                  feature: {
                    mark: {
                      show: true
                    },
                    dataView: {
                      show: false,
                      readOnly: false
                    },
                    restore: {
                      show: false
                    },
                    saveAsImage: {
                      show: false
                    }
                  }
                },
                roamController: {
                  show: true,
                  x: 'right',
                  mapTypeControl: {
                    'china': true
                  }
                },
                series: []
              }
        }
    },
    mounted () {
        // 加载云南地图
        this.mapEchartsInit()
    },
    methods: {
        // 云南地图
        mapEchartsInit () {
          const myChart = echarts.init(this.$refs.map)
          myChart.setOption(this.mapOption, true)
        },
        getCountGroupByRegisterCity () {
          this.$http.get(`/enterprise/basicenterprise/countGroupByRegisterCity`).then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg)
            }
            const resData = res.data
            const seriesData = []
            for (var i in resData) {
              seriesData.push({ name: resData[i].cityName, value: resData[i].num })
            }
            const series = [
              {
                name: '茶企数量',
                type: 'map',
                mapType: '云南',
                roam: false,
                label: {
                  // show: true,
                  normal: {
                    textStyle: {
                      fontSize: 12,
                      color: '#999'
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    label: {
                      show: true
                    }
                  },
                  emphasis: {
                    areaColor: '#ffff01',
                    label: {
                      show: true,
                      textStyle: {
                        color: '#F56C6C'
                      }
                    }
                  }
                },
                data: seriesData
              }
            ]
            this.mapOption.series = series
            this.mapEchartsInit()
          }).catch(() => {
          })
        }
    }
}
</script>