qa-regulatory-gwj-vue/static/bi-first/js/echart.js

// 企业统计环形图
function corpCountChart(obj) {
  var dom = document.getElementById('chart1')
  var myChart = echarts.init(dom)
  option = {
    color: ['#f28f54', '#8ec029'],
    tooltip: {
      trigger: 'item',
      position: 'right'
    },
    series: [{
      name: '',
      type: 'pie',
      radius: ['30%', '52%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        formatter: '{b}:{c}: ({d}%)',
        position: 'center'
      },
      // emphasis: {
      //   label: {
      //     show: true,
      //     fontSize: '4',
      //     fontWeight: 'bold'
      //   }
      // },
      labelLine: {
        show: true
      },
      data: [{
        value: obj.allCorpNum - obj.sureCorpNum,
        name: '未确认企业数'
      },
      {
        value: obj.sureCorpNum,
        name: '确认企业数'
      }
      ]
    }]
  }

  if (option && typeof option === 'object') {
    myChart.setOption(option)
  }
}
// 重大危险源企业分布
function majorBar(obj) {
  var myChart2 = echarts.init(document.getElementById('chart2'))
  var option = {
    title: {
      text: '单位：个',
      top: '10px',
      left: '10px',
      textStyle: {
        color: '#8DB6DB',
        fontSize: 12
      }
    },
    grid: {
      left: 50,
      bottom: '30'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      top: '10px',
      right: '15px',
      itemWidth: 15,
      itemHeight: 15,
      data: ['一级', '二级', '三级', '四级'],
      textStyle: {
        color: '#fff'
      }
    },
    xAxis: {
      data: obj.GROUP_NAME,
      splitLine: {
        show: false
      },
      axisLabel: {
        show: true,
        interval: 0,
        textStyle: {
          color: '#8DB6DB'
        }
      }
    },
    dataZoom: [
      {
        type: 'slider',
        realtime: true,
        zoomLock: true,
        start: 0,
        end: 10,
        bottom: 0,
        height: 10
      }
    ],
    yAxis: {
      splitLine: {
        show: false
        // lineStyle: {
        //                 type: 'dashed',
        // 				color: '#8DB6DB',
        //             }
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#8DB6DB'
        }
      }
    },
    series: [{
      name: '一级',
      barWidth: 20,
      type: 'bar',
      stack: '',
      data: obj.Acount,
      itemStyle: {
        normal: {
          color: '#ff0000'
        }
      }
    }, {
      name: '二级',
      type: 'bar',
      stack: '',
      data: obj.Bcount,
      itemStyle: {
        normal: {
          color: '#ffa800'
        }
      }
    }, {
      name: '三级',
      type: 'bar',
      stack: '',
      data: obj.Ccount,
      itemStyle: {
        normal: {
          color: '#ffff00'
        }
      }
    }, {
      name: '四级',
      type: 'bar',
      stack: '',
      data: obj.Dcount,
      itemStyle: {
        normal: {
          color: '#0f76eb'
        }
      }
    }]
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart2.setOption(option)
}
// 企业规模
function corpScanChart(obj) {
  var myChart3 = echarts.init(document.getElementById('chart3'))
  var option = {
    color: ['#5470c6', '#2db9ed', '#fac858', '#91cc75'],
    tooltip: {
      trigger: 'item'
    },
    legend: {
      bottom: 0,
      left: 'center',
      data: ['大型企业', '中型企业', '小型企业', '微型企业'],
      textStyle: {
        color: '#fff'
      }
    },
    series: [{
      type: 'pie',
      radius: '65%',
      center: ['50%', '50%'],
      label: {
        show: false,
        position: 'right'
      },
      selectedMode: 'single',
      data: [{
        value: obj.largeCorpNum,
        name: '大型企业'
      },
      {
        value: obj.mediumCorpNum,
        name: '中型企业'
      },
      {
        value: obj.smallCorpNum,
        name: '小型企业'
      },
      {
        value: obj.miniatureCorpNum,
        name: '微型企业'
      }
      ],
      // 设置值域的标签
      label: {
        normal: {
          color: '#fff',
          position: 'inner', // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
          // formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}
          // {a}指series.name  {b}指series.data的name
          // {c}指series.data的value  {d}%指这一部分占总数的百分比
          formatter: '{d}'
        }
      }

    }]
  }
  myChart3.setOption(option)
}
// 隐患整改对比图
function hiddenLine(obj) {
  var myChart4 = echarts.init(document.getElementById('chart4'))
  var option = {
    title: {
      text: '单位：个',
      top: '10px',
      left: '10px',
      textStyle: {
        color: '#8DB6DB',
        fontSize: 12
      }
    },
    tooltip: {},
    grid: {
      bottom: '14%'
    },
    legend: {
      top: '10px',
      right: '15px',
      itemWidth: 15,
      itemHeight: 15,
      data: ['隐患总数', '已整改'],
      textStyle: {
        color: '#fff'
      }
    },
    xAxis: {
      data: obj.GROUP_NAME,
      splitLine: {
        show: false

      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#8DB6DB'
        }
      }
    },
    yAxis: {
      splitLine: {
        show: false

      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#cfe8ff'
        }
      }
    },
    dataZoom: [
      {
        type: 'slider',
        realtime: true,
        zoomLock: true,
        start: 0,
        end: 10,
        bottom: 0,
        height: 10
      }
    ],
    series: [{
      name: '隐患总数',
      type: 'line',
      areaStyle: {
        normal: {
          color: '#80ffc0'
        }
      },
      data: obj.SBHD_NUM
    },
    {
      name: '已整改',
      type: 'line',
      areaStyle: {
        normal: {
          color: '#8DB6DB'
        }
      },
      data: obj.ZGHD_NUM
    }
    ]
  }
  myChart4.setOption(option)
}
// 企业相关属性统计
function corpAttributeChart(obj) {
  var myChart5 = echarts.init(document.getElementById('chart5'))
  var option = {

    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },

    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '0',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: { // 分割线样式
          type: 'dashed',
          color: 'rgba(141,182,219,0.4)'
        }
      },
      boundaryGap: [0, 0.01],
      axisLabel: {
        show: true,
        textStyle: {
          color: '#90caff'
        }
      }
    },
    yAxis: {
      type: 'category',
      data: ['涉及危化品', '涉爆粉尘作业', '有限空间作业', '重大危险源', '液氨制冷'],
      axisLabel: {
        show: true,
        textStyle: {
          color: '#cfe8ff'
        }
      }
    },
    series: [{
      name: '',
      type: 'bar',
      itemStyle: {
        color: '#4c9adc'
      },
      data: [obj.whCorpNum, obj.fcCorpNum, obj.yxCorpNum, obj.wxyCorpNum, obj.yaCorpNum]
    }]
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart5.setOption(option)
}