EchartsConvert（在word中把echarts生成为图片放在word里）操作攻略（前端向）

需求：需要操作复杂的echarts，无法使用原有的那种简单的echarts写法

解决方案（代码修改过程及思路）：

1. 不再使用原有的opt文件读取，全放到echartsconvert.js中操作，写js和echarts代码（注意：只能使用es5写法，不支持es6写法）

2. 增加 -data 的获取
   //新增 .option("-d, --data <json>", "data", "")
   根据后台新增一个data相关的json数据（这个方法和之前生成opt的方法一样）
   格式为 {对象名称:{对象data:[],对象title:{}}}

3. 在代码219行左右 Convert.prototype.serverCheckAndSet = function (params, args) {}代码中
   新增 params.data = args.data; 把后台给的数据传给params中

4. 在代码408行左右创建Dom时 function createEchartsDom(params) {
var flag = Object.keys(JSON.parse(params.data));获取对象的名称，并根据对象名称执行不同的echarts代码（因为前端的对象是一个一个传的，所以需要根据对象的名称进行判断）

5. 根据不同的对象，写不同的echarts
   示例：

 obj = JSON.parse(params.data).map_china; //这里是获取数据，因为传来的是个json字符串 所以需要转成json
      options = {
        textStyle: { fontFamily: "SimSun", textEncoding: "UTF-8" },
        visualMap: {
          show: "true",
          min: Number(obj.min),
          max: Number(obj.max),
          left: "30",
          bottom: "20",
          itemWidth: 15,
          itemHeight: 120,
          inRange: {
            color: ["#ecf2fd", "#dee9fe", "#76c1f9", "#007dee", "#353c9a"],
          },
        },
        series: [
          {
            type: "map",
            map: "china",
            label: {
              normal: {
                show: true,
                fontSize: "8px",
              },
            },
            animation: false,
            zoom: 1.2,
            data: JSON.parse(obj.data),
          },
        ],
      };

如果遇到了个别图高版本echarts不适配的情况，需要引入不同的版本的话

• 在代码366行左右 page.open("about:blank", function (status) {生成空白页的时候，对于echarts引入版本进行更换
• 我这段代码是因为5.0以上版本的echarts如果使用矩形树图会导致label显示不出来，所以只能换低版本的进行操作

 if(Object.keys(JSON.parse(params.data)) == 'ZSCQZBLYBDT' || Object.keys(JSON.parse(params.data)) == 'ZSCQZBLYBDTCT'){
        external.ECHARTS3 = path + "/script/echarts.min2.js" //echarts 4.9
      }else{
        external.ECHARTS3 = path + "/script/echarts.min.js" //echarts5.4.2
      }

如果代码部署到centos上的话可能会导致找不到字体，所以需要在echarts中手动设置字体

options.textStyle = { fontFamily: "Microsoft YaHei,msyh,msyhl", textEncoding: "UTF-8" };

这段代码写在最后生成完还没加载（setOption之前）

• 注意：centos可能会缺少很多字体，会导致生成的图片字体乱码，所以需要手动往centos中导入字体

常见问题

• 注意：以下会导致echartsconvert起不来，也不好找问题
• 传来的数据中不能有%
• echarts代码中也不能有es6的写法，如：formatter:()=>{}这种写法需要改成formatter:function(){}
• echarts代码中也不能出现相同配置项
• 建议都在echarts官网示例中写好再放进来

地址相关

代码地址：git地址（前端代码）
echarts示例地址：isqqw个人示例地址