修改echarts插件并上传至npm

顾名思义，本节步骤主要为：下载源码--> 修改源码 --> 上传修改后的code到npm

1.下载源码

这里避免踩坑，不要用npm install echarts -s下载然后拷贝代码，这里下的代码不是可以直接上传到npm的，是封装过后的

所以，去github下载https://github.com/smysmile/log56-echarts

2.修改源码

修改需要二次封装想要的样式或者其他功能，这里我修改了map文件夹下的china.json（主要解决省份名称不居中的问题--默认是省份名称显示在省会所在的位置，但是实际不需要具体显示省会位置的时候，省份名称位置千奇百怪，会不好看，这里修改为在省份区域内居中----即将本文件内的所有省份后面的cp属性及值都删除即可）

修改完成后，就要修改package.json啦，为上传到npm作准备。具体修改如下图：

image.png

3.上传修改后的code到npm

在终端执行npm publish即可完成上传

最后说明一下使用。

所有使用方法如同echarts原生使用方法

1.在使用前引用

import smilecharts from "smilecharts";
import china from "smilecharts/map/json/china.json";
smilecharts.registerMap("china", china);

2.写个容器并给个大小

  <div :style="{height:'500px',width:'99%'}" id="myEchart"></div>

3.配置参数

  let myChart = smilecharts.init(document.getElementById("myEchart"));
      console.log(myChart);
      var option = {
        visualMap: {
          show: false, // 左下角颜色条要不要显示，不要则为false
          min: 0, // 颜色条最底端颜色的值
          max: 1000, // 颜色条最上端颜色的值
          left: "left", // 颜色条的位置
          top: "bottom",
          text: ["高", "低"], // 颜色条文本，默认为数值文本
          calculable: true,
          inRange: {
            color: ["#f08a95", "#fbe6ef", "#f6f67a", "#d4ecb2"]
            // 需要的颜色区间和颜色种类 按需写入 多少不限
          }
        },
        // 地图在画布的位置
        grid: {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0
        },

        series: [
          {
            name: "iphone3",
            type: "map",
            mapType: "china",
            roam: false,
            zoom: 1.2, //这里是关键，一定要放在 series中
            label: {
              normal: {
                textStyle: {
                  fontSize: 7,
                  // fontWeight: "bold",
                  // color: "red"
                },
                show: true
              },
              emphasis: {
                show: true
              }
            },

            data: [
              { name: "北京", value: Math.round(Math.random() * 1000) },

              { name: "重庆", value: Math.round(Math.random() * 1000) },

              { name: "辽宁", value: Math.round(Math.random() * 1000) },

              { name: "浙江", value: Math.round(Math.random() * 1000) },

              { name: "湖北", value: Math.round(Math.random() * 1000) },

              { name: "甘肃", value: Math.round(Math.random() * 1000) },
              { name: "山西", value: Math.round(Math.random() * 1000) },

              { name: "广东", value: Math.round(Math.random() * 1000) },

              { name: "西藏", value: Math.round(Math.random() * 1000) },

              { name: "香港", value: Math.round(Math.random() * 1000) },
              { name: "澳门", value: Math.round(Math.random() * 1000) }
            ]
          }
        ]
      };
      myChart.setOption(option);

最后，秀一下效果图吧

秀之前，友情提示，在label里normal里，设置字体大小，chrome只支持最小12px，如果需要更小的字体，设置完在真机上查看即可。本文设置的是7

image.png