wzpg/spatialbasicweb/static/config/wst/echartConfig.js

let pieChartOption = {
  tooltip: {
    trigger: 'item'
  },
  color: ['#61D9AC', '#FF948C', '#7EA4FF', '#FFB436', '#52A9FF', '#Fe941C', '#FFe426', '#7F8322'],
  legend: {
    top: '5%',
    right: '20%',
    orient: 'vertical',
  },
  series: [
    {
      name: '宗地数',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      center: ['32%', '42%'],
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        {value: 0, name: '东港镇'},
        {value: 0, name: '锡北镇'},
        {value: 0, name: '羊尖镇'},
        {value: 0, name: '东北塘街道'},
        {value: 0, name: '开发区'},
        {value: 0, name: '商务区'},
        {value: 0, name: '东亭街道'},
        {value: 0, name: '鹅湖镇'},
      ]
    }
  ],
  setData(data) {
    this.series[0].data.map(item=>{
      data.map(i=>{
        if(item.name==i.name){
          item.value=i.value
        }
      })
    });
  },
  /**
   *  东港镇 锡北镇 羊尖镇 东北塘 开发区 商务区 东亭街道 鹅湖镇
   *
   * @param data
   */
  setJdData(data) {
    for (let i = 0; i < 8; i++) {
      if (i >= data.length) {
        data.push(0)
      } else if (!data[i]) {
        data[i] = 0
      }
    }
    this.series[0].data[0] = {value: data[0], name: '东港镇'};
    this.series[0].data[1] = {value: data[1], name: '锡北镇'};
    this.series[0].data[2] = {value: data[2], name: '羊尖镇'};
    this.series[0].data[3] = {value: data[3], name: '东北塘街道'};
    this.series[0].data[4] = {value: data[4], name: '开发区'};
    this.series[0].data[5] = {value: data[5], name: '商务区'};
    this.series[0].data[6] = {value: data[6], name: '东亭街道'};
    this.series[0].data[7] = {value: data[7], name: '鹅湖镇'};
  }
};

export {
  pieChartOption,
  barChartOption,
  xiShanOption
};

