【Echarts】辽宁地图

根据网络上的大神学习而来，记录一下用于学习

在components文件夹新建文件 echarts.vue

<template>
    <div :id="props.myOption.id" :style="myStyle"></div>
  </template>
  <script setup>
  import { onMounted, defineProps,onUnMounted,reactive,ref,defineEmits } from 'vue';
  import * as echarts from 'echarts';
  const emit = defineEmits(['getEchartsClick'])
  // 因为是封装的组件，会多次调用，id不能重复，要在初始化之前写，不然会报错dom为定义

//   onBeforeMount(() => {
//     uid.value = `echarts-uid-${parseInt((Math.random() * 1000000).toString())}`;
//   });
  onMounted(() => {
    const uid = props.myOption.id;
    let myChart = echarts.init(document.getElementById(uid));
    // 在template中可以直接取props中的值，但是在script中不行，因为script是在挂载之前执行的
    myChart.setOption(props.myOption.option, {
      notMerge: true, //不和之前的option合并
    });
  
    // 监听页面的大小
    window.addEventListener('resize', () => {
      setTimeout(() => {
        myChart?.resize({
          animation: {
            duration: 300,
          },
        });
      }, 300);
    });
	myChart.on('click',function(params){
		emit("getEchartsClick",params)
	})
  });

  const props = defineProps({
    myStyle: {
      type: Object,
      default: () => ({
        width: '100%',
        height: '100%',
      }),
    },
    myOption: {
      type: Object,
      default: () => ({}),
      required: true,
    },
  });
  </script>
  

在js里面新建echarts_mapLn文件

//辽宁地图
import * as echarts from 'echarts'
export function drawChart_mapLn(chartConfig, data) {
	var echartsid = chartConfig.id
	var mapJson = {} //地图代码
    var mapData = [
        {
            value: 100,
            name: '沈阳',
        },
        {
            value: 200,
            name: '大连',
        },
        {
            value: 300,
            name: '鞍山',
        },
        {
            value: 400,
            name: '抚顺',
        },
        {
            value: 500,
            name: '本溪',
        },
        {
            value: 600,
            name: '丹东',
        },
        {
            value: 700,
            name: '铁岭',
        },
        {
            value: 700,
            name: '阜新',
        },
        {
            value: 700,
            name: '锦州',
        },
        {
            value: 700,
            name: '朝阳',
        },
        {
            value: 700,
            name: '盘锦',
        },
        {
            value: 700,
            name: '葫芦岛',
        },
        {
            value: 700,
            name: '营口',
        },
    ]; //虚拟数据
    echarts.registerMap('area', mapJson);
    var outdata = []; //地图区域挂载数据
    var maxData = parseInt(mapData[0].value); //热力最大值
    var minData = parseInt(mapData[0].value); //热力最小值
    mapData.forEach(function (item, index) {
        var num = parseInt(item.value);
        num >= maxData && (maxData = num);
        num <= minData && (minData = num);
        outdata.push({
            name: item.name,
            value: item.value,
            index: index,
        });
        console.log(outdata)
    });
    var option = {
        tooltip: {
            show: true,
            formatter: function (params) {
                // return params.name + '<br>' + params.value;
                let result=`<div style="width:250px;height:100px;text-align:center">
                    <span style="font-size:16px;color:#333;font-weight:bold;margin-top:10px;">${params.name}</span>
                    <span style="font-size:16px;color:#666;margin-top:10px;display:block;margin-bottom:10px">测试值</span>
                    <span style="font-size:20px;font-weight:bold;color:#0559d5">${params.value}</span>
                    <span style="font-size:16px;color:#666">亿元</span>
                </div>`
                return result;

            },
        },
        grid: {
            left: '1%',
            right: '1%',
            top: '1%',
            bottom: '1%',
            show:true,
            // backgroundColor:'#000'
        },
        // 地图的阴影底图
        geo: {
            map: 'area',
            left: 0,
            right: 0,
            bottom: 0,
            top: 0,
            aspectScale: 0.9,
            layoutCenter: ['50%', '52.5%'], //地图位置
            layoutSize: '110%',
            itemStyle: {
                normal: {
                    shadowColor: 'rgba(0,228,242,0.2)',
                    shadowBlur:2,
                    color: '#bad7f3',
                },
                emphasis: {
                    areaColor: '#082A52',
                },
            },
            z: 2,
        },
        //就这东西能根据地图数据value值实现地图不同颜色
        visualMap: {
            min: minData,
            max: maxData,
            right: '90%',
            text: ['高', '低'], // 文本，默认为数值文本
            calculable: true,
            show: true,
            inRange: {
                //颜色数组
                color: [
                    '#fbfaff',
                    '#d8e5fc',
                    '#aacaf9',
                    '#1875f0',
        
                ],
            },
        },
        series: [
            {
                type: 'map',
                map: 'area',
                aspectScale: 0.9,
                layoutCenter: ['50%', '50%'], //地图位置
                layoutSize: '110%',
                label: {
                    normal: {
                        show: true,
                        fontFamily: 'SourceHanSansCN',
                        fontSize: '14',
                        color: '#333',
                    },
                    emphasis: {
                        show: true,
                        fontFamily: 'SourceHanSansCN',
                        fontSize: '14',
                        color: '#333',
                    },
                },
                // tooltip:{} tooltip可结合formatter、div、css实现样式
                itemStyle: {
                    normal: {
                        borderColor: '#c1ddf3',
                        borderWidth: 1,
                        areaColor: {
                            type: 'linear-gradient',
                            x: 0,
                            y: 300,
                            x2: 0,
                            y2: 0,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#f2f5fe', // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: '#1875f0',
                                },
                            ],
                            global: true, // 缺省为 false
                        },
                    },
                    emphasis: {
                        shadowColor: '#c1ddf3',
                        shadowBlur: 10,
                        shadowOffsetX: 5,
                        shadowOffsetY: 5,
                        areaColor: {
                            type: 'linear-gradient',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#f2f5fe', // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: '#1875f0',
                                },
                            ],
                        },
                    },
                },
                zlevel: 1,
                data: outdata,
            },
        ],
    };
    
	return {
		option: option,
		id: echartsid
	}
}

页面文件  ceshi.vue

<!-- 辽宁地图 -->
<template>
    <div>
        <div class="jtzxt" style="width:1600px;height:640px;text-align: center;line-height:640px;margin: auto;" v-if="!chartLineData_jtzxt.isShow">{{chartLineData_jtzxt.nodata}}</div>
		<current-echarts v-if="chartLineData_jtzxt.isShow" :myOption="chartLineData_jtzxt.data" :myStyle="{ width: '1600px', height:'700px',margin: 'auto' }"></current-echarts>

    </div>
</template>
<script setup>
import CurrentEcharts from '@/components/Echarts.vue'
import {drawChart_mapLn} from '@/utils/echarts/echarts_mapLn'
import {ref,reactive,nextTick,onMounted,onUnmounted} from 'vue'

let chartLineData_jtzxt = reactive({
		data:{},
		isShow:false,
		nodata:''
	})
    let chartConfig = {id:'mapLn'}
    chartLineData_jtzxt.data  = drawChart_mapLn(chartConfig)
    setTimeout(() => {
        chartLineData_jtzxt.isShow = true
    }, 500);
</script>
<style></style>

展示效果