echarts 地图基础配置

//地图基础配置
let mapBaseOption = {
  tooltip: {
    trigger: 'item',
    formatter: function (params) {
      var value1 = 0;
      if(params.data){
        value1 = (params.data.value1 ? params.data.value1 : 0);
      }
      var html = '<div><div style="font-size: 13px;">'+params.name+'</div>';
      html+='<div style="display: flex;">';
      html+='<div style="margin-right: 10px;"><div style="font-size: 12px;">发展数</div><div style="ont-size: 12px;color: #7ADDBC">'+(params.value ? params.value : 0)+'</div></div>';
      html+='<div><div style="font-size: 12px;">完成率</div><div style="ont-size: 12px;color: #F5B243">'+value1+'</div></div>';
      html+="</div>";
      html+="</div>";
      return html;
    }
  },
  dataRange: {
    x: 'right',
    y: 'top',
    splitList: [
      {start: 95, label: '≥90', color: '#52C41A'},
      {start: 0.8, end: 0.95, label: '80-95%', color: '#8CCFF7'},
      {start: 0.6, end: 0.80, label: '60-80%', color: '#F89A27'},
      {end: 0.6, label: '＜60', color: '#FA597C'},
    ],
    textStyle: {
      color: '#3899FF' // 值域文字颜色
    },
    selectedMode: false,
    color: ['#52C41A', '#8CCFF7', '#F89A27', '#FA597C']
  },
  visualMap: {
    text: ['靠前', '靠后'],
    realtime: false,
    calculable: false,
    orient: "horizontal",
    itemHeight: 280,
    itemWidth: 10,
    top:-100,
    right: 10,
    inRange: {
      color: ['#52C41A', '#8CCFF7', '#F89A27', '#FA597C']
    }
  },
  series: [
    {
      name: '',
      mapType: 'allMap', // 自定义扩展图表类型
      type: 'map',  //地图种类
      itemStyle: {
        normal: {
          areaColor: '#8CCFF7',
          borderColor: '#fff',
          fontWeightL: 700,
          borderWidth: 2
        },
        emphasis: {
          areaColor: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#d8f70b' // 0% 处的颜色
            }, {
              offset: 1, color: '#d8f70b' // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
          }
        }
      },
      data:[],
      label: {
        show: false
      },
      zoom: 1.1,
      roam: true, //是否开启平游或缩放
    }
  ]
};
// 雷达图
const chartsOption = {
  legend: {
    icon: 'circle',
    orient: 'horizontal',
    top: '95%',
    left: 10,               // 左距离
    itemWidth: 20,
    itemHeight: 13,
    itemGap: 15,
    data: ['图一', '图二'],
    textStyle: {   //标题颜色
      color: '#6E6E6E',
      fontSize: '12px cursive',
    }
  },

  color: ["#CCC", "#1890FF"],
  radar: {
    name: {
      textStyle: {
        color: '#595959',
        borderRadius: 3,
        padding: [3, 5]
      }
    },
    indicator: [
      {name: '移动发展', max: 6500},
      {name: '宽带发展', max: 16000},
      {name: '天翼高清', max: 30000},
      {name: '国网新增份额', max: 38000},
      {name: '积分', max: 52000},
      {name: '智慧家庭', max: 25000}
    ]
  },
  series: [{
    type: 'radar',
    data: [
      {
        value: [4300, 10000, 28000, 35000, 50000, 19000],
        name: '图一',
        lineStyle: {
          type: 'dashed'
        }
      },
      {
        value: [5000, 14000, 28000, 31000, 42000, 21000],
        name: '图二',
        areaStyle: {
          opacity: 0.6,
          color: '#1890FF'
        }
      }
    ]
  }]
};
//曲线+柱状图
const histogramOption = {
  title: {
    left: '1%',
    top: '2%',
    text: '近十天趋势图',
    textStyle: {   //标题颜色
      color: '#000',
      fontSize: '13px cursive',
    }
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    icon: 'circle',
    orient: 'horizontal',
    top: '92%',
    itemWidth: 15,
    itemHeight: 15,
    itemGap: 35,
    data: ['数学', '语文'],
    textStyle: {   //标题颜色
      color: '#6E6E6E',
      fontSize: '12px cursive',
    }
  },
  color: ['#FFC602', '#36CBCB'],  //设置legend颜色
  grid: {
    left: '3%',
    right: '6%',
    bottom: '10%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    data: ['1', '2', '3', '4', '5', 6, 7, 8, 9, 10, 11, 12],
    axisLabel: {
      show: true,
      textStyle: {
        color: '#6E6E6E',
      },
      fontSize: '13px cursive',//字体大小
      padding: [0, 0, 0, 10],//值离刻度线位置
    },
    //设置轴线的属性
    axisLine: {
      lineStyle: {
        color: '#CCC',

      }
    }
  },
  yAxis: {
    minInterval: 1,
    type: 'value',

    axisLabel: {
      show: true,
      textStyle: {
        color: '#6E6E6E',
      },
      fontSize: '13px cursive',//字体大小
      padding: [0, 20, 0, 0],//值离刻度线位置
    },
    //设置轴线的属性
    axisLine: {
      lineStyle: {
        color: '#FFF',

      }
    }
  },
  series: [
    {
      name: '数学',
      type: 'line',
      symbol: 'circle',//设置实心圆
      symbolSize: 6,   //设定实心点的大小
      lineStyle: {  //设置折线颜色
        normal: {
          width: 3
        }
      },
      data: [3, 5, 1, 1, 2, 2, 3, 4, 5, 6, 2, 7],
      smooth: true
    },
    {
      name: '语文',
      type: 'bar',
      symbol: 'circle',//设置实心圆
      barWidth: 20,//柱图宽度
      data: [5, 3, 8, 4, 5, 1, 5, 6, 2, 4, 5, 8]
    }
  ]
};
//底部报表
const deepChartOption1 = {
  // 鼠标放上去的效果
  tooltip: {
    trigger: 'axis',
    boundaryGap: false,
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  //  外部格式
  grid: {
    left: '-10%',
    right: '0%',
    bottom: '0%',
    top: '0%',
    containLabel: true
  },

  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    // 接下来是我的配置
    axisLine: {
      // x轴线的颜色(字体颜色也改变了)以及宽度  不想这样，只想改变线的颜色
      show: true,
      lineStyle: {
        color: "#ccc",
        width: 0,
        type: "solid"
      }
    },

    // 使刻度尺隐藏
    axisTick: {
      show: false,
    },
    axisLabel: {
      //x轴文字的配置(这里改变了字体颜色，是我想要的效果)
      show: false,
      textStyle: {
        color: "black",
      }
    },
    splitLine: {
      //分割线配置 就是控制x轴的线显隐
      show: false,
      lineStyle: {
        color: "#ccc",
      }
    }

  },
  yAxis: {
    type: 'value',
    //y轴上方的单位

    nameTextStyle: {
      //y轴上方单位的颜色
      color: 'blue'
    },
    axisLabel: {
      show: false,
      //y轴文字的配置
      textStyle: {
        color: "black",
        margin: 15
      },
      //   formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
    },
    // 使刻度尺隐藏
    axisTick: {
      show: false,
    },
    axisLine: {
      // y轴线的颜色以及宽度
      show: false, // 控制线的显隐
      lineStyle: {
        color: "#ccc",
        width: 1,
        type: "solid"
      },
    },
    splitLine: {
      //分割线配置 就是控制x轴的线显隐
      show: false,
      lineStyle: {
        color: "#ccc",
      }
    }


  },
  series: [{
    data: [120, 110, 150, 110, 170, 110, 130],
    type: 'line',
    // 柱的宽度
    barWidth: 30,
    // 柱的颜色
    itemStyle: {
      normal: {
        color: '#36CBCB'
      }
    },
    // 面积
    areaStyle: {},
    //  取消折线图上的点
    showSymbol: false,
    smooth: true//平滑曲线
  }]
};
const deepChartOption2 = {
  // 鼠标放上去的效果
  tooltip: {
    trigger: 'axis',
    boundaryGap: false,
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  //  外部格式
  grid: {
    left: '0%',
    right: '0%',
    bottom: '0%',
    top: '0%',
    containLabel: true
  },

  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    // 接下来是我的配置
    axisLine: {
      // x轴线的颜色(字体颜色也改变了)以及宽度  不想这样，只想改变线的颜色
      show: true,
      lineStyle: {
        color: "#ccc",
        width: 0,
        type: "solid"
      }
    },

    // 使刻度尺隐藏
    axisTick: {
      show: false,
    },
    axisLabel: {
      //x轴文字的配置(这里改变了字体颜色，是我想要的效果)
      show: false,
      textStyle: {
        color: "black",
      }
    },
    splitLine: {
      //分割线配置 就是控制x轴的线显隐
      show: false,
      lineStyle: {
        color: "#ccc",
      }
    }

  },
  yAxis: {
    type: 'value',
    //y轴上方的单位

    nameTextStyle: {
      //y轴上方单位的颜色
      color: 'blue'
    },
    axisLabel: {
      show: false,
      //y轴文字的配置
      textStyle: {
        color: "black",
        margin: 15
      },
      //   formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
    },
    // 使刻度尺隐藏
    axisTick: {
      show: false,
    },
    axisLine: {
      // y轴线的颜色以及宽度
      show: false, // 控制线的显隐
      lineStyle: {
        color: "#ccc",
        width: 1,
        type: "solid"
      },
    },
    splitLine: {
      //分割线配置 就是控制x轴的线显隐
      show: false,
      lineStyle: {
        color: "#ccc",
      }
    }


  },
  series: [{
    data: [120, 110, 150, 110, 170, 110, 130],
    type: 'bar',
    // 柱的宽度
    barWidth: 10,
    // 柱的颜色
    itemStyle: {
      normal: {
        color: '#33ABFB'
      }
    },
    // 面积
    areaStyle: {},
    //  取消折线图上的点
    showSymbol: false,
  }]
};