let barChartOption = {
  title: {
    x: 13,
    y: 20,
    text: '{a|} {b|可利用资源区域分布}',
    textStyle: {
      rich: {
        a: {
          width: 4,
          height: 16,
          backgroundColor: '#2D9AFF',
          borderRadius: 2,
        },
        b: {
          fontSize: '16',
          fontFamily: ' MicrosoftYaHeiSemibold',
          fontWeight: 'normal',
          color: '#333333',
        }
      }
    }
  },
  legend: {
    data: ['立即可用', '近期可用', '供而未用', '用而未足', '低效产出'],
    icon: 'rect',
    textStyle: {
      color: '#000'
    },
    top: '8%',
    right: '6%'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    },
  },
  grid: {
    left: '2%',
    right: '6%',
    bottom: '5%',
    top: '25%',
    containLabel: true
  },

  xAxis: [{
    type: 'category',
    data: ['东港镇', '锡北镇', '羊尖镇', '东北塘街道', '开发区', '商务区', '东亭街道', '鹅湖镇'],
    axisTick: {
      show: false,
      alignWithLabel: true
    },
    axisLabel: {
      interval: 0,
      textStyle: {
        color: 'rgba(0,0,0,0.8)'
      },
      fontSize: '12',
      rotate: 0,
      show: true,
    },
    axisLine: {
      show: true,
      lineStyle: {
        type: 'dotted',
        color: '#CCCCCC'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
      }
    },
  }],
  yAxis: {
    axisLine: {
      show: false
    },
    axisLabel: {
      textStyle: {
        color: '#000'
      },
      fontSize: '12'
    },
    show: true,
    type: 'value',
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed'
      }
    },
    nameTextStyle: {
      color: 'rgba(255,255,255,1.0)'
    },
    axisTick: {
      show: false,
      alignWithLabel: true
    },

  },
  series: [{
    name: '立即可用',
    type: 'bar',
    barWidth: 13,
    label: {
      normal: {
        show: false,
        position: 'top',
        formatter: function (params) {
          return params.data.value;
        },
        textStyle: {
          color: 'rgba(0,0,0,1)'
        },
        fontSize: '13'
      }
    },
    itemStyle: {
      normal: {
        color: "#59AEF1"
      }
    },
    data: [48, 24, 36, 22, 66, 16, 26, 13]
  },
    {
      name: '近期可用',
      type: 'bar',
      barWidth: 13,
      label: {
        normal: {
          show: false,
          position: 'top',
          formatter: function (params) {
            return params.data.value;
          },
          textStyle: {
            color: 'rgba(0,0,0,0.8)'
          },
          fontSize: '16'
        }
      },
      itemStyle: {
        normal: {
          color: "#61D9AC"
        }
      },
      data: [21, 18, 18, 16, 11, 18, 21, 15]
    },
    {
      name: '供而未用',
      type: 'bar',
      barWidth: 13,
      label: {
        normal: {
          show: false,
          position: 'top',
          formatter: function (params) {
            return params.data.value;
          },
          textStyle: {
            color: 'rgba(0,0,0,0.8)'
          },
          fontSize: '16'
        }
      },
      itemStyle: {
        normal: {
          color: "#FFB436"
        }
      },
      data: [28, 58, 38, 66, 31, 58, 81, 52]
    },
    {
      name: '用而未足',
      type: 'bar',
      barWidth: 13,
      label: {
        normal: {
          show: false,
          position: 'top',
          formatter: function (params) {
            return params.data.value;
          },
          textStyle: {
            color: 'rgba(0,0,0,0.8)'
          },
          fontSize: '16'
        }
      },
      itemStyle: {
        normal: {
          color: "#7EA4FF"
        }
      },
      data: [28, 58, 38, 66, 31, 58, 81, 23]
    },
    {
      name: '低效产出',
      type: 'bar',
      barWidth: 13,
      label: {
        normal: {
          show: false,
          position: 'top',
          formatter: function (params) {
            return params.data.value;
          },
          textStyle: {
            color: 'rgba(0,0,0,0.8)'
          },
          fontSize: '16'
        }
      },
      itemStyle: {
        normal: {
          color: "#FF948C"
        }
      },
      data: [28, 58, 38, 66, 31, 58, 81, 32]
    }
  ],
  setTitleText(title) {
    this.title.text = '{a|} {b|' + title + '}'
  },
  setSubtTitle(data) {
    this.xAxis.data = data
  },
  setData(titleArray, dataArray, colorArray) {
    let colors = ["#59AEF1", "#61D9AC", "#FFB436", "#7EA4FF", "#FF948C"];
    if (colorArray) {
      colors = colorArray;
    }
    this.legend.data = titleArray
    this.series = [];
    for (let i = 0; i < titleArray.length; i++) {
      let color = '';
      if (i < colors.length) {
        color = colors[i]
      } else {
        color = colors[i % colors.length]
      }
      let seriesData = {
        name: titleArray[i],
        type: 'bar',
        barWidth: 13,
        label: {
          normal: {
            show: false,
            position: 'top',
            formatter: function (params) {
              return params.data.value;
            },
            textStyle: {
              color: 'rgba(0,0,0,1)'
            },
            fontSize: '13'
          }
        },
        itemStyle: {
          normal: {
            color: color
          }
        },
        data: dataArray[i]
      }
      this.series.push(seriesData)
    }
  }
};
let xiShanOption = {
  tooltip: {
    trigger: 'item',
    formatter: '{b}：{c}m²'
  },
  visualMap: {
    min: 0,
    max: 3656457.92289,
    left: '20',
    top: 'bottom',
    text: ['高', '低'], // 文本，默认为数值文本
    inRange: {
      color: ['lightskyblue', 'yellow', 'orangered']
    },
    textStyle: {
      fontSize:16,
    },
    calculable: true
  },
  toolbox: {
    show: false,
    left: 'left',
    top: 'top',
    feature: {
      dataView: {readOnly: false},
      restore: {},
      saveAsImage: {}
    }
  },
  series: [
    {
      type: 'map',
      mapType: 'XiShanQu',
      selectedMode: 'single',
      roam: false,
      itemStyle: {
        normal: {
          areaColor: '#fdefdd',
          shadowBlur: 1,
          borderWidth: 0.5,//设置外层边框
          borderColor: '#347b68',//轮廓颜色
          shadowColor: '#a9c5c5'//轮廓阴影颜色
        },
        emphasis: {
          areaColor: '#04fc0f',
          shadowOffsetY: 1.5,
          shadowOffsetX: 1.5,
          shadowColor:'#1227de',
          shadowBlur: 10,
        },
      },
      label: {
        normal: {
          show: true,
          textStyle: {
            fontSize:16,
          },
        },
      },
      data: [
        {"name": "某某区", "value": 0},
        {"name": "商务区", "value": 0},
        {"name": "锡北镇", "value": 0},
        {"name": "东港镇", "value": 0},
        {"name": "鹅湖镇", "value": 0},
        {"name": "东亭街道", "value": 0},
        {"name": "东北塘街道", "value": 0},
        {"name": "羊尖镇", "value": 0},
        {"name": "开发区", "value": 0}
      ]
    }
  ],
  setData(data) {
    if (data) {
      this.series[0].data.map(item=>{
        item.value=0;
        data.map(i=>{
          if(item.name==i.name){
            item.value=i.value
          }
        })
      });
      let min = 0;
      let max = 0;
      data.map(item => {
        if (item.name&&min >= parseFloat(item.value)) {
          min = parseFloat(item.value);
        }
        if (item.name&&max <= parseFloat(item.value)) {
          max = parseFloat(item.value);
        }
      })
      this.visualMap.min = min;
      this.visualMap.max = max;
    }
  },
  setOnlyData(data) {
    if (data) {
      this.series[0].data=data;
      let min = 0;
      let max = 0;
      data.map(item => {
        if (item.name&&min >= parseFloat(item.value)) {
          min = parseFloat(item.value);
        }
        if (item.name&&max <= parseFloat(item.value)) {
          max = parseFloat(item.value);
        }
      })
      this.visualMap.min = min;
      this.visualMap.max = max;
    }
  },
  /**
   *  东港镇 锡北镇 羊尖镇 东北塘街道 开发区 商务区 东亭街道 鹅湖镇
   *
   * @param data
   */
  setJdData(data) {
    for (let i = 0; i < 8; i++) {
      if (i >= data.length) {
        data.push(0)
      } else if (!data[i]) {
        data[i] = 0
      }
    }
    this.series[0].data[0] = {value: data[0], name: '东港镇'};
    this.series[0].data[1] = {value: data[1], name: '锡北镇'};
    this.series[0].data[2] = {value: data[2], name: '羊尖镇'};
    this.series[0].data[3] = {value: data[3], name: '东北塘街道'};
    this.series[0].data[4] = {value: data[4], name: '开发区'};
    this.series[0].data[5] = {value: data[5], name: '商务区'};
    this.series[0].data[6] = {value: data[6], name: '东亭街道'};
    this.series[0].data[7] = {value: data[7], name: '鹅湖镇'};
    let min = 0;
    let max = 0;
    this.series[0].map(item => {
      if (min >  parseFloat(item.value)) {
        min = parseFloat(item.value);
      }
      if (max <  parseFloat(item.value)) {
        max = parseFloat(item.value);
      }
    })
    this.visualMap.min = min;
    this.visualMap.max = max;
  }
}