import url from "postcss-url";

class Chart {
  constructor(){
    this.mapJson = '';
    this.mapDataInfo = [];
    this.rounDisShow= true;
    this.myTimer = null,
    this.option =null,
    this.myChart = null
  }

  //饼图(环形图、玫瑰图、全饼图)
  /**
   * @id 元素 String [必传]
   * @seriesData 饼图数据 Array [必传]
   * @total 总数 number [必传]
   * @titleText 饼图中间文字 String [必传]
   * @pieColors 饼图颜色 Array [必传]
   * @titleTextNum 第一行显示几个文字 number
   * @legendSite legend显示位置 Object(key值为[left,right,top,bottom可选],value值为[百分数 或 left,right,top,bottom,center可选])
   * @legendOrient legend显示方式 String (horizontal[水平],vertical[垂直])
   * @linePadding 文字显示在线上面 Array (默认值[0,-70,20,-55])
   * @labelLineLength 第一条指示线长度 number
   * @labelLineLength2 第二条指示线长度 number
   * @legendItemWidth legend图标宽度 number
   * @legendItemHeight legend图标高度 number
   * @labelIsShow label是否显示 boolean (默认值为true)
   * @labelLineIsShow 指示线是否显示 boolean (默认值为true)
   * @pieRadius 圆环大小 Array String (默认值['35%','55%'] 其中第一值为内环大小，第二个值为外环大小) 如果是饼图的话传字符串("60%")
   * @pieCenter 饼图位置 Array (默认值['50%','40%'] 其中第一值为左右,第二个值为上下)
   * @labelShape label显示形式 number(1为纯百分比显示,2为name加数据显示)
   * @seriesName series名称 String [必传]
   * @legendTextColor legend字体颜色(默认值#f2f2f2) String
   * @legendFontSize legend字体大小(默认值14) number
   * @legendIcon legend图标种类(默认值roundRect) String (可选类型1.circle[圆形]、2.rect[正方形]、3.roundRect[带圆角正方形]、4.triangle[三角形]、5.diamond[菱形])
   * @labelFontSize label字体大小(默认值14) number
   * @labelTextColor label字体颜色(默认值#ffffff) String
   * @titleFontSize 主标题文字大小(默认值14) number
   * @titleColor 主标题字体颜色(默认值#f2f2f2) String
   * @legendLableNumberInshow legend后是否跟value boolean 选填 默认是不跟
   * @itemGap legend上下间距 Number 选填 默认值15
   * @legendIsShow legend是否显示 boolean 默认值true
   * @labelFontSize label字体大小 Number 默认值14
   * @pieType String 饼图、环形图、南丁格尔(‘allPie’，‘roundPie’,'rosePie') 如果是饼图,环形图的话可不传
   * **/
  pieChart(params, that) {
    let {
      id,
      seriesData,
      total,
      titleText,
      pieColors,
      titleTextNum = 2,
      pieType='allPie',
      legendSite = {
        bottom: "2%"
      },
      legendOrient = 'horizontal',
      linePadding,
      labelLineLength = 8,
      labelLineLength2 = 8,
      legendItemWidth = 14,
      legendItemHeight = 14,
      labelIsShow = true,
      labelLineIsShow = true,
      pieRadius = pieType=='allPie'?'60%':['35%','55%'],
      pieCenter = ['50%', '40%'],
      labelShape = 1,
      seriesName,
      legendLableNumberInshow=false,
      itemGap=10,
      legendIsShow = true,
      labelFontSize = 14,
      align = 'left'
    } = params;
    if (titleTextNum != undefined && titleText != undefined) {
      titleText = titleText.substring(0, titleTextNum) + '\n' + titleText.substring(titleTextNum)
    }
    let myCharts = that.$echarts.init(that.$refs[id]);
    let option = {
      tooltip: {
        trigger: 'item',
        backgroundColor: "none",
        border:0,
        borderWidth: 0,
        padding: 0,
        margin:0,
        textStyle:{
          color:'white',
          align: align
        },
        formatter: function (params) {
          var str='';
          str += `<div style = "background:url(${require("../assets/bjtc.png")}) no-repeat center center ;background-size:100% 100%;padding:10px 20px ">`
          str+= (
            params.seriesName +
            '<br/>' +
            // params.marker +
            params.data['name'] +
            ":" +
            '\n' +
            params.data['value'] + "(" + params.percent + "%" + ")"
          );
          return str;
        },
      },
      color: pieColors,
      title: {
        text: pieType == 'allPie'  ? '' : titleText,
        textStyle: {
          color: '#f2f2f2',
          fontSize: 18,
        },
        subtextStyle: {
          fontSize: 15,
          color: ['#ff9d19'],
        },
        x: 'center',
        y: titleTextNum == undefined ? "80" : "70"
      },
      grid: {
        bottom: 150,
        left: 100,
        right: '10%',
      },
      legend: {
        show: legendIsShow,
        orient: legendOrient,
        itemWidth: legendItemWidth,
        itemHeight: legendItemHeight,
        itemGap: itemGap,
        textStyle: {
          color: '#FFFFFF',
          fontSize: '14',
          rich: {
            uname: {
              width: 40,
              color: '#FFFFFF',
              fontSize: '14',
            },
            unum: {
              color: '#FFFFFF',
              width: 30,
              align: 'left',
              fontSize: '14',
            },

          }
        },
        formatter(name) {
          var data = seriesData
          if(legendLableNumberInshow){
            for (var i = 0; i < data.length; i++) {
              if (name === data[i].name) {
                return `{uname|${name}}{unum|${(data[i].value)}}`
              }
            }
          }else{
            return name
          }

        },
        icon: 'roundRect',
      },
      series: [
        // 主要展示层的
        {
          name: seriesName,
          radius: pieRadius,
          center: pieCenter,
          type: 'pie',
          // roseType: roseType,
          label: {
            normal: {
              show: labelIsShow,
              padding: linePadding,
              formatter: function (param) {
                if (labelShape == 1) {
                  return ((param.data.value / total) * 100).toFixed(2) + '%';
                } else if (labelShape == 2) {
                  return param.data.name + param.data.value+'\n\n';
                }
              },
              textStyle: {
                fontSize: labelFontSize,
                color: "#ffffff"
              },
              position: 'outside',
            },
            emphasis: {
              show: labelIsShow,
            },
          },
          labelLine: {
            normal: {
              show: labelLineIsShow,
              length: labelLineLength,
              length2: labelLineLength2,
            },
            emphasis: {
              show: labelIsShow,
            },
          },
          data: seriesData,
        },
      ],
    };
    for (let key in legendSite) {
      option.legend[key] = legendSite[key];
    }

    if(pieType == 'rosePie'){
      option.series[0].roseType = true
    }else{
      option.series[0].roseType = false
    }
    myCharts.setOption(option)
  }

