scatterPlot.vue

<template>
    <div :id="idstr"></div>
</template>

<script>
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default {
  data () {
    return {
      dataObj: {},
      option: {},
      chart: null,
      clickNum: [1, 1, 1, 1, 1]
    }
  },
  props: ['message', 'idstr'],
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      const vm = this
      const bars = []
      this.message.title.forEach(e => {
        bars.push({ type: 'bar' })
      })
      const source = []
      const x = Object.keys(this.message.data)
      // console.log(x)
      for (let i = 0; i < x.length; i++) {
        const da = this.message.data[x[i]]
        const arr = []
        for (let j = 0; j < this.message.title.length; j++) {
          let flag = true
          da.forEach(arg => {
            // console.log(arg["type"], this.message.title[j])
            if (arg.type === this.message.title[j]) {
              arr.push(arg.num)
              flag = false
            }
          })
          if (flag) {
            arr.push(0)
          }
        }
        arr.unshift(x[i])
        source.push(arr)
      }
      const title = this.message.title
      title.unshift('product')
      source.unshift(title)
      // 基于准备好的dom，初始化echarts实例
      vm.chart = echarts.init(document.getElementById(vm.idstr))
      // 清空图表
      vm.chart.clear()
      vm.option = {
        color: ['#30DDF4', '#E23AA2', '#F5A623', '#D6FFBA'],
        grid: {
          height: 135,
          top: 40
        },
        legend: {
          show: true,
          textStyle: {
            color: '#ffffff' // 图例文字颜色
          }
          // data: this.message.title
          // left: 'right'
        },
        tooltip: {},
        dataset: {
          source: source
        },
        xAxis: {
          type: 'category',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#675bba'
            }
          }
        },
        yAxis: {
          // data: ['10', '20', '30', '40', '50', '60', '70'],
          axisLine: {
            show: true,
            lineStyle: {
              color: '#675bba'
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: bars
      }
      vm.drawBar()
      // window.addEventListener("resize",()=>{
      //     chart.resize();
      // });
    },
    drawBar () {
      // 绘制图表
      const vm = this
      vm.chart.setOption(vm.option)
      vm.eventList()
    },
    eventList () {
      const vm = this
      vm.chart.on('click', function (params) {
      })
    }
  },
  watch: {
    message: function () {
      const vm = this
      setTimeout(function () {
        vm.drawLine()
      }, 1000)
      // console.log(this.message)
    }
  }
}
</script>

<style lang="less">

</style>