封装一套通用echats

import Vue from 'vue'
// 全局引入echarts
import * as echarts from 'echarts'
// 引入样式
import theme from '@/assets/js/themes/darkblue'

Vue.prototype.$echarts = echarts
echarts.registerTheme('darkblue', theme);

/**
 * 绘制图表
 *
 * @param {*} obj
 */
export function drawEchart(obj) {
  let type = obj.type;
  // 如果图表存在，销毁后重新加载
  if (obj.charts != null) {
    obj.charts.dispose();
  }
  // 基于准备好的dom，初始化echarts实例
  obj.charts = echarts.init(document.getElementById(obj.id), 'darkblue')

  let myChart = null;
  if (type === 'pie') {
    myChart = drawPie(obj);
  } else if (type === 'twopie') {
    myChart = twodrawPie(obj);
  }else if (type === 'mixed') {
    myChart = drawMixedChart(obj);
  } else if (type === 'mixedjb') {//渐变
    myChart = drawMixedChart_jb(obj);
  }else if (type === '3Dmixed') {//3D堆积柱状图
    myChart = draw3DMixedChart(obj);
  } else if (type === 'HomePie') {
    myChart = drawHomePieChart(obj);
  } else if (type === 'HomeMultiple') {
    myChart = drawHomeMultipleChart(obj);
  }  else if (type === 'Nwpie') {
    myChart = drawNwPieChart(obj);
  } else {
    myChart = drawBarOrLine(obj);
  }
  //根据窗口大小自适应
  if (myChart != null) {
    myChart = obj.charts;
    // myChart.on("click", function() {
    //     let options = myChart.getOption();
    //     myChart.clear();
    //     myChart.setOption(options);
    // });
    if(!obj.clickFlag){
      // 扩大点击范围
      myChart.getZr().on('click', function(params) {
        const pointInPixel = [params.offsetX, params.offsetY];
        if (myChart.containPixel('grid', pointInPixel)) {
          let xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0];
          let name = myChart.getOption().xAxis[0].data[xIndex]
          let dataIndex = xIndex;
          myChart._$handlers.click.forEach(callback => {
            callback.h({...params, name, dataIndex,again:true })
          })
        }
      });
    }
    // 设置鼠标样式为小手手
    myChart.getZr().on("mousemove", (params) => {
      const pointInPixel = [params.offsetX, params.offsetY];
      if (myChart.containPixel("grid", pointInPixel)) {
        myChart.getZr().setCursorStyle("pointer");
      }
    });
    // 设置鼠标样式为default
    myChart.getZr().on("mouseout", (params) => {
      const pointInPixel = [params.offsetX, params.offsetY];
      if (myChart.containPixel("grid", pointInPixel)) {
        myChart.getZr().setCursorStyle("default");
      }
    });
    window.addEventListener("resize", function() {
      myChart.resize();
    });
  }
}

/**
 * 普通柱状图/折线图
 * @param {*} obj
 */