  //折线图
  /**
   * @id 元素 String [必传]
   * @xData x轴数据 Array [必传]
   * @seriesData  series中数据 Array [必传]
   * @yAxisName y轴标题 String
   * @yAxisNameColor y轴标题颜色 String (当要设置透明度时可传rgba类型字符串)
   * @yAxisNameFontSize y轴标题字体大小 Number
   * @ySplitLineIsShow y轴背景线条是否显示 boolean (默认值为true)
   * @ySplitLineColor y轴背景线条颜色 String (当要设置透明度时可传rgba类型字符串)
   * @ySplitLineType y轴背景线类别 String (可选类型1.solid[实线]、2.dotted[虚线1]、3.dashed[虚线2])
   * @yAxisLineIsShow y轴轴线是否显示 boolean (默认值为true)
   * @yAxisLineColor y轴轴线颜色 String (当要设置透明度时可传rgba类型字符串)
   * @yAxisLabelIsShow y轴数据是否显示 boolean (默认值为true)
   * @yAxisLabelColor y轴数据颜色 String (当要设置透明度时可传rgba类型字符串)
   * @yAxisTickIsShow y轴刻度是否显示 boolean (默认值为false)
   * @yAxisTickLineColor y轴刻度线颜色 String (当要设置透明度时可传rgba类型字符串)
   * @xAxisLineIsShow x轴轴线是否显示 boolean (默认值为true)
   * @xAxisLineColor x轴轴线颜色 String (当要设置透明度时可传rgba类型字符串)
   * @xSplitLineIsShow x轴背景线条是否显示 boolean (默认值为true)
   * @xSplitLineColor x轴背景线条颜色 String (当要设置透明度时可传rgba类型字符串)
   * @xSplitLineType x轴背景线类别 String (可选类型1.solid[实线]、2.dotted[虚线1]、3.dashed[虚线2])
   * @xAxisTickIsShow x轴刻度是否显示 boolean (默认值为false)
   * @xAxisTickLineColor x轴刻度线颜色 String (当要设置透明度时可传rgba类型字符串)
   * @xAxisLabelIsShow x轴数据是否显示 boolean (默认值为true)
   * @xAxisLabelColor x轴数据颜色 String (当要设置透明度时可传rgba类型字符串)
   * @tooltipIsShow 划过提示框是否显示 boolean (默认值为true)
   * @tooltipLineColor 指示线颜色 String
   * @tooltipLineGlobal 指示线是否显示 boolean (默认值为false显示)
   * @boundaryGap 坐标轴两端是否空白  boolean (默认值为true留白)
   * @legendIsShow legend是否显示 boolean (默认值为true)
   * @legendSite legend显示位置 Object(key值为[left,right,top,bottom可选],value值为[百分数 或 left,right,top,bottom,center可选])
   * @legendTextColor legend字体颜色(默认值#f2f2f2) String
   * @legendFontSize legend字体大小(默认值14) number
   * @legendIcon legend图标种类(默认值roundRect) String (可选类型1.circle[圆形]、2.rect[正方形]、3.roundRect[带圆角正方形]、4.triangle[三角形]、5.diamond[菱形])
   * 需要定义在页面级的参数
   * @isSmooth 线条是否平滑显示 boolean (默认值为false)
   * @isShowSymbol 是否显示数据点 boolean (默认值为true)
   * @symbolType 数据点显示类型 String (默认值为emptyCircle[空心]、可选值circle实心)
   * @symbolSize 数据点大小 Number
   * @lineWidth 线条宽度 Number
   * @lineColor 线条颜色 String (当要设置透明度时可传rgba类型字符串)
   * @symbolColor 数据点颜色 String (当要设置透明度时可传rgba类型字符串)
   * @areaStartColor 阴影部分开始颜色 String (当要设置透明度时可传rgba类型字符串)
   * @areaEndColor 阴影部分结束颜色 String (当要设置透明度时可传rgba类型字符串)
   * @areaIsShow 阴影部分是否显示 boolean (默认值为false显示)
   * @areaX2 阴影部分变化值(x轴方向0-1) Number
   * @areaY2 阴影部分变化值(y轴方向0-1) Number
   * **/
  lineChart(params,that){
    let {
      id,
      xData,
      yAxisName,
      yAxisNameColor = '#ffffff',
      yAxisNameFontSize = 14,
      ySplitLineIsShow = true,
      ySplitLineColor = '#053659',
      ySplitLineType = 'solid',
      yAxisLineIsShow = true,
      yAxisLineColor = '#053659',
      yAxisLabelIsShow = true,
      yAxisLabelColor = '#ffffff',
      yAxisTickIsShow = false,
      yAxisTickLineColor = '#ffffff',
      xAxisLineIsShow = true,
      xAxisLineColor = '#053659',
      xSplitLineIsShow = false,
      xSplitLineColor = '#053659',
      xSplitLineType = 'solid',
      xAxisTickIsShow = false,
      xAxisTickLineColor = '#ffffff',
      xAxisLabelIsShow = true,
      xAxisLabelColor = '#ffffff',
      seriesData,
      tooltipIsShow = true,
      tooltipLineColor = 'rgba(255,255,255)',
      tooltipLineGlobal = false,
      boundaryGap = true,
      legendIsShow = true,
      legendSite = {
        top:"2%"
      },
      legendTextColor = '#f2f2f2',
      legendFontSize = 16,
      align = 'left'
    } = params;
    let myCharts = that.$echarts.init(that.$refs[id]);
    let option = {
      tooltip: {
        show:tooltipIsShow,
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: tooltipLineColor.replace(")",",0)"), // 0% 处的颜色
                },
                {
                  offset: 0.5,
                  color: tooltipLineColor.replace(")",",1)"), // 50% 处的颜色
                },
                {
                  offset: 1,
                  color: tooltipLineColor.replace(")",",0)"), // 100% 处的颜色
                },
              ],
              global: tooltipLineGlobal,
            },
          },
        },
        backgroundColor: "none",
        border:0,
        borderWidth: 0,
        padding: 0,
        margin:0,
        textStyle:{
          color:'white',
          align: align
        },
        formatter: function(params) {
          let str=''
          str += `<div style = "background:url(${require("../assets/bjtc.png")}) no-repeat center center ;background-size:100% 100%;padding:10px 20px ">`
          str+="<p>"+params[0].name+"</p>"
          for(var i=0;i<params.length;i++){
            str += `
            <div><span>${params[i].marker}</span><span style="margin-left:5px">${params[i].seriesName}</span><span style="margin-left:10px">${params[i].value}</span></div>`
          }
          str +=`</div>`
          return str;
        }
    },
      legend: {
        show:legendIsShow,
        textStyle:{
          color:legendTextColor,
          fontSize:legendFontSize
        }
      },
      grid: {
        top: '18%',
        left: '8%',
        right: '5%',
        bottom: '25%',
      },
      xAxis: [{
        type: 'category',
        boundaryGap: boundaryGap,
        axisLine: {
          show: xAxisLineIsShow,
          lineStyle: {
            color: xAxisLineColor
          },
        },
        splitLine: {
          show: xSplitLineIsShow,
          lineStyle: {
            type: xSplitLineType,
            color: xSplitLineColor
          }
        },
        axisLabel: {
          show: xAxisLabelIsShow,
          textStyle: {
            color: xAxisLabelColor,
          },
        },
        axisTick: {
          show: xAxisTickIsShow,
          lineStyle: {
            color: xAxisTickLineColor,
          },
        },
        data: xData,
      }],
      yAxis: [{
        name: yAxisName,
        nameTextStyle: {
          color: yAxisNameColor,
          fontSize: yAxisNameFontSize,
        },
        type: 'value',
        min: 0,
        // splitNumber: 4,
        splitLine: {
          show: ySplitLineIsShow,
          lineStyle: {
            type: ySplitLineType,
            color: ySplitLineColor
          }
        },
        axisLine: {
          show: yAxisLineIsShow,
          lineStyle: {
            color: yAxisLineColor
          },
        },
        axisLabel: {
          show: yAxisLabelIsShow,
          textStyle: {
            color: yAxisLabelColor,
          },
        },
        axisTick: {
          show: yAxisTickIsShow,
          lineStyle: {
            color: yAxisTickLineColor,
          },
        },
      }],
      series: []
    };
    option.series = this.getSeries(seriesData,that);
    for(let key in legendSite){
      option.legend[key] = legendSite[key];
    }
    myCharts.setOption(option)
  }
  getSeries(data,that){
    let arr = [];
    for(let i =0;i<data.length;i++){
      let option =  {
        name: data[i].name,
        type: 'line',
        smooth: data[i].isSmooth?true:false, //是否平滑曲线显示
        showSymbol:data[i].isShowSymbol?true:false,//是否显示Symbol
        symbol:data[i].symbolType,  // 默认是空心圆（中间是白色的），改成实心圆
        symbolSize: data[i].symbolSize?data[i].symbolSize:8,
        itemStyle: {
          normal: {
            color: data[i].symbolColor?data[i].symbolColor:data[i].symbolColor='#04cdf4',
            lineStyle: {
              width: data[i].lineWidth?data[i].lineWidth:2,
              color: data[i].lineColor?data[i].lineColor:data[i].symbolColor,
            },
          }
        },
        areaStyle: {
          normal: {
            color: new that.$echarts.graphic.LinearGradient(
              0,
              0,
              data[i].areaX2?data[i].areaX2:0,
              data[i].areaY2?data[i].areaY2:1,
              [
                {
                  offset: 0,
                  color: data[i].areaStartColor?data[i].areaStartColor:data[i].areaStartColor = 'rgba(88,255,255,0.2)'
                },
                {
                  offset: 1,
                  color: data[i].areaEndColor?data[i].areaEndColor:data[i].areaEndColor = 'rgba(88,255,255,0)'
                },
              ],
              !data[i].areaIsShow?!data[i].areaIsShow:false
            ),
          },
        },
        data:data[i].data
      };
      let markLine={
        data:[{
          type:'average',
          name:'平均值'
        }]
      }
      if(data[i].markLine){
        that.$set(option,'markLine',markLine)
      }else{
        that.$set(option,'markLine','')
      }
      arr.push(option)
    }
    return arr
  }

  /**
   *
   * @id  表示传入的id名称 （必传值）
   * @xData 表示x轴坐标数据 （必传值）
   * @datas 表示柱状图的value值 （必传值）包含在seriesData中
   * @colorStart 表示渐变色的起始颜色 （必传值）包含在seriesData中
   * @colorEnd 表示渐变色的结束颜色 （必传值）包含在seriesData中
   * @textNum 表示x轴一行显示字数
   * @isRotate 表示x轴字体是否倾斜，默认不倾斜为false，倾斜为true
   * @barWidth 表示柱状图宽度 包含在seriesData中
   * @name 表示图例文字 （必传值）包含在seriesData中
   * @barBorderRadius 表示柱状图是否为圆角，默认值为true不为圆角，false为圆角 （必传值）包含在seriesData中
   * @xDataColor 表示x轴字体的颜色
   * @yDataColor 表示y轴字体的颜色
   * @xAxisLineColor 表示x轴线条颜色
   * @yAxisLineColor 表示y轴线条颜色
   * @isXAxisLineShow 表示x轴线条是否显示
   * @isYAxisLineShow 表示y轴线条是否显示
   * @xFontSize 表示x轴坐标字体大小
   * @yFontSize 表示y轴坐标字体大小
   * @ySplitLineColor 表示y轴背景线的颜色
   * @ySplitLineType 表示y轴背景线的样式  默认为点划线边框 dashed为点划线，dotted为虚线，solid为实线
   * @icon 表示图例的样式，默认为正方形，circle为圆形，roundRect为带圆角正方形，triangle为三角形，diamond为菱形
   * @right 表示图例离右边的距离
   * @top 表示图例离上边的距离
   * @lengendFontSize 表示图例字体大小
   * @lengendColor 表示图例字体颜色
   * @itemWidth 表示图例宽度
   * @itemHeight 表示图例高度
   * @itemGap 表示图例与图例之间的距离
   * @isLabelShow 表示柱状图的数值是否显示 包含在seriesData中
   * @labelPosition 表示柱状图数值的位置 包含在seriesData中
   * @labelColor 表示柱状图数值的颜色 包含在seriesData中
   * @labelFontSize 表示柱状图数值字体大小 包含在seriesData中
   * @markLine 表示柱状图是否有平均值
   * @align 文字对齐方式 left，center，right
   */
  //柱状图
  chartsBar(params,that){
    let {
      id,
      xData,
      textNum=5,
      seriesData,
      isRotate = false,
      xDataColor='white',
      yDataColor='#7CC5F7',
      xAxisLineColor= 'rgba(255,255,255,0.2)',
      yAxisLineColor='rgba(255,255,255,0.2)',
      isXAxisLineShow=true,
      isYAxisLineShow=true,
      xFontSize=14,
      yFontSize=14,
      ySplitLineColor='#012060',
      ySplitLineType='dashed' ,
      icon='rect' ,
      right=10,
      top=12,
      lengendFontSize=12,
      lengendColor='#fff',
      itemWidth=10,
      itemHeight=10,
      itemGap=30,
      align='left'
    }
      = params;

    let myCharts = that.$echarts.init(that.$refs[id]);
    let option = {
      tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          backgroundColor: "none",
          border:0,
          borderWidth: 0,
          padding: 0,
          margin:0,
          textStyle:{
            color:'white',
            align:align
          },
          formatter: function(params) {
            let str=''
            str += `<div style = "background:url(${require("../assets/bjtc.png")}) no-repeat center center ;background-size:100% 100%;padding:10px 20px ">`
            str+="<p>"+params[0].name+"</p>"
            for(var i=0;i<params.length;i++){
              str += `
              <div><span>${params[i].marker}</span><span style="margin-left:5px">${params[i].seriesName}</span><span style="margin-left:10px">${params[i].value}</span></div>`
            }
            str +=`</div>`
            return str;
          }
      },
      grid: {
        left: '4%',
        right: '4%',
        bottom: '10%',
        top: '16%',
        containLabel: true
      },
      legend: {
        show: true,
        icon: icon,
        right: right,
        top:top,
        textStyle: {
          fontSize:lengendFontSize,
          color: lengendColor
        },
        itemWidth: itemWidth,
        itemHeight: itemHeight,
        itemGap: itemGap
      },
      xAxis: {
        type: 'category',
        data: xData,//x轴左边lable
        axisLine: {
          show:isXAxisLineShow,
          lineStyle: {
            color: xAxisLineColor
          }
        },
        "axisTick": {
          "show": false
        },
        axisLabel: {
          interval: 0,
          rotate: isRotate?40:0,
          textStyle: {
            color: xDataColor,
            fontFamily: 'Microsoft YaHei',
            fontSize:xFontSize
          },
          formatter:function(params){
            var newParamsName = "";// 最终拼接成的字符串
            var paramsNameNumber = params.length;// 实际标签的个数
            var provideNumber = textNum;// 每行能显示的字的个数
            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
            /**
             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
             */
            // 条件等同于rowNumber>1
            if (paramsNameNumber > provideNumber) {
              /** 循环每一行,p表示行 */
              for (var p = 0; p < rowNumber; p++) {
                var tempStr = "";// 表示每一次截取的字符串
                var start = p * provideNumber;// 开始截取的位置
                var end = start + provideNumber;// 结束截取的位置
                // 此处特殊处理最后一行的索引值
                if (p == rowNumber - 1) {
                  // 最后一次不换行
                  tempStr = params.substring(start, paramsNameNumber);
                } else {
                  // 每一次拼接字符串并换行
                  tempStr = params.substring(start, end) + "\n";
                }
                newParamsName += tempStr;// 最终拼成的字符串
              }

            } else {
              // 将旧标签的值赋给新标签
              newParamsName = params;
            }
            //将最终的字符串返回
            return newParamsName
          }

        },
      },

      yAxis: {
        type: 'value',
        axisLine: {
          show: isYAxisLineShow,
          lineStyle: {
            color: yAxisLineColor
          }
        },
        "splitArea": {
          "show": false
        },
        "axisTick": {
          "show": false
        },
        splitLine: {
          lineStyle:{
            color: ySplitLineColor,
            type: ySplitLineType    //设置网格线类型 dotted：虚线   solid:实线
          },
          show:true //隐藏或显示
        },
        "axisLabel": {
          "interval": 0,
          textStyle: {
            color: yDataColor,
            fontSize:yFontSize
          },
        },
      },

      series: []
    };
    option.series = this.chartsB(seriesData,that)
    myCharts.setOption(option);
  }
  chartsB(data,that){
    let arr=[];
    for(let i in data){
      let option={
        name: data[i].name,
        type: 'bar',
        barWidth: data[i].barWidth?data[i].barWidth:16,
        itemStyle: {
          normal: {
            color: new that.$echarts.graphic.LinearGradient(
              0,
              data[i].areaY1?data[i].areaY1:1,   //纵向渐变
              data[i].areaX2?data[i].areaX2:0,   //横向渐变
              0, [{
                offset:0,
                color: data[i].colorStart?data[i].colorStart:'#37FFAF'
              }, {
                offset: 1,
                color: data[i].colorEnd?data[i].colorEnd:'#37FFAF'
              }]),
            barBorderRadius: data[i].barBorderRadius?12:data[i].barBorderRadius,
            label:{
              show:data[i].isLabelShow?data[i].isLabelShow:false,
              position:data[i].labelPosition?data[i].labelPosition:'top',
              textStyle:{
                color:data[i].labelColor?data[i].labelColor:'white',
                fontSize:data[i].labelFontSize?data[i].labelFontSize:12
              }
            }
          },

        },
        data: data[i].datas//数据
      }
      if(data[i].markLine){
        option.markLine={
          data:[
            {
              type:'average',
              name:'平均值'
            }
          ]
        }
      }
      arr.push(option)
    }
    return arr
  }

  /**
   *
   * @id  表示传入的id名称 （必传值）
   * @xData 表示x轴坐标数据 （必传值）
   * @datas 表示柱状图的value值 （必传值）包含在seriesData中
   * @colorStart 表示渐变色的起始颜色 （必传值）包含在seriesData中
   * @colorEnd 表示渐变色的结束颜色 （必传值）包含在seriesData中
   * @textNum 表示x轴一行显示字数
   * @isRotate 表示x轴字体是否倾斜，默认不倾斜为false，倾斜为true
   * @barWidth 表示柱状图宽度 包含在seriesData中
   * @name 表示图例文字 （必传值）包含在seriesData中
   * @barBorderRadius 表示柱状图是否为圆角，默认值为true不为圆角，false为圆角 （必传值）包含在seriesData中
   * @xDataColor 表示x轴字体的颜色
   * @yDataColor 表示y轴字体的颜色
   * @xAxisLineColor 表示x轴线条颜色
   * @yAxisLineColor 表示y轴线条颜色
   * @isXAxisLineShow 表示x轴线条是否显示
   * @isYAxisLineShow 表示y轴线条是否显示
   * @xFontSize 表示x轴坐标字体大小
   * @yFontSize 表示y轴坐标字体大小
   * @ySplitLineColor 表示y轴背景线的颜色
   * @ySplitLineType 表示y轴背景线的样式  默认为点划线边框 dashed为点划线，dotted为虚线，solid为实线
   * @icon 表示图例的样式，默认为正方形，circle为圆形，roundRect为带圆角正方形，triangle为三角形，diamond为菱形
   * @right 表示图例离右边的距离
   * @top 表示图例离上边的距离
   * @lengendFontSize 表示图例字体大小
   * @lengendColor 表示图例字体颜色
   * @itemWidth 表示图例宽度
   * @itemHeight 表示图例高度
   * @itemGap 表示图例与图例之间的距离
   * @isLabelShow 表示柱状图的数值是否显示 包含在seriesData中
   * @labelPosition 表示柱状图数值的位置 包含在seriesData中
   * @labelColor 表示柱状图数值的颜色 包含在seriesData中
   * @labelFontSize 表示柱状图数值字体大小 包含在seriesData中
   * @markLine 表示柱状图是否有平均值
   * @symbolSize 表示标记的图形大小
   * @symbol 表示标记的图形样式  'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'none'
   * @areaColorStart 表示阴影部分的起始颜色
   * @areaColorEnd 表示阴影部分的结束颜色
   * @smooth 表示折线是否平滑 true为平滑，false不平滑
   * @dotColor 表示折线点的颜色
   * @areaIsShow 表示面积阴影部分是否显示  默认为false（显示）  true为不显示
   * @areaY1，areaX2  当type为'line'，areaY1为1时，areaX2为0时表示面积阴影部分纵向渐变；areaY1为0时，areaX1为0时表示面积阴影部分横向渐变；当type为'bar'，areaY1为1时，areaX2为0时表示柱状图纵向渐变；areaY1为0时，areaX1为0时表示柱状图横向渐变
   * @lineStyleWidth 表示折线图的宽度
   * @align 文字对齐方式 left，center，right
   *
   */
  //折状混合
  chartsMix(params,that){
    let {
      id,
      xData,
      seriesData,
      icon='rect' ,
      right=10,
      top=12,
      lengendFontSize=12,
      lengendColor='#fff',
      itemWidth=10,
      itemHeight=10,
      itemGap=30,
      xDataColor='white',
      yDataColor='#7CC5F7',
      xAxisLineColor= 'rgba(255,255,255,0.2)',
      yAxisLineColor='rgba(255,255,255,0.2)',
      isXAxisLineShow=true,
      isYAxisLineShow=true,
      xFontSize=14,
      yFontSize=14,
      ySplitLineColor='#012060',
      ySplitLineType='dashed',
      isRotate,
      align='left'

    } = params
    let myCharts = that.$echarts.init(that.$refs[id]);
    let option = {
     tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        textStyle:{
          color:'white',
          align:align
        },
        backgroundColor: "none",
        border:0,
        borderWidth: 0,
        padding: 0,
        margin:0,
        formatter: function(params) {
          let str=''
          str += `<div style = "background:url(${require("../assets/bjtc.png")}) no-repeat center center ;background-size:100% 100%;padding:10px 20px ">`
          str+="<p>"+params[0].name+"</p>"
          for(var i=0;i<params.length;i++){
            str += `
            <div><span>${params[i].marker}</span><span style="margin-left:5px">${params[i].seriesName}</span><span style="margin-left:10px">${params[i].value}</span></div>`
          }
          str +=`</div>`
          return str;
        }
      },
      grid:{
        left:"4%",
        top:"10px",
        right:"0%",
        bottom:"8%",
        containLabel:true
      },
      legend: {
        show: true,
        icon: icon,
        right: right,
        top:top,
        textStyle: {
          fontSize:lengendFontSize,
          color: lengendColor
        },
        itemWidth: itemWidth,
        itemHeight: itemHeight,
        itemGap: itemGap
      },
      xAxis: [
        {
          type: 'category',
          data: xData,
          axisPointer: {
            type: 'shadow'
          },
          axisLabel:{
            interval:0,//横轴信息全部显示
            rotate: isRotate?40:0,
            textStyle: {
              color: xDataColor,
              fontFamily: 'Microsoft YaHei',
              fontSize:xFontSize
            },

          },
          axisLine: {
            show:isXAxisLineShow,
            lineStyle: {
              color: xAxisLineColor
            }
          },
          "axisTick": {
            "show": false
          },
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLine: {
            show: isYAxisLineShow,
            lineStyle: {
              color: yAxisLineColor
            }
          },
          "splitArea": {
            "show": false
          },
          "axisTick": {
            "show": false
          },
          splitLine: {
            lineStyle:{
              color: ySplitLineColor,
              type: ySplitLineType    //设置网格线类型 dotted：虚线   solid:实线
            },
            show:true //隐藏或显示
          },
          "axisLabel": {
            "interval": 0,
            textStyle: {
              color: yDataColor,
              fontSize:yFontSize
            },
          },
        }
      ],
      series: []
    };
    option.series = this.chartM(seriesData,that)
    myCharts.setOption(option);
  }
  chartM(data,that){
    let arr=[];
    for(let i in data){
      if(data[i].type=='bar'){
        let option={
          name: data[i].name,
          type: data[i].type,
          barWidth: data[i].barWidth?data[i].barWidth:16,
          itemStyle: {
            normal: {
              color: new that.$echarts.graphic.LinearGradient(
                0,
                data[i].areaY1?data[i].areaY1:1,   //纵向渐变
                data[i].areaX2?data[i].areaX2:0,   //横向渐变
                0,
                [{
                  offset:0,
                  color: data[i].colorStart?data[i].colorStart:'#37FFAF'
                }, {
                  offset: 1,
                  color: data[i].colorEnd?data[i].colorEnd:'#37FFAF'
                }]),
              barBorderRadius: data[i].barBorderRadius?12:data[i].barBorderRadius,
              label:{
                show:data[i].isLabelShow?data[i].isLabelShow:false,
                position:data[i].labelPosition?data[i].labelPosition:'top',
                textStyle:{
                  color:data[i].labelColor?data[i].labelColor:'white',
                  fontSize:data[i].labelFontSize?data[i].labelFontSize:12
                }
              }
            },

          },
          data: data[i].datas//数据
        }
        if(data[i].markLine){
          option.markLine={
            data:[
              {
                type:'average',
                name:'平均值'
              }
            ]
          }
        }
        arr.push(option)
      }else if(data[i].type=='line'){
        let option={
          name: data[i].name,
          type: data[i].type,
          symbolSize: data[i].symbolSize?data[i].symbolSize:5,
          areaStyle: {
            normal: {
              color: new that.$echarts.graphic.LinearGradient(
                0,
                data[i].areaY1?data[i].areaY1:0,   //纵向渐变
                data[i].areaX2?data[i].areaX2:1,   //横向渐变
                0,
                [
                  {
                    offset: 0,
                    color: data[i].areaColorStart?data[i].areaColorStart:'rgba(228,255,0,0.3)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: data[i].areaColorEnd?data[i].areaColorEnd:'rgba(0,255,241,0.1)' // 100% 处的颜色
                  },
                ],
                data[i].areaIsShow?data[i].areaIsShow:false
              ),
            },
          },
          symbol:data[i].symbol?data[i].symbol:'circle',
          smooth:data[i].smooth?data[i].smooth:false,
          itemStyle: {
            normal: {
              color: data[i].dotColor?data[i].dotColor:'#00C7A5',//折线点的颜色
              lineStyle: {
                width:data[i].lineStyleWidth?data[i].lineStyleWidth:2,
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [{
                    offset: 0, color: data[i].colorStart?data[i].colorStart:'#00FFF1' // 0% 处的颜色
                  }, {
                    offset: 1, color: data[i].colorEnd?data[i].colorEnd:'#E4FF00' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                },
                opacity:data[i].lineOpacity?data[i].lineOpacity:1
              }
            }
          },
          data:data[i].datas
        }
        if(data[i].markLine){
          option.markLine={
            data:[
              {
                type:'average',
                name:'平均值'
              }
            ]
          }
        }
        arr.push(option)
      }
    }
    return arr
  }

  //双向柱状图
  /**
   * @id  表示传入的id名称 String （必传值）
   * @name 图表数据名称  Array（必传值）
   * @seriseDataLeft  左侧图表数据 Array(必传值)
   * @seriseDataRight  右侧图表数据 Array(必传值)
   * @tooltipIsShow  tooltip是否显示 boolean (默认值true)
   * @tooltipFontSize  tooltip字体大小 Number (默认值14)
   * @tooltipColor  tooltip字体颜色 String (默认值#ffffff)
   * @legendIsShow  legend是否显示 boolean (默认值true)
   * @legendIcon   legend图例显示类型 String  (默认值rect正方形  可选类型circle为圆形，roundRect为带圆角正方形，triangle为三角形，diamond为菱形)
   * @legendSite legend显示位置 Object(key值为[left,right,top,bottom可选],value值为[百分数 或 left,right,top,bottom,center可选])
   * @legendItemWidth legend图标宽度 Number (默认值10)
   * @legendItemHeight legend图标高度 Number (默认值10)
   * @legendItemGap legend间距 Number (默认值30)
   * @legendFontSize legend字体大小 Number (默认值12)
   * @legendColor legend字体颜色 String (默认值#ffffff)
   * @yAxisData 中间文字 Array
   * @leftBarLabelPosition 左侧图例label显示位置 String (默认值left,可选类型left、right、top、bottom)
   * @leftBarLabelIsShow 左侧图例label是否显示 boolean (默认值true)
   * @leftBarLabelFontSize 左侧图例label字体大小 Number (默认值12)
   * @leftBarLabelColor 左侧图例label字体颜色 String (默认值#ffffff)
   * @leftBarColor 左侧图例颜色 String (默认值#00F6FF)
   * @leftBarWidth 左侧图例宽度 Number (默认值10)
   * @rightBarLabelPosition 右侧图例label显示位置 String (默认值right,可选类型left、right、top、bottom)
   * @rightBarLabelIsShow 右侧图例label是否显示 boolean (默认值true)
   * @rightBarLabelFontSize 右侧图例label字体大小 Number (默认值12)
   * @rightBarLabelColor 右侧图例label字体颜色 String (默认值#ffffff)
   * @rightBarColor 右侧图例颜色 String (默认值#FFEA00)
   * @rightBarWidth 右侧图例宽度 Number (默认值10)
   * @axisLabelPadding 调整中间文字位置 Array (默认值[0, 0, 0, 135])
   * @axisLabelIsShow 中间文字是否显示 boolean (默认值true)
   * @axisLabelFontSize 中间文字大小 Number (默认值12)
   * @axisLabelColor 中间文字颜色 String (默认值#ffffff)
   * **/
  twoWayBar(params,that){
    let {
      id,
      name,
      seriseDataLeft,
      seriseDataRight,
      tooltipIsShow = true,
      tooltipFontSize = 14,
      tooltipColor = 'white',
      legendIsShow = true,
      legendIcon = "rect",
      legendSite = {
        "right": "5%",
        "top": "5%",
      },
      legendItemWidth = 10,
      legendItemHeight = 10,
      legendItemGap = 30,
      legendFontSize = 12,
      legendColor = '#ffffff',
      yAxisData,
      leftBarLabelPosition = 'left',
      leftBarLabelIsShow = true,
      leftBarLabelFontSize = 12,
      leftBarLabelColor = '#ffffff',
      leftBarColor = '#00F6FF',
      leftBarWidth = 10,
      rightBarColor = '#FFEA00',
      rightBarLabelPosition = 'right',
      rightBarLabelIsShow = true,
      rightBarLabelFontSize = 12,
      rightBarLabelColor = '#ffffff',
      rightBarWidth = 10,
      axisLabelPadding = [0, 0, 0, 135],
      axisLabelIsShow = true,
      axisLabelFontSize = 12,
      axisLabelColor = '#ffffff',
      align = 'left'
    } = params;
    let myCharts = that.$echarts.init(that.$refs[id]);
    let option = {
      tooltip: {
        show:tooltipIsShow,
        trigger: 'item',
        textStyle: {
          fontSize: tooltipFontSize,
          color:tooltipColor,
          align: align
        },
        backgroundColor: "none",
        border:0,
        borderWidth: 0,
        padding: 0,
        margin:0,
        formatter: function (params) {
          var str='';
          str += `<div style = "background:url(${require("../assets/bjtc.png")}) no-repeat center center ;background-size:100% 100%;padding:10px 20px ">`
          str+= (
            params.seriesName +
            '<br/>' +
            // params.marker +
            params.name +
            ":" +
            '\n' +
            params.value
          );
          return str;
        },
      },
      "legend": {
        "show": legendIsShow,
        "icon":legendIcon,
        "data": name,
        "itemWidth": legendItemWidth,
        "itemHeight": legendItemHeight,
        "itemGap": legendItemGap,
        "textStyle": {
          "fontSize": legendFontSize,
          "color": legendColor,
        },
      },
      "grid": [
        {
          "left": "10%",
          "right": "60%",
          "top": 30,
          "bottom": "10"
        },
        {
          "left": "60%",
          "right": "10%",
          "top": 30,
          "bottom": "10"
        },
        {
          "left": "80%",
          "right": "10%",
          "top": 30,
          "bottom": "10"
        }
      ],
      "xAxis": [
        {
          "type": "value",
          "gridIndex": 0,
          "inverse": true,
          // padding:[20,20,20,20],
          "axisLine": {
            "show": false,
            "lineStyle": {
              "width": 1,
              "type": "solid",
              "color": "red"
            }
          },
          "splitLine": {
            "show": false,
            "lineStyle": {
              "type": "dotted",
              "color": "#ccc",
              "width": 1
            }
          },
          "axisTick": {
            "show": false,
            "lineStyle": {
              "width": 1,
              "type": "solid",
              "color": "#fff"
            }
          },
          "axisLabel": {
            "show": false,
            "fontFamily": "Microsoft YaHei",
            "fontSize": 20,
            "color": "fff",
            "interval": "auto",
            "rotate": "0",
          },
          "data": [],
        }, {
          "type": "value",
          "gridIndex": 1,
          "inverse": false,
          "axisLine": {
            "show": false,
            "lineStyle": {
              "width": 1,
              "type": "solid",
              "color": "red"
            }
          },
          "splitLine": {
            "show": false,
            "lineStyle": {
              "type": "dotted",
              "color": "red",
              "width": 1
            }
          },
          "axisTick": {
            "show": false,
            "lineStyle": {
              "width": 1,
              "type": "solid",
              "color": "red"
            }
          },
          "axisLabel": {
            "show": false,
            "fontFamily": "Microsoft YaHei",
            "fontSize": 12,
            "color": "#fff",
            "interval": "auto",
            "rotate": "0"
          },
          "data": [],
        }, {
          "type": "value",
          "gridIndex": 2,
          "inverse": false,
          "axisLine": { //只有这个
            "show": false,
            "lineStyle": {
              "width": 1,
              "type": "solid",
              "color": "red"
            }
          },
          "splitLine": {
            "show": false,
            "lineStyle": {
              "type": "dotted",
              "color": "#ccc",
              "width": 1
            }
          },
          "axisTick": {
            "show": false,
            "lineStyle": {
              "width": 1,
              "type": "solid",
              "color": "red"
            }
          },
          "axisLabel": {
            "show": false,
            "fontFamily": "Microsoft YaHei",
            "fontSize": 12,
            "color": "red",
            "interval": "auto",
            "rotate": "0"
          },
          "data": [],
        }],
      "yAxis": [{
        "type": "category",
        "gridIndex": 0,
        "axisLine": {
          "show": false,
          "lineStyle": {
            "width": 1,
            "type": "solid",
            "color": "red"
          }
        },
        "splitLine": {
          "show": false,
          "lineStyle": {
            "type": "dotted",
            "color": "#ccc",
            "width": 1
          }
        },
        "axisTick": {
          "show": false,
          "lineStyle": {
            "width": 1,
            "type": "solid",
            "color": "#888888"
          }
        },
        "axisLabel": {
          "show": axisLabelIsShow,
          "fontSize": axisLabelFontSize,
          "color": axisLabelColor,
          "align": "center",
          "interval": "auto",
          "padding": axisLabelPadding
        },

        "data": yAxisData,
        "position": "right"
      }, {
        "type": "category",
        "gridIndex": 1,
        "axisLine": {
          "show": false,
          "lineStyle": {
            "width": 1,
            "type": "solid",
            "color": "#888888"
          }
        },
        "splitLine": {
          "show": false,
          "lineStyle": {
            "type": "dotted",
            "color": "#ccc",
            "width": 1
          }
        },
        "axisTick": {
          "show": false,
          "lineStyle": {
            "width": 1,
            "type": "solid",
            "color": "#888888"
          }
        },
        "axisLabel": {
          "show": false,
          "fontFamily": "Microsoft YaHei",
          "fontSize": 12,
          "color": "#fff",
          "interval": "auto"
        },
        "data": yAxisData,

      }, {
        "type": "category",
        "gridIndex": 2,
        "axisLine": {
          "show": false,
          "lineStyle": {
            "width": 1,
            "type": "solid",
            "color": "#888888"
          }
        },
        "splitLine": {
          "show": false,
          "lineStyle": {
            "type": "dotted",
            "color": "#ccc",
            "width": 1
          }
        },
        "axisTick": {
          "show": true,
          "lineStyle": {
            "width": 1,
            "type": "solid",
            "color": "#888888"
          }
        },
        "axisLabel": {
          "show": true,
          "fontFamily": "Microsoft YaHei",
          "fontSize": 20,
          "color": "#777575",
          "interval": "auto"
        }
      }],
      "series": [{
        "colId": "col402utokg",
        "name": name[0],
        "type": "bar",
        //  type: 'pictorialBar',
        //  symbol: 'images', //可以使用自定义图片作为柱状图形
        //  symbol: 'image://' + BASE_PATH + '/pages/transportation/pages/supply/img/qianlvzz.png',
        "stack": null,
        "data": seriseDataLeft,
        barWidth: leftBarWidth,
        color: leftBarColor,
        "xAxisIndex": 0,
        "yAxisIndex": 0,
        "label": {
          "position": leftBarLabelPosition,
          "show": leftBarLabelIsShow,
          "fontSize": leftBarLabelFontSize,
          "color": leftBarLabelColor
        }
      }, {
        "colId": "col3kkgr6h9",
        "name": name[1],
        "type": "bar",
        //  type: 'pictorialBar',
        //  symbol: 'images',  //可以使用自定义图片作为柱状图形
        //  symbol: 'image://' + BASE_PATH + '/pages/transportation/pages/supply/img/qianlanzz.png',
        "stack": null,
        "data": seriseDataRight,
        barWidth: rightBarWidth,
        color: rightBarColor,
        "xAxisIndex": 1,
        "yAxisIndex": 1,
        "label": {
          "position": rightBarLabelPosition,
          "show": rightBarLabelIsShow,
          "fontSize": rightBarLabelFontSize,
          "color": rightBarLabelColor
        }
      }],
    };
    for(let key in legendSite){
      option.legend[key] = legendSite[key];
    }
    myCharts.setOption(option);
  }

  //水球图
  /**
   *@id 表示传入的id名称
  * @radius 表示水球图的大小
  * @centerX 表示水球图横向位置
  * @centerY 表示水球图纵向位置
  * @colorY，colorX   colorY为1，colorX为0时，表示水球图颜色纵向渐变；colorY为0，colorX为1时，表示水球图颜色横向渐变
  * @value1 表示第一个波浪的大小
  * @value1 表示第二个波浪的大小
  * @borderWidth 表示边框宽度
  * @borderColor 表示边框颜色
  * @backgroundColor 表示背景颜色
  * @percent 表示外圆显示角度大小
  * @fontSize 表示文字大小
  * @color 表示文字字体颜色
  * @outlineIsShow 表示外边框是否显示
  * @radiusX，radiusY 表示外圆的大小
  * @polarCenterX 表示外圆的横向位置
  * @polarCenterY 表示外圆的纵向位置
  * @outColorStart 表示外圆初始渐变颜色
  * @outColorEnd 表示外圆结束渐变颜色
  */
  liquid(params,that){
    let {
      id,
      radius = '70%',
      centerX = '50%',
      centerY = '50%',
      colorY = 0,
      colorX = 1,
      colorStart = '#16FFF1',
      colorEnd = '#37D3FF',
      value1 = 0.5,
      value2 = 0.5,
      borderWidth = 1,
      borderColor = 'rgba(55, 211, 255, 0.42)',
      backgroundColor = 'rgba(12, 41, 49, 0.6)',

      fontSize = 40,
      color = 'white',
      outlineIsShow = false,
      radiusX = '80%',
      radiusY = '70%',
      polarCenterX = '50%',
      polarCenterY = '50%',
      percent = 80,
      value = percent/100,
      outColorStart = '#585fe1',
      outColorEnd = '#0ff'
    } = params;
    let myCharts = that.$echarts.init(that.$refs[id]);
    let option = {
      title: {
          text: '',
      },
      polar: {
        radius: [radiusX, radiusY],
        center: [polarCenterX, polarCenterY],
    },
    angleAxis: {
        max: 100,
        show: false,
    },
    radiusAxis: {
        type: 'category',
        show: true,
        axisLabel: {
            show: false,
        },
        axisLine: {
            show: false,

        },
        axisTick: {
            show: false
        },
    },
      series: [
          {
              type: 'liquidFill',
              radius: radius,
              center: [centerX, centerY],
              color: [
                  {
                      type: 'linear',
                      x: 0,
                      y: colorY,
                      x2: colorX,
                      y2: 0,
                      colorStops: [
                          {
                              offset: 0,
                              color: colorStart, // 0% 处的颜色  #16FFF1
                          },
                          {
                              offset: 1,
                              color: colorEnd, // 100% 处的颜色
                          },
                      ],
                  },
              ],
              data: [value1, value2], // data个数代表波浪数
              backgroundStyle: {
                  borderWidth: borderWidth,
                  borderColor: borderColor,   //rgba(55, 211, 255, 0.42)
                  color: backgroundColor,  //rgba(12, 41, 49, 0.6)
              },
              label: {
                  normal: {
                      formatter: (value * 100).toFixed(0) + '%',
                      textStyle: {
                          fontSize: fontSize,
                          color:color
                      },
                  },
              },
              outline: {
                  show: outlineIsShow,
              },
          },
          {
            name: '',
            type: 'bar',
            roundCap: true,
            barWidth: 60,
            showBackground: true,
            backgroundStyle: {
                color: '#2e2856',
            },
            data: [percent],
            coordinateSystem: 'polar',
            itemStyle: {
                normal: {
                    color: new that.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: outColorStart
                    }, {
                        offset: 1,
                        color: outColorEnd
                    }]),
                }
            }
        },
      ],
    };

    myCharts.setOption(option);
  }

  //地图
  /**
   * @id 元素 String (必传)
   * @dataList 地图数据 Array
   * @mapData
   * @mapName 地图json文件名 String (必传)
   * @inIsRoam 里层地图是否缩放 boolean (默认值true)
   * @inZoom 里层地图默认显示级别 Number (默认值1.23)
   * @outIsRoam 外层地图是否缩放 boolean (默认值false)
   * @outZoom 外层地图默认显示级别 Number (默认值1)
   * @inScaleLimitMin 里层地图缩放显示级别最小值 Number (默认值0)
   * @inScaleLimitMax 里层地图缩放显示级别最大值 Number (默认值1.23)
   * @isTwoMap 是否显示里层地图 boolean (默认值true)
   * @inMapBorderColor 里层地图区域边线颜色 String (默认值#2AF1FD)
   * @outMapBorderColor 外层地图区域边线颜色 String (默认值#1775ff)
   * @inMapBorderWidth 里层地图区域边线宽度 Number (默认值3)
   * @outMapBorderWidth 外层地图区域边线宽度 Number (默认值2)
   * @inShadowColor 里层地图区域阴影颜色 String (默认值rgba(128, 217, 248, 1))
   * @inShadowBlur 里层地图区域阴影模糊系数 Number (默认值10)
   * @inShadowOffsetX 里层地图区域阴影x轴偏移量 Number (默认值-2)
   * @inShadowOffsetY 里层地图区域阴影y轴偏移量 Number (默认值2)
   * @inLabelIsShow 里层地图文字是否显示 boolean (默认值false)
   * @outLabelIsShow 外层地图文字是否显示 boolean (默认值true)
   * @inLabelFontSize 里层地图文字大小 Number (默认值18)
   * @outLabelFontSize 外层地图文字大小 Number (默认值18)
   * @inLabelFontWeight 里层地图文字加粗程度 Number (默认值400)
   * @outLabelFontWeight 外层地图文字加粗程度 Number (默认值400)
   * @inLabelColor 里层地图文字颜色 String (默认值#ffffff)
   * @outLabelColor 外层地图文字颜色 String (默认值#ffffff)
   * @inMapAreaColor 里层地图区域背景色 String (默认值RGBA(47, 73, 74,0.8))
   * @outMapAreaColor 外层地图区域背景色 String (默认值#0ea3f7)
   * @inMapHoverAreaColor 里层地图区域划过显示背景色 String (默认值rgba(0, 132, 255, 1))
   * @outMapHoverAreaColor 外层地图区域划过显示背景色 String (默认值#08FFF4)
   * @inMapHoverLabelIsShow 里层地图区域划过时文字是否显示 boolean (默认值true)
   * @outMapHoverLabelIsShow 里层地图区域划过时文字是否显示 boolean (默认值false)
   * @inMapHoverLabelColor 里层地图区域划过时文字颜色 String (默认值#ffffff)
   * @outMapHoverLabelColor 外层地图区域划过时文字颜色 String (默认值#ffffff)
   * @inMapHoverLabelFontWeight 里层地图区域划过时文字加粗程度 Number (默认值400)
   * @outMapHoverLabelFontWeight 外层地图区域划过时文字加粗程度 Number (默认值400)
   * @inMapHoverFontSize 里层地图区域划过时文字大小 Number (默认值18)
   * @outMapHoverFontSize 外层地图区域划过时文字大小 Number (默认值18)
   * @isDrill 是否支持下钻 boolean (默认值false)
   * @outMapSiteTop 地图距上距离 Number (默认值0)
   * @outMapSiteBottom 地图距下距离 Number (默认值25)
   * @outMapSiteLeft 地图距左距离 Number (默认值0)
   * @outMapSiteRight 地图距右距离 Number (默认值0)
   * @inMapHoverBorderColor 里层地图区域划过时区域边线颜色 String (默认值#1775ff)
   * @outMapHoverBorderColor 外层地图区域划过时区域边线颜色 String (默认值#1775ff)
   * @lightCity 默认高亮城市 String
   * @time 地图轮播间隔时间 Number (默认值1000)
   * **/
  map(params,that) {
    let {
      roundIsShow=true,
      id,
      mapData = [],
      mapName='100000',
      inIsRoam = false,
      inZoom = 1.23,
      outIsRoam = false,
      outZoom = 1,
      inScaleLimitMin = 0,
      inScaleLimitMax = 1.23,
      isTwoMap = false,
      inMapBorderColor = '#2AF1FD',
      inMapBorderWidth = 3,
      inShadowColor = "rgba(128, 217, 248, 1)",
      inShadowBlur = 10,
      inShadowOffsetX = -2,
      inShadowOffsetY = 2,
      inLabelIsShow = false,
      inLabelFontSize = 18,
      inLabelFontWeight = 400,
      inLabelColor = "#ffffff",
      inMapAreaColor = "RGBA(47, 73, 74,0.8)",
      inMapHoverAreaColor = "rgba(0, 132, 255, 1)",
      inMapHoverLabelIsShow = true,
      inMapHoverLabelColor = "#ffffff",
      outMapHoverLabelColor = "#ffffff",
      inMapHoverLabelFontWeight = 400,
      inMapHoverFontSize = 18,
      outMapHoverFontSize = 18,
      isDrill = false,
      outLabelIsShow = true,
      outLabelFontSize = 18,
      outLabelFontWeight = 400,
      outLabelColor = "#ffffff",
      outMapSiteTop = 0,
      outMapSiteBottom = 25,
      outMapSiteLeft = 0,
      outMapSiteRight = 0,
      outMapAreaColor = "#0ea3f7",
      outMapBorderColor = "#1775ff",
      outMapBorderWidth = 2,
      outMapHoverAreaColor = "#08FFF4",
      inMapHoverBorderColor = "#1775ff",
      outMapHoverBorderColor = '#1775ff',
      outMapHoverLabelIsShow = true,
      outMapHoverLabelFontWeight = 400,
      cityIndex,
      time = 3000,
      isCarousel = false,
    } = params;

    if(isDrill){
      roundIsShow =false
    }

    this.myChart = that.$echarts.init(that.$refs[id]);
    this.mapJson = require(`../json/map/${mapName}.json`);
    this.mapJson.features.forEach((item,index)=>{
      let obj = {
        name:item.properties.name,
        value:item.properties.cp,
        cityCode:item.id
      };
      mapData.push(obj);
    });
    that.$echarts.registerMap("areaSite", this.mapJson);

    this.option = {
      geo: [
        {
          show:isTwoMap,
          map: "areaSite",
          roam: inIsRoam, // 是否允许缩放
          zoom: inZoom, // 默认显示级别
          scaleLimit: {
            min: inScaleLimitMin,
            max: inScaleLimitMax,
          },
          label: {
            normal: {
              show: inLabelIsShow,
              textStyle: {
                fontSize: inLabelFontSize,
                fontWeight: inLabelFontWeight,
                color: inLabelColor,
              },
            },
          },
          itemStyle: {
            normal: {
              areaColor: inMapAreaColor,
              borderColor: inMapBorderColor,
              borderWidth: inMapBorderWidth,
              shadowColor: inShadowColor,
              shadowOffsetX: inShadowOffsetX,
              shadowOffsetY: inShadowOffsetY,
              shadowBlur: inShadowBlur,
            },
            emphasis: {
              areaColor: inMapHoverAreaColor, //hover高亮时的颜色
              label: {
                show: outMapHoverLabelColor,
                textStyle: {
                  color: outMapHoverLabelColor,
                  fontSize: outMapHoverFontSize,
                  fontWeight:outMapHoverLabelFontWeight
                },
              },
            },
          },
        },
      ],
      series: [
        //外层地图
        {
          type: "map",
          map: "areaSite",
          roam: outIsRoam, // 是否允许缩放
          zoom: outZoom, // 默认显示级别
          coordinateSystem: 'geo',
          name: "areaSite",
          label: {
            normal: {
              show: outLabelIsShow,
              textStyle: {
                fontSize: outLabelFontSize,
                fontWeight: outLabelFontWeight,
                color: outLabelColor,
              },
            },
          },
          top:outMapSiteTop,
          bottom: outMapSiteBottom,
          left:outMapSiteLeft,
          right:outMapSiteRight,
          itemStyle: {
            areaColor: outMapAreaColor,
            borderColor: outMapBorderColor,
            borderWidth: outMapBorderWidth,
          },
          emphasis: {
            itemStyle: {
              areaColor: outMapHoverAreaColor,
              borderColor: outMapHoverBorderColor,
            },
            label: {
              show: outMapHoverLabelIsShow,
              textStyle: {
                color: inMapHoverLabelColor,
                fontSize: inMapHoverFontSize,
                fontWeight:inMapHoverLabelFontWeight
              },
            },
          },
          data: mapData,
        },
        {
          //里层地图
          type: "map",
          map: "areaSite",
          roam: inIsRoam, // 是否允许缩放
          zoom: inZoom, // 默认显示级别
          scaleLimit: {
            min: inScaleLimitMin,
            max: inScaleLimitMax,
          },
          label: {
            normal: {
              show: inLabelIsShow,
              textStyle: {
                fontSize: inLabelFontSize,
                fontWeight: inLabelFontWeight,
                color: inLabelColor,
              },
            },
          },
          itemStyle: {
            normal: {
              areaColor: inMapAreaColor,
              borderColor: inMapBorderColor,
              borderWidth: inMapBorderWidth,
              shadowColor: inShadowColor,
              shadowOffsetX: inShadowOffsetX,
              shadowOffsetY: inShadowOffsetY,
              shadowBlur: inShadowBlur,
            },
            emphasis: {
              areaColor: inMapHoverAreaColor, //hover高亮时的颜色
              borderColor: inMapHoverBorderColor,
              label: {
                show: inMapHoverLabelIsShow,
                textStyle: {
                  color: inMapHoverLabelColor,
                  fontSize: inMapHoverFontSize,
                  fontWeight:inMapHoverLabelFontWeight
                },
              },
            },
          },
          data: mapData,
        },

      ],
    };
    if(roundIsShow){
      this.option.series[2] =  {
        type:'effectScatter',
        coordinateSystem: 'geo',
        rippleEffect: {
          brushType: 'stroke',
        },
        showEffectOn: 'render',
        itemStyle: {
          normal: {
            color: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.5,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(255,255,255,0.2)',
                },
                {
                  offset: 0.8,
                  color: 'rgba(255,255,255,0.8)',
                },
                {
                  offset: 1,
                  color: 'rgba(255,255,255,1)',
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
        data: mapData,
        zlevel: 100,
      }
    }
    this.mapDataInfo.push(mapName);
    if(isCarousel){
      //高亮轮播
      this.light(time,cityIndex,mapData)
      //鼠标移入停止轮播
      this.myChart.on("mousemove", ()=> {
        clearInterval(this.myTimer);
      });
      //鼠标移出继续轮播
      this.myChart.on("mouseout", ()=> {
        this.light(time,cityIndex,mapData)
      });
    }
    this.myChart.on("click",param =>{
      that.mapChartClick(param);
      clearInterval(this.myTimer);
      if(param.data && isDrill){
        this.drill(param.data.cityCode,this.mapJson,this.mapDataInfo,that,mapData)
      }else{
        this.drill(this.mapDataInfo[0],this.mapJson,this.mapDataInfo,that,mapData)
      }
    });
    this.myChart.setOption(this.option);
  }
  light(time,cityIndex,mapData){ //高亮轮播
    this.myTimer = setInterval(()=>{
      this.myChart.dispatchAction({//取消高亮
        type: 'downplay',
        seriesIndex: 0
      });
      this.myChart.dispatchAction({//高亮
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: cityIndex
      });
      cityIndex++;
      if(cityIndex >= mapData.length) {
        cityIndex = 0;
      }
    },time);
  }
  drill(mapName,mapJson,mapDataInfo,that,mapData) {//地图下钻
    mapDataInfo.push(mapName);
    mapJson = require(`../json/map/${mapName}.json`);
    mapJson.features.forEach((item,index)=>{
      mapData[index]["cityCode"] = item.id
    });
    that.$echarts.registerMap("areaSite", mapJson);
    this.myChart.setOption(this.option);
  }

  //雷达图
  /**
   * @id 传入的id名称 必传
   * @color1 第一条线的颜色
   * @color2 第二条线的颜色
   * @text1 字体1
   * @text2 字体2
   * @text3 字体3
   * @text4 字体4
   * @text5 字体5
   * @centerX 雷达图的横向位置
   * @centerY 雷达图的纵向位置
   * @radius 雷达图的大小
   * @textColor 文字的颜色
   * @fontSize 文字字体大小
   * @colorBg1,colorBg2,colorBg3,colorBg4  由外到内的背景色
   * @lineStyleColor 中心点连接到字体之间的颜色
   * @splitLineColor  圆环轮廓线的颜色
   * @value1 值1 必传
   * @name1 名字1 必传
   * @value2 值2 必传
   * @name2 名字2 必传
   * @isShow 图例是否显示
   * @icon 表示图例的样式，默认为正方形，circle为圆形，roundRect为带圆角正方形，triangle为三角形，diamond为菱形
   * @right 表示图例离右边的距离
   * @top 表示图例离上边的距离
   * @lengendFontSize 表示图例字体大小
   * @lengendColor 表示图例字体颜色
   * @itemWidth 表示图例宽度
   * @itemHeight 表示图例高度
   * @itemGap 表示图例与图例之间的距离
   *
   */
  radar(params,that){
    let {
      id,
      color1 = '#67F9D8',
      color2 = '#FFE434',
      text1 = 'Indicator1',
      text2 = 'Indicator2',
      text3 = 'Indicator3',
      text4 = 'Indicator4',
      text5 = 'Indicator5',
      centerX = '50%',
      centerY = '50%',
      radius = 100,
      textColor = 'white',
      fontSize = 14,
      colorBg1 = 'none',
      colorBg2 = 'none',
      colorBg3 = 'none',
      colorBg4 = 'none',
      lineStyleColor = 'rgba(211, 253, 250, 0.8)',
      splitLineColor = 'rgba(211, 253, 250, 0.8)',
      value1,
      name1,
      value2,
      name2,
      isShow=true,
      icon='rect' ,
      right=10,
      top=12,
      lengendFontSize=12,
      lengendColor='#fff',
      itemWidth=10,
      itemHeight=10,
      itemGap=30,
    } = params
    let myCharts = that.$echarts.init(that.$refs[id]);
    let option = {
      tooltip: {
      },
      color: [color1, color2],  //线的颜色
      legend: {
        show: isShow,
        icon: icon,
        right: right,
        top:top,
        textStyle: {
          fontSize:lengendFontSize,
          color: lengendColor
        },
        itemWidth: itemWidth,
        itemHeight: itemHeight,
        itemGap: itemGap
      },
      radar: [
        {
          indicator: [
            { text: text1 },
            { text: text2 },
            { text: text3 },
            { text: text4 },
            { text: text5 }
          ],
          center: [centerX, centerY], //雷达图位置
          radius: radius, //雷达图大小
          startAngle: 90,
          // splitNumber: 4,
          shape: 'circle',
          axisName: {
            formatter: '【{value}】',
            color: textColor, //文字颜色
            fontSize: fontSize
          },
          splitArea: {
            areaStyle: {
              color: [colorBg1, colorBg2, colorBg3, colorBg4], //由外到内的背景色
              shadowColor: 'rgba(0, 0, 0, 0.2)',
              shadowBlur: 10
            }
          },
          axisLine: {
            lineStyle: {
              color: lineStyleColor //中心点连接到字体之间的颜色
            }
          },
          splitLine: {
            lineStyle: {
              color: splitLineColor  //圆环轮廓线的颜色
            }
          }
        }
      ],
      series: [
        {
          type: 'radar',
          emphasis: {
            lineStyle: {
              width: 4
            }
          },
          data: [
            {
              value: value1,
              name: name1
            },
            {
              value: value2,
              name: name2,
              areaStyle: {
                color: 'rgba(255, 228, 52, 0.6)'
              }
            }
          ]
        }
      ]
    };
    myCharts.setOption(option);
  }

  //半圆环图
  /**
   * @id 传入的id名称 必传
   * @value 传入的数值  必传
   * @colorStart 圆环背景色的初始颜色
   * @colorEnd 圆环背景色的结束颜色
   * @colorDefault 圆环默认背景色
   * @textFontSize num后文字的字体大小
   * @textColor num后文字的字体颜色
   * @numFontSize num的字体大小
   * @numColor num的字体颜色
   * @radius 圆环大小
   * @offsetCenterX 文字横向位置
   * @offsetCenterY 文字纵向位置
   * @titleIsShow 标题是否显示
   * @titleColor 标题颜色
   * @titleFontSize 标题字体大小
   * @width 圆环宽度
   * @titleText 标题文字  必传
   * @titleBottom 标题离底部的距离
   * @titleX 标题横向位置
   * @titleBorderWidth 标题外框的宽度
   * @titleBorderColor 标题外框的颜色
   * @titleBorderRadius 标题外框的半径大小
   * @paddingA 标题离边框的上下距离
   * @paddingB 标题离边框的左右距离
   * @unit num后的文字
   */
  gauge(params,that){
    let {
      id,
      value,
      colorStart = '#5CF9FE',
      colorEnd = '#468EFD',
      colorDefault = '#15337C',
      textFontSize = 30,
      textColor = 'white',
      numFontSize = 50,
      numColor = '#fff',
      radius = '80%',
      offsetCenterX = '0%',
      offsetCenterY = '0%',
      titleIsShow = true,
      titleColor = '#fff',
      titleFontSize = 16,
      width = 25,
      titleText,
      titleBottom = '20%',
      titleX = '48%',
      titleBorderWidth = 1,
      titleBorderColor = '#0092F2',
      titleBorderRadius = 20,
      paddingA = 7,
      paddingB = 14,
      unit = '分'
    } = params;
    let myCharts = that.$echarts.init(that.$refs[id]);
    var dataList = [{
      value: value
     }];
    var color = new that.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
          offset: 0,
          color: colorStart // 0% 处的颜色
      },

      {
          offset: 1,
          color: colorEnd // 100% 处的颜色
      }
    ]);
    var colorSet = [
      [value/100, color],
      [1, colorDefault]  //圆环上的背景色
    ];
    var rich = {
      white: {
          fontSize: textFontSize,
          color: textColor,
          fontWeight: '500',

      },
      blue: {
          fontSize: numFontSize,
          fontFamily: 'DINBold',
          color: numColor,
          fontWeight: '700',

        }
    }
    let option = {
      tooltip: {
          formatter: "{a} <br/>{b} : {c}%"
      },
      title: [{
        show: titleIsShow,
        text: titleText,
        bottom: titleBottom,
        x: titleX,
        fontStyle: 'normal',
        fontFamily: '微软雅黑',
        borderWidth: titleBorderWidth,
        borderColor: titleBorderColor,
        backgroundColor: '#1B215B',
        borderRadius: titleBorderRadius,
        textAlign: 'center',
        padding: [paddingA, paddingB],
        textStyle:{
          fontWeight: 'normal',
          fontSize: titleFontSize,
          color: titleColor,
        }
    }],
      series: [
          {
              type: 'gauge',
              radius: radius,  //圆盘大小
              startAngle: '225',
              endAngle: '-45',
              pointer: {
                  show: false
              },
              detail: {
                  formatter: function(value) {
                      var num = Math.round(value);
                      return '{blue|' + num + '}{white|'+ unit +'}';
                  },
                  rich: rich,
                  offsetCenter: [offsetCenterX, offsetCenterY],  //上边文字位置
              },
              data: dataList,

              axisLine: {
                  show: true,
                  lineStyle: {
                      color: colorSet,
                      width: width,
                      shadowOffsetX: 0,
                      shadowOffsetY: 0,
                      opacity: 1
                  }
              },
              axisTick: {
                  show: false
              },
              splitLine: {
                  show: false,
                  length: 25,
                  lineStyle: {
                      color: '#00377a',
                      width: 2,
                      type: 'solid',
                  },
              },
              axisLabel: {
                  show: false
              },
          },
      ]
    };
    myCharts.setOption(option);
  }
}
export default new Chart();
