DC-WEB/src/components/automatic-graph-components/chart.vue

<template>
  <div class="report-container report-preview" >
    <div class="report-data-container" :class="reportLayer">
    <div class="report-chart-container " :class="chartLayer">
      <!--echarts-->
      <div class="line-chart" :id="'lineChart_'+groupIndex" v-if="ifBar"></div>
      <div class="pie-chart" :id="'pieChart_'+groupIndex" v-if="ifPie"></div>
      <div class="map-chart" :id="'mapChart_'+groupIndex" v-if="ifMap"></div>
    </div>
    </div>
    <!--下钻弹窗-->
  </div>
</template>

<script>
  import {kpiColors} from '@/views/Report/ReportManagement/kpi-color'
  import {barLineOption,pieOption,mapOption} from '@/views/Graph/GraphManagement/echarts-option'
  import {echartsThemes} from '@/views/Report/ReportManagement/echarts-color-themes'
  import {deepCopy, randomStr, numberFormateThousand, GetDateStr} from '@/utils/util'

  export default {
    name: "report",
    props: {
      // table和charts的布局关系
      reportLayer: {
        default: 'report-layer-column'
      },
      // chart接chart的布局关系
      chartLayer: {
        default: 'chart-layer-column'
      },
      chartId: {
        default: false
      },
      // 给echart用的唯一id
      groupIndex: {
        // 这个随机数在一次执行队列里输出的都一样，所以不适用于分组展示的情况
        default: randomStr(),
      },
    },
    data() {
      return {
        // 图表默认配置
        barLineOption: barLineOption,
        pieOption: pieOption,
        mapOption: mapOption,
        viewRes: null
      }
    },
    computed: {
      chartType: {
        // getter
        get: function () {
          return (this.viewRes && this.viewRes.chartType)||null
        },
        // setter
        set: function (newValue) {
        }
      },
      ifMap: {
        // getter
        get: function () {
          let {chartType} = this
          return chartType === 3
        },
        // setter
        set: function (newValue) {
        }
      },
      ifBar: {
        // getter
        get: function () {
          let {chartType} = this
          return chartType === 1
        },
        // setter
        set: function (newValue) {
        }
      },
      ifPie: {
        // getter
        get: function () {
          let {chartType} = this
          return chartType === 2
        },
        // setter
        set: function (newValue) {
        }
      },
      /* 表颜色 */
      chartTheme: {
        get: function () {
          let obj = null
          if(this.viewRes){
            let {colorGroupId} = this.viewRes
            obj = echartsThemes[colorGroupId]
          }
          return obj
        },
        set: function (val) {}
      },
      chartColor: {
        // getter
        get: function () {
          let arr = []
          let {chartTheme} = this
          if(chartTheme){
            arr = chartTheme.data
          }
          return arr
        },
        // setter
        set: function (newValue) {
        }
      },
    },
    watch:{
    },
    created(){
    },
    mounted(){
      this.getList()
    },
    methods: {
      loadMap(){
        let {chartId} = this
        /* 合成检索条件 */
        let params = {chartId}
        this.$api.chart.getChartData(params)
          .then(res => {
            if (res.code == 1) {
              this.getMapChart(res.data.map)
            }
          })
      },
      loadPie(){
        let {chartId} = this
        /* 合成检索条件 */
        let params = {chartId}
        this.$api.chart.getChartData(params)
          .then(res => {
            if (res.code == 1) {
              this.getPieChart(res.data.pie)
            }
          })
      },
      loadBarAndLine(){
        let {chartId} = this
        /* 合成检索条件 */
        let params = {chartId}
        this.$api.chart.getChartData(params)
          .then(res => {
            if (res.code == 1) {
            this.getBarLineChart(res.data.barOrLine)

            }
          })
      },
      getList(){
        let params = { id: this.chartId }
        this.$api.chart.get(params)
          .then(res => {
            if (res.code == 1) {
              this.viewRes = res.data
              if(this.ifBar){
                this.loadBarAndLine()
              }
              if(this.ifPie){
                this.loadPie()
              }
              if(this.ifMap){
                this.loadMap()
              }
            }
          })
      },

      getBarLineChart(data){
        let xAxisColor={
          axisLabel: {
            show: true,
            textStyle: {
              color: '#7f8d9a'
            }
          },
          nameTextStyle:{
            color: '#7f8d9a',
          },
          axisLine:{
            lineStyle:{
              color: '#7f8d9a',
              width: 1
            }
          },
        }
        let yAxisColor={
          axisLabel: {
            show: true,
            textStyle: {
              color: '#7f8d9a'
            },
            formatter: '{value}'
          },
          axisLine:{
            lineStyle:{
              color: '#7f8d9a',
              width: 1
            },
          },
          splitLine:{
            show:true,
            lineStyle:{
              color: '#7f8d9a',
              width: 1
            }
          },
        }
        let xAxis=data.xAxis
        let yAxis=data.yAxis
        let series=data.series

        series.forEach(item=>{
          if(item.unit){
            item.name=item.name+'('+item.unit+')'
          }
        })

        yAxis.forEach((item)=>{
          Object.assign(item,yAxisColor)
        })


        Object.assign(xAxis,xAxisColor)

        let barWidth=20

        let barSeries=series.filter(item=>{
          return item.type==="bar"
        })

        let barNum=barSeries.length

        if(barNum>40){
          barWidth=800/barNum
        }

        if(barWidth<5){
          barWidth=5
        }

        series.map((item)=>{
          return Object.assign(item,{barWidth})
        })

        let option=this.barLineOption
        option.color=this.chartColor
        option.xAxis=[xAxis]
        option.yAxis=yAxis
        option.series=series


        // console.log(JSON.stringify(option))

        let myChart = this.$echarts.init(document.getElementById('lineChart_'+this.groupIndex))

        // 绘制图表
        myChart.setOption(option,true)

        this.$nextTick(function () {
          myChart.resize()
        })
      },
      getPieChart(data){
        let option=this.pieOption
        option.color=this.chartColor
        option.series.data=data.series.map(item=>{
          item.value = Number(item.value)
          return item
        })

        // console.log(JSON.stringify(option))

        let myChart = this.$echarts.init(document.getElementById('pieChart_'+this.groupIndex))

        // 绘制图表
        myChart.setOption(option,true)

        this.$nextTick(function () {
          myChart.resize()
        })
      },
      getMapChart(data){
        let option=this.mapOption

        let map = new BMap.Map('mapChart_'+this.groupIndex)         // 创建地图实例
        // let pot = this.searchForm.cityAddr.split(",") || []
        // let lng = pot[0], lat = pot[1]
        // let point = new BMap.Point(lng, lat)
        let point = new BMap.Point(116.3964,39.9093)
        map.centerAndZoom(point, 13)   // 初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom()// 允许滚轮缩放
        map.setMapStyle({
          styleJson: option
        }) // 午夜蓝风格(midnight)
        map.setCenter('犍为县')
        // map.setCenter(this.searchForm.cityCode)
        this.mapObj = map
        this.realtimeHeatmap(data)
        let pt = new BMap.Point(116.3964,39.9093)
        let myIcon = new BMap.Icon(icon, new BMap.Size(53,50))
        let marker2 = new BMap.Marker(pt,{icon:myIcon})  // 创建标注
        this.mapObj.addOverlay(marker2)
        marker2.addEventListener("onmouseover",(e) => {
          var opts = {
            width : 130,     // 信息窗口宽度
            height: 100,     // 信息窗口高度
            title : "" , // 信息窗口标题
            enableMessage:true,//设置允许信息窗发送短息
            message:"",
          }
          let text = '<div class="el-bs-window"></div>'
          let infoWindow = new BMap.InfoWindow(text, opts);  // 创建信息窗口对象
          this.mapObj.openInfoWindow(infoWindow,e.point); //开启信息窗口
        })
      },
      // 热力图
      realtimeHeatmap (data) {
        let params = {areaCode: "511123"}
        let heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20})
        this.mapObj.addOverlay(heatmapOverlay)
        let points =data
        heatmapOverlay.setDataSet({data:points,max:4500})
        heatmapOverlay.setOptions({ "gradient" : {
            0:'#25cef3',
            .2:'#d01864',
            .4:'#1979f2',
            .6:'#1979f2',
            .8:'#f3c525',
            1:'#e60012',
          }})
        heatmapOverlay.show()

      },
    },
  }
</script>