vue2+echarts：后台传递一天有多类数据的时候，如何渲染柱状图

Posted 2022-09-30 364.99°

1.需求描述

后台传输过来的json数据：

• 一天可能有多个支付渠道进行交易，从而产生交易记录
• 每天的支付渠道类型不定，需要进行判断
  

需求描述： 两个展示各渠道支付环境（支付渠道可能有多重）的柱状图，如下：

• 柱状图1：

  • 需求： 每天需要展示的数据有：各个渠道的支付金额、退款金额、实收金额
  • 注意：
    • 每个渠道的所有都要展示完
    • 如果某渠道当天没有数据，已经在后台置零处理，故前台不再做处理
      

• 柱状图2：

  • 需求：每天需要展示的数据有：各个渠道的支付笔数、退款笔数
  • 注意：
    • 每个渠道的所有都要展示完
    • 如果某渠道当天没有数据，已经在后台置零处理，故前台不再做处理
      

2.需求实现

柱状图样式代码：

        <div id="channelPayMoneyCharts" style="width: 100%;height:400px;" />
        <div id="channelPayTimeCharts" style="width: 100%;height:400px;" />

js：

• 注意：channelData是父容器调用后台接口后传输过来的数据，数据格式如上所示

<script>
export default 
  name: 'channelPie',
  props: ['channelData'],
  data () 
    return 
      // 动态赋值给柱状图
      channelPayMoneyOptionData : [],
      channelPayMoneyOptionLegend : [],
      channelPayTimeOptionData : [],
      channelPayTimeOptionLegend : [],
	  
	  channelPayMoneyOption: 
        // 提示框组件，用于配置鼠标滑过或点击图表时的显示框
        tooltip: 
          trigger: 'axis',
          axisPointer: 
            type: 'shadow',
          ,
        ,
        // 标题
        title: 
          text: '各渠道支付次数汇总分析[单位：元]',
        ,
        // 左侧显示图例（按钮）
        legend: 
          type: 'scroll',
          orient: 'horizontal',
          bottom: 10,
          // data: this.channelPayMoneyOptionLegend,
          data: []
        ,
        toolbox: 
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: 
            mark:  show: true, ,
            dataView:  show: true, readOnly: false, ,
            magicType:  show: true, type: ['line', 'bar', 'stack', 'tiled'], ,
            restore:  show: true, ,
            saveAsImage:  show: true, ,
          ,
        ,
        xAxis: [
          
            type: 'category',
            axisTick:  show: false, ,
            data: [],
          
        ],
        // y轴
        yAxis: [
          
            type: 'value',
          
        ],
        series: []
      ,
      channelPayTimeOption: 
        tooltip: 
          trigger: 'axis',
          axisPointer: 
            type: 'shadow',
          ,
        ,
        title: 
          text: '各渠道支付次数汇总分析',
        ,
        legend: 
          type: 'scroll',
          orient: 'horizontal',
          bottom: 10,
          data: [],
        ,
        toolbox: 
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: 
            mark:  show: true, ,
            dataView:  show: true, readOnly: false, ,
            magicType:  show: true, type: ['line', 'bar', 'stack', 'tiled'], ,
            restore:  show: true, ,
            saveAsImage:  show: true, ,
          ,
        ,
        xAxis: [
          
            type: 'category',
            axisTick:  show: false, ,
            data: [],
          
        ],
        yAxis: [
          
            type: 'value',
            minInterval: 1,
            axisLabel: 
              formatter: 'value 笔',
            ,
          
        ],
        series: []
      ,
    
  ,
  watch: 
    channelData: 
      handler (newValue, oldValue) 
        this.setChannelCharts(newValue)
      ,
      immediate: true,
    ,
  ,
  mounted () 
    this.showChannelPayMoneyCharts()
    this.showChannelPayTimeCharts()
  ,
  methods: 
    // 初始化series的data数组的对象元素
    dataItem() 
      return 
        // 每个柱的名字
        name: '',
        type: '',
        data: []
      
    ,
    showChannelPayMoneyCharts () 
      const channelPayMoneyCharts = this.$echarts.init(document.getElementById('channelPayMoneyCharts'))
      channelPayMoneyCharts.setOption(this.channelPayMoneyOption,true)
    ,
    showChannelPayTimeCharts () 
      const channelPayTimeCharts = this.$echarts.init(document.getElementById('channelPayTimeCharts'))
      channelPayTimeCharts.setOption(this.channelPayTimeOption,true)
    ,
    setChannelCharts (data) 

	  // 每次赋值之前，先将数据置空一次
      this.channelPayMoneyOptionData = []
      this.channelPayMoneyOptionLegend = []
      this.channelPayTimeOptionData = []
      this.channelPayTimeOptionLegend = []

      if (data.channelTotals.length > 0 && data.channelDays.length > 0) 

        // region 柱状图数据获取
        // x轴的值
        const x = []
        for (let i = 0; i < data.channelDays.length; i++) 
          x.push(data.channelDays[i].day.substring(data.channelDays[i].day.length - 2, data.channelDays[i].day.length))
        

        for (let i = 0; i < data.channelTotals.length; i++) 
          // 初始化5个对象，并给name赋值，有n个渠道，这里就初始化n*5个对象
          //截取name来判断支付渠道的类型
          const channelPayMoneyOptionDataItem1 = this.dataItem()
          channelPayMoneyOptionDataItem1.name = data.channelTotals[i].chName + "支付金额"
          channelPayMoneyOptionDataItem1.type = 'line'
          this.channelPayMoneyOptionData.push(channelPayMoneyOptionDataItem1)

          const channelPayMoneyOptionDataItem2 = this.dataItem()
          channelPayMoneyOptionDataItem2.type = 'line'
          channelPayMoneyOptionDataItem2.name = data.channelTotals[i].chName + "退款金额"
          this.channelPayMoneyOptionData.push(channelPayMoneyOptionDataItem2)

          const channelPayMoneyOptionDataItem3 = this.dataItem()
          channelPayMoneyOptionDataItem3.type = 'bar'
          channelPayMoneyOptionDataItem3.name = data.channelTotals[i].chName + "实收金额"
          this.channelPayMoneyOptionData.push(channelPayMoneyOptionDataItem3)

          const channelPayTimeOptionDataItem1 = this.dataItem()
          channelPayTimeOptionDataItem1.name = data.channelTotals[i].chName + "支付笔数"
          channelPayTimeOptionDataItem1.type = 'bar'
          this.channelPayTimeOptionData.push(channelPayTimeOptionDataItem1)

          const channelPayTimeOptionDataItem2 = this.dataItem()
          channelPayTimeOptionDataItem2.name = data.channelTotals[i].chName + "退款笔数"
          channelPayTimeOptionDataItem2.type = 'line'
          this.channelPayTimeOptionData.push(channelPayTimeOptionDataItem2)

          // 给legend数组的名字赋值
          this.channelPayMoneyOptionLegend.push(data.channelTotals[i].chName + "支付金额")
          this.channelPayMoneyOptionLegend.push(data.channelTotals[i].chName + "退款金额")
          this.channelPayMoneyOptionLegend.push(data.channelTotals[i].chName + "实收金额")

          this.channelPayTimeOptionLegend.push(data.channelTotals[i].chName + "支付笔数")
          this.channelPayTimeOptionLegend.push(data.channelTotals[i].chName + "退款笔数")
        

        // 给柱状图标题赋值
        this.channelPayTimeOption.title.text = `$data.channelDays[0].day.substr(0, 4)年$data.channelDays[0].day.substr(5, 2)月每天各支付渠道支付次数汇总统计`
        this.channelPayMoneyOption.title.text = `$data.channelDays[0].day.substr(0, 4)年$data.channelDays[0].day.substr(5, 2)月每天各支付渠道支付金额汇总统计[单位：元]`


        for (let i = 0; i < data.channelDays.length; i++) 
          // 一天的数据
          for (let j = 0; j < data.channelDays[i].channelDayDetails.length; j++) 

            for (let k = 0; k < this.channelPayMoneyOptionData.length; k++) 
              if (data.channelDays[i].channelDayDetails[j].chName === this.channelPayMoneyOptionData[k].name.substring(0,this.channelPayMoneyOptionData[k].name.length-4)) 
                this.channelPayMoneyOptionData[k].data.push(data.channelDays[i].channelDayDetails[j].totalMoney)
                this.channelPayMoneyOptionData[k + 1].data.push(data.channelDays[i].channelDayDetails[j].refundMoney)
                this.channelPayMoneyOptionData[k + 2].data.push(data.channelDays[i].channelDayDetails[j].realPay)
                k += 2
              
            
            for (let l = 0; l < this.channelPayTimeOptionData.length; l++) 
              if (data.channelDays[i].channelDayDetails[j].chName === this.channelPayTimeOptionData[l].name.substring(0,this.channelPayTimeOptionData[l].name.length-4)) 
                this.channelPayTimeOptionData[l].data.push(data.channelDays[i].channelDayDetails[j].payTime)
                this.channelPayTimeOptionData[l + 1].data.push(data.channelDays[i].channelDayDetails[j].refundTimes)
                l++
              
            
          
        

        this.channelPayTimeOption.xAxis[0].data = x
        this.channelPayMoneyOption.xAxis[0].data = x
        this.channelPayMoneyOption.legend.data = this.channelPayMoneyOptionLegend
        this.channelPayMoneyOption.series = this.channelPayMoneyOptionData
        this.channelPayTimeOption.legend.data = this.channelPayTimeOptionLegend
        this.channelPayTimeOption.series = this.channelPayTimeOptionData

        // endregion

        //region 数据渲染
        this.showChannelPayMoneyCharts()
        this.showChannelPayTimeCharts()
        // endregion
       else 
		// 清空数据
        if (this.channelPayTimeOption.series.length > 0) 
          for (let i = 0; i < this.channelPayTimeOption.series.length; i++) 
            this.channelPayTimeOption.series[i].data = []
          
          this.channelPayTimeOption.xAxis[0].data = []
        
        if (this.channelPayMoneyOption.series.length > 0) 
          for (let i = 0; i < this.channelPayMoneyOption.series.length; i++) 
            this.channelPayMoneyOption.series[i].data = []
          
          this.channelPayMoneyOption.xAxis[0].data = []
        

        this.showChannelPayCharts()
        this.showChannelTimesCharts()
        this.showChannelPayMoneyCharts()
        this.showChannelPayTimeCharts()
      
      console.log(this.channelPayMoneyOption)
      console.log(this.channelPayTimeOption)
    以上是关于vue2+echarts：后台传递一天有多类数据的时候，如何渲染柱状图的主要内容，如果未能解决你的问题，请参考以下文章
 
 vue2+echarts：使用后台传输的json数据去动态渲染echarts图表
 vue2+echarts：使用后台传输的json数据去动态渲染echarts图表
 vue2.0+echarts可视化图形开发中遇到的问题总结
 struts2框架json传递后台数据到echarts
 struts2框架json传递后台数据到echarts
 echarts + vue2.0 实现大数据监测态势感知系统