function drawBarOrLine(obj) {
  // 获取echarts对象
  let myChart = obj.charts;
  // 色板，默认为主题色板，可设置，设值为颜色数组
  let colorPalette = obj.config.colorPalette ||  ['#0d93ff','#0bda7c','#17d9de','#b050d7','#f6cc22','#896ae6','#58d4af','#deff5b','#fa7338','#eb473d'];

  // 图表方向，默认为纵向，可设置，取值为：'vertical'或'horizontal'
  obj.config.orient = obj.config.orient || 'vertical';

  // 封装处理系列对象
  let seriesData = [];
  let i = 0;
  for (var key in obj.data.yData) {
    seriesData.push({
      type: obj.type || 'bar',
      /**
       * 通用配置，可参考官方api
       */
      // 系列名称
      name: key,
      // 系列类型，默认为柱状图，取值范围：'bar'或'line'
      // 系列颜色
      color: colorPalette[i],
      // 图形样式，默认无
      itemStyle: obj.config.itemStyle || {},
      //折线强调阴影配置
      markArea: obj.config.markArea || {},
      // 图形上的文本标签，默认不显示
      label: obj.config.label || {
        show: true
      },
      /**
       * type为bar时的相关配置，可参考官方api
       */
      // 柱条的宽度，默认为30，取值范围为绝对值或百分比
      barWidth: obj.config.barWidth || 30,
      // 柱条堆积，默认为''，不堆积，设置相同值可以堆积
      stack: obj.config.stack || '',
      /**
       * type为line的相关配置，可参考官方api
       */
      // 是否平滑曲线
      smooth: obj.config.smooth || true,
      // 标记的图形
      symbol: obj.config.symbol || 'emptyCircle',
      // 标记的大小
      symbolSize: obj.config.symbolSize || 4,
      // 区域填充样式，设置后显示成区域面积图，默认不显示
      areaStyle: obj.config.areaStyle || {
        opacity: 0
      },
      // 系列值
      data: obj.data.yData[key],
      // 图表标线(可参照官方api)
      markLine: obj.config.markLine || {},
      // 图表标注
      markPoint: obj.config.markPoint || {}
    })
    i++;
  }
  myChart.setOption({
    color:colorPalette,
    // 标题组件（配置可参考官方api）
    title: obj.config.title || {},
    // 图例组件（配置可参考官方api）
    legend: obj.config.legend || {
      show: true,
      x: 'center',
      y: 'top',
      orient: 'horizontal'
    },
    // 提示框组件（配置可参考官方api）
    tooltip: obj.config.tooltip || {
      show: true,
      trigger: "axis",
    },
    dataZoom: obj.config.dataZoom || [],
    // 直角坐标系内绘图网格（配置可参考官方api）
    grid: obj.config.grid || {
      left: "3%",
      width: "95%",
      bottom: '15%',
      height: "70%",
      containLabel: true
    },
    // 直角坐标系x轴（配置可参考官方api）
    xAxis: {
      // 是否显示 x 轴
      show: obj.config.xAxis ? obj.config.xAxis.show : true,
      boundaryGap: obj.config.xAxis ? obj.config.xAxis.boundaryGap : true,
      // x 轴的位置
      position: 'bottom',
      // 坐标轴类型
      type: obj.config.orient === 'vertical' ? 'category' : 'value',
      // 坐标轴名称
      name: obj.config.xAxis && obj.config.xAxis.name ? obj.config.xAxis.name : '',
      // 坐标轴名称与轴线之间的距离
      nameGap: 15,
      // 是否反向坐标轴
      inverse: false,
      // 坐标轴刻度最小值
      min: obj.config.xAxis && obj.config.xAxis.min ? obj.config.xAxis.min : null,
      // 坐标轴最大值
      max: obj.config.xAxis && obj.config.xAxis.max ? obj.config.xAxis.max : null,
      // 坐标轴分割段数
      splitNumber: obj.config.xAxis && obj.config.xAxis.splitNumber ? obj.config.xAxis.splitNumber : 5,
      // 坐标轴轴线相关设置
      axisLine: obj.config.xAxis && obj.config.xAxis.axisLine ? obj.config.xAxis.axisLine : {
        show: true
      },
      // 坐标轴相关刻度设置
      axisTick: obj.config.xAxis && obj.config.xAxis.axisTick ? obj.config.xAxis.axisTick : {
        show: false
      },
      // 坐标轴刻度标签的相关设置
      axisLabel: obj.config.xAxis && obj.config.xAxis.axisLabel ? obj.config.xAxis.axisLabel : {
        show: true
      },
      // 坐标轴在 grid 区域中的分隔线
      splitLine: obj.config.xAxis && obj.config.xAxis.splitLine ? obj.config.xAxis.splitLine : {
        show: false
      },
      data: obj.config.orient === 'vertical' ? obj.data.xData : []
    },
    // 直角坐标系y轴（配置可参考官方api）
    yAxis: {
      // 是否显示 y 轴
      show: obj.config.yAxis ? obj.config.yAxis.show : true,
      // y 轴的位置
      position: 'bottom',
      // 坐标轴类型
      type: obj.config.orient === 'vertical' ? 'value' : 'category',
      // 坐标轴名称
      name: obj.config.yAxis && obj.config.yAxis.name ? obj.config.yAxis.name : '件数',
      // 坐标轴名称与轴线之间的距离
      nameGap: 15,
      // 是否反向坐标轴
      inverse: false,
      // 坐标轴刻度最小值
      min: obj.config.yAxis && obj.config.yAxis.min ? obj.config.yAxis.min : null,
      // 坐标轴最大值
      max: obj.config.yAxis && obj.config.yAxis.max ? obj.config.yAxis.max : null,
      // 坐标轴分割段数
      splitNumber: obj.config.yAxis && obj.config.yAxis.splitNumber ? obj.config.yAxis.splitNumber : 5,
      // 坐标轴轴线相关设置
      axisLine: obj.config.yAxis && obj.config.yAxis.axisLine ? obj.config.yAxis.axi