index.vue

<template>
  <div style='width:100%;height:100%;'>
    <div :id="elId"
         :style='style'></div>
      <jsoneditor
                  v-model='jsoneditorVisible'
                  :elInfo='elInfo'
                  :complatData='complatData'
                  :initStyle='initStyle'
                  :layout='layout'
                  :jsoneditorCloseAfter='jsoneditorCloseAfter'
                  :jsoneditorOpenAfter='jsoneditorOpenAfter'
                  >
      </jsoneditor>

  </div>

</template>
<script>
import uuidv1 from 'uuid/v1'
import jsoneditor from '../common/jsoneditor'
import mockData from '../common/initDbConfigDataJson'
import ucComponent from '../ucClass/uc_component'
import echartResize from './echartResize'
export default {
  mixins: [ucComponent, echartResize],
  components: {
    jsoneditor
  },
  name: 'hsGantt',
  props: {
    elInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    height: {// 图表高度
      type: String,
      default: '100%'
    },
    width: {// 图表宽度
      type: String,
      default: '100%'
    },
    allSourceData: {
      type: Object,
      default() {
        return {}
      }
    },

    initStyle: {
      type: Object,
      default() {
        return {}
      }
    },
    complatData: {
      type: Array,
      default() {
        return []
      }
    },
    mock: {
      type: Boolean,
      default: false
    },
    echartType: {
      type: String,
      default: 'hsLineBar'
    },
    layout: {},
    jsoneditorCloseAfter: {
      type: Function
    },
    jsoneditorOpenAfter: {
      type: Function
    }
  },
  watch: {
    allSourceData: {
      handler: function(newVal, oldVal) {
        const { config, sourceData } = newVal
        if (config && sourceData) {
          this.drowEchart(newVal)
        } else {
          this.initMockData()
        }
      },
      deep: true
    },
    editData: {
      handler: function(newVal, oldVal) {
        this.jsoneditorData = newVal
      },
      deep: true
    }
  },
  computed: {
    style() {
      return {
        height: this.height,
        width: this.width
      }
    }
  },
  data() {
    return {
      elId: '',
      chart: null,
      jsoneditorVisible: false, // 是否显示动态配置的弹框
      itemLabel: {
        color: 'white',
        fontSize: 14,
        position: 'top',
        show: true,
        formatter: '{a}:{c}'
      },
      editData: {
        config: {},
        sourceData: [],
        sql: ''
      },
      jsoneditorData: {}
    }
  },
  created() {
    this.elId = uuidv1() // 获取随机id
  },

  mounted() {
    this.initMockData()
  },
  methods: {
    initMockData() {
      if (this.mock) {
        switch (this.echartType) {
          case 'hsLineBar':
            this.initMockLineBar()
            break
          // 加载lineBar的模拟数据
          case 'hsPie':
            break
          default:
            this.initMockLineBar()
        }
      } else {
        this.initMockLineBar(this.elInfo.el)
      }
    },
    // 折线图的模拟数据
    initMockLineBar(type) {
      const mockData_ = mockData[type]
      const data = {
        config: mockData_.config,
        sourceData: mockData_.sourceData
      }
      this.editData.config = mockData_.config
      this.editData.sourceData = mockData_.sourceData
      this.editData.sql = mockData_.sql
      this.drowEchart(data)
    },
    drowEchart(data) {
      const source = JSON.parse(JSON.stringify(data))
      if (!source.sourceData.length) return
      this.editData.config = source.config
      this.editData.sourceData = source.sourceData
      this.editData.sql = source.sql
      const { config, sourceData } = JSON.parse(JSON.stringify(data))
      if (!Object.keys(config).length) return
      this.dealWithSource(config, sourceData)
      this.draw_complate_options(config)
    },
    // 传入完整的配置
    draw_complate_options(options) {
      // 重新绘制的情况
      if (this.chart) {
        this.chart.setOption(options, true)
        return
      }
      this.chart = this.drawEcharts(this.elId, options)
      // 新增双击事件
      this.chart.on('dblclick', (parm) => {
        this.$emit('echartDbClick', parm)
      })
      // 单击事件
      this.chart.on('click', (parm) => {
        this.$emit('echartClick', parm)
      })
    },
    // 处理配置和原始数据
    dealWithSource(config, sourceData) {
      if (this.elInfo.el === 'hsLineBar') {
        return this.dealWithSource_lineBar(config, sourceData)
      } else if (this.elInfo.el === 'hsPie') {
        return this.dealWithSource_pie(config, sourceData)
      } else if (this.elInfo.el === 'hsRadar') {
        return this.dealWithSource_radar(config, sourceData)
      }
    },
    // 处理配置和原始数据
    dealWithSource_lineBar(config, sourceData) {
      const isTransverse = config.isTransverse
      const series = config.series
      if (!series) {
        return
      }
      series.forEach(item => {
        const targetList = sourceData.filter(jtem => {
          return jtem.sSeries === item.name
        })
        const seriesData = []
        const xData = []
        targetList.forEach(ftem => {
          seriesData.push(ftem.dValue)
          xData.push(ftem.sName)
        })
        item.data = seriesData
        item.xData = xData
        // 支持渐变色
        if (item.itemStyle && item.itemStyle.hsColor) {
          var flage = false
          if (isTransverse) {
            flage = true
          }
          item.itemStyle.color = new this.$echarts.graphic.LinearGradient(
            flage ? 1 : 0, 0, 0, flage ? 0 : 1,
            [
              { offset: 0, color: item.itemStyle.hsColor[0] },
              { offset: 1, color: item.itemStyle.hsColor[1] }
            ]
          )
        }
        // 支持区域填充样式。
        if (item.areaStyle && item.areaStyle.hsColor) {
          item.areaStyle.color = new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: item.areaStyle.hsColor[0] },
            { offset: 1, color: item.areaStyle.hsColor[1] }
          ])
        }
        // 这里显示showValue
        if (!item.label) {
          item.label = this.itemLabel
        }
        item.label.formatter = function(params) {
          const { seriesName, data, name } = params
          const target = sourceData.find(jtem => {
            return jtem.sSeries === seriesName && jtem.dValue === data && jtem.sName === name
          })
          return target.sShowValue
        }
      })
      // 如果要横向显示的话 就得设置yAxis
      if (config.isTransverse) {
        config.yAxis[0].data = series[0].xData
      } else {
        config.xAxis.data = series[0].xData
      }
      return config
    },
    // 处理配置和原始数据
    dealWithSource_pie(config, sourceData) {
      const series = config.series
      if (!series) {
        return
      }
      const legendDatas = []
      series.forEach(item => {
        const targetList = sourceData.filter(jtem => {
          return jtem.sSeries === item.name
        })

        const seriesData = []
        targetList.forEach(ftem => {
          seriesData.push({ value: ftem.dValue, name: ftem.sName })
          legendDatas.push(ftem.sName)
        })
        item.data = seriesData
      })
      config.legend.data = legendDatas
      return config
    },
    dealWithSource_radar(config, sourceData) {
      const series = config.series
      if (!series) {
        return
      }
      series.forEach(item => {
        const targetList = sourceData.filter(jtem => {
          return jtem.sSeries === item.name
        })
        const seriesData = []
        targetList.forEach(ftem => {
          seriesData.push(ftem.dValue)
        })
        item.data = seriesData
      })
      return config
    }

  }
}
</script>