关键词：

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：使用后台传输的json数据去动态渲染echarts图表(代码片段)
...数据格式如下:父组件的代码就不提供了2.代码main.js引入echartsimport*asechartsfrom'echarts'//在import的后面，echarts的前面加一个*asVue.prototype.$echarts=echartsv  查看详情  
                
struts2框架json传递后台数据到echarts(代码片段)
echarts是百度公司提供的一个开源的大数据可视化图标展示工具，是百度大数据可视化的关键工具（点击打开链接）。最近因为项目需要要做可视化，就用了这个工具，发现效果还可以。回顾当初自己入门echarts...  查看详情  
                
struts2框架json传递后台数据到echarts(代码片段)
echarts是百度公司提供的一个开源的大数据可视化图标展示工具，是百度大数据可视化的关键工具（点击打开链接）。最近因为项目需要要做可视化，就用了这个工具，发现效果还可以。回顾当初自己入门echarts...  查看详情  
                
如何修改echarts的雷达图背景
参考技术AEcharts是前端的图表，百度上有Demo的，只要从后台向前台传递json数据，解析下绑定到Echarts上，即可显示效果。步骤：后台取到数据，转化为json；前台获取到json，改写Echarts调用的js；  查看详情  
                
echarts+vue2.0实现大数据监测态势感知系统
#echarts+vue2.0实现大数据监测态势感知系统###具体效果图如下：在线链接：https://ts.wuthreat.com/#/login  查看详情  
                
几个高效做事的法则，让你的一天有25小时
...该知道，我人比头发卷，高产似母猪，好像我一天有25个小时一样。但事实上，我的学习和工作效率并不高，记性还不好！之所以能做很多事，主要是比较会挤时间，但单位时间的产出其实并不高。...  查看详情  
                
转载vue2.x实战之后台管理系统开发(代码片段)
2.常见需求01.父子组件通信a.父->子（父组件传递数据给子组件）使用props，具体查看文档-使用Prop传递数据（cn.vuejs.org/v2/guide/co…b.父->子（在父组件上调用子组件内的方法）使用ref，具体查看文档-子组件索引（cn.vuejs.org/v2/gu...  查看详情  
                
vue2.0子组件能不能修改父组件传递过来的数据
...间接修改数据1：子组件通过computed计算属性来修改父组件传递的值2:子组件通过data修改父组件传递过来的数据，把传递过来的数据作为data中局部数据的初始值使用：  查看详情  
                
vue2.0组件之间的数据传递
组件间的数据传递//父组件<template><divclass="order"><dialog-addprov-on:closedialog="close":proinfo="proinfo"></dialog-addpro></div></template><script>importdaddprofrom‘.  查看详情  
                
使用echarts实现了一个折现图，数据是一天24小时(代码片段)
...rue,realtime:true,startValue:arr.length-240,endValue:arr.length 使用echarts实现了一个折现图，数据是一天24小时，每隔30s从数据库取一次数据，但是这样可读性很低。所以需要在加载图片后，显示最近两个小时的数据，但是dataZoom只能控制...  查看详情  
                
echarts.js这么调成反方向动画
参考技术A　　p>Echarts是前端的图表，只要从后台向前台传递json数据，解析下绑定到Echarts上，百度上有Demo的；前台获取到json，即可显示效果。步骤，改写Echarts调用的js，转化为json：后台取到数据追问运动轨迹能不能换一个方...  查看详情  
                
echarts动态加载后台数据
注意：1、用Ajax请求获取后台数据2、Echarts只能处理Json数据后台Controller：根据业务需求不同而返回不同数据，我前台要循环遍历Echarts的series进行数据添加，所以后台返了个二维数组过去。前端JSP页面：为Echarts准备一个具有高宽...  查看详情  
                
vue2.0props数据传递
...bsp;效果图：2.使用props绑定静态数据：（1）这种方法用于传递字符串，且值是写在父组件自定义元素上的。（2）下面示例中的写法，不能传递父组件data属性中的值（3）会覆盖模板的  查看详情  
                
echarts的简单应用之饼图(代码片段)
　　接上一篇文章：echarts的简单应用之（一）柱形图：https://www.cnblogs.com/jylee/p/9359363.html本篇文章讲述饼图，撇过折线图不说，是因为折线图与柱形图的数据传递方式一样，能理解柱形图就能理解折线图。Echarts官网上有实例可...  查看详情  
                
echarts雷达图怎么在类目值下面显示数值
参考技术AEcharts是前端的图表，百度上有Demo的，只要从后台向前台传递json数据，解析下绑定到Echarts上，即可显示效果。步骤：后台取到数据，转化为json；前台获取到json，改写Echarts调用的js；  查看详情  
                
vue2中component父子组件传递数据props的使用
...组件的数据。修改父亲传过来的props数据的时候父亲必须传递对象，否则不能修改。现在是传递对象的语法app.vue（父组件）:<stylescopedlang=‘stylus‘></style><template><div><  查看详情  
                
后台数据转化为echarts的二维数组
{letoriginData={"code":"000000","message":"成功","data":{"list":{"白宇飞区":[{"companyCode":"0679","companyName":"重庆分","purPrice":110.25,"regionName":"白宇飞区","regionCode":"R004"},{"companyCode":"0678","compa  查看详情  
                
vue2.0组件间数据传递
Vue1.0组件间传递　　使用$on()监听事件；　　使用$emit()在它上面触发事件；　　使用$dispatch()派发事件，事件沿着父链冒泡；　　使用$broadcast()广播事件，事件向下传导给所有的后代Vue2.0后$dispatch()，$broadcast()被弃用，见https://cn....  查看详情