echart5.0 写地图,手动引 map 组件后,开发中生效,build打包不生效

下载echart中map可以用npm i 安装4.多的版本,让后将map拷贝的 node_modules\echarts中,然后在node_modules\echarts\package.json中的sideEffects中添加 “map/js/china.js”
或者直接去下载我打包的资源echarts5.0 附带map
注意:如果替换echarts包依赖的话,不要替换整个echarts文件夹(依赖出错,启动不了),要新增或者替换map文件夹,替换package.json文件,或者单独修改这两个文件(夹)
在这里插入图片描述

在需要画图的页面记得引入china.js
import * as echarts from ‘echarts’;
import ‘echarts/map/js/china.js’

上图,来个例子
在这里插入图片描述

import * as echarts from 'echarts';

import 'echarts/map/js/china.js'

let dataList = [
  { name: '澳门', value: 18 },
  { name: '香港', value: 273 },
  { name: '台湾', value: 153 },
  { name: '新疆', value: 76 },
  { name: '宁夏', value: 75 },
  { name: '青海', value: 18 },
  { name: '甘肃', value: 134 },
  { name: '陕西', value: 248 },
  { name: '西藏', value: 1 },
  { name: '云南', value: 176 },
  { name: '贵州', value: 146 },
  { name: '四川', value: 1543 },
  { name: '重庆', value: 576 },
  { name: '海南', value: 168 },
  { name: '广西', value: 254 },
  { name: '广东', value: 1407 },
  { name: '湖南', value: 1018 },
  { name: '湖北', value: 2000},
  { name: '河南', value: 1273 },
  { name: '山东', value: 765 },
  { name: '江西', value: 936 },
  { name: '福建', value: 307 },
  { name: '安徽', value: 990 },
  { name: '浙江', value: 1237 },
  { name: '江苏', value: 633 },
  { name: '上海', value: 394 },
  { name: '黑龙江', value: 484 },
  { name: '吉林', value: 93 },
  { name: '辽宁', value: 126 },
  { name: '内蒙古', value: 75 },
  { name: '山西', value: 133 },
  { name: '河北', value: 319 },
  { name: '天津', value: 137 },
  { name: '北京', value: 512 }
];
 		const maxNum = (arr: any) => {
            let arr2: Array<number> = []
            arr.forEach((item: any) => {
                for (let key in item) {
                    arr2.push(item[key])
                }
            })
            return Math.max(...arr2)
        }
	//记得求一下最大数
	
   drawMap(dataList, 200)


  const drawMap = (res: any, max: number) => {

    var chartDom = document.getElementById('map');
    var myChart = echarts.init(chartDom);
    console.log(max);
    // max % 5 是否有余数,有则max--,

    let step = 1;
    const countStep = (num: number) => {
      if (num % 5 != 0) {
        num--;
        countStep(num)
      } else {
        step = num / 5
      }
    }
    if (max > 5) countStep(max)

    let option = {
      tooltip: {
        // triggerOn: "click",
        formatter: function (e, t, n) {
          return '.5' == e.value ? e.name + "地区数量:" : e.seriesName + "<br />" + e.name + ":" + e.value
        }
      },
      // grid: {
      //   left: '5%',
      //   right: '5%',
      //   bottom: '5%',
      //   top: '0%',
      //   containLabel: true,
      // },

      toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
          dataView: { readOnly: false },
          restore: {},
          saveAsImage: {}
        }
      }, // 提供下载工具
      visualMap: {
        min: 1,
        max: 100000,
        left: 0,
        bottom: 120,
        showLabel: !0,
        text: ["高", "低"],
        pieces: [{
          gt: step * 4,
          label: "> " + step * 4,
          color: "#7f1100"
        }, {
          gte: step * 3,
          lte: step * 4,
          label: step * 3 + " - " + step * 4,
          color: "#ff5428"
        }, {
          gte: step * 2,
          lt: step * 3,
          label: step * 2 + " - " + step * 3,
          color: "#ff8c71"
        }, {
          gt: step,
          lt: step * 2,
          label: step * 1 + " - " + step * 2,
          color: "#ffd768"
        }, {
          gt: 0,
          lt: step,
          label: "0 - " + step,
          color: "#ffffff"
        }],
        show: !0
      },
      geo: {
        map: "china",
        // roam: !1,
        // scaleLimit: {
        //     min: 1,
        //     max: 2
        // },
        // zoom: 1.23,
        // top: 120,
        label: {
          normal: {
            show: !0,
            fontSize: "12",
            color: "rgba(0,0,0,0.7)"
          }
        },
        itemStyle: {
          normal: {
            //shadowBlur: 50,
            //shadowColor: 'rgba(0, 0, 0, 0.2)',
            borderColor: "rgba(0, 0, 0, 0.2)"
          },
          emphasis: {
            areaColor: "#f2d5ad",
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            borderWidth: 0
          }
        }
      },
      roam: true, //是否允许缩放
      series: [{
        name: "地区数量:",
        type: "map",
        geoIndex: 0,
        data: res,
        // data: dataList
      }]
    };
    option && myChart.setOption(option);
  }
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夜空孤狼啸

你的鼓励是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值