vue2+echarts：使用后台传输的json数据去动态渲染echarts图表

已于 2022-09-26 14:25:06 修改
阅读量2.3k 收藏 7
点赞数 1
分类专栏： 前端 文章标签： echarts json javascript vue
于 2022-09-21 08:34:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54355172/article/details/126957187
版权

1.源码

1.说明

  • 只提供子组件代码，totalData 是从父组件传输过来的数据，其数据格式如下:

    父组件的代码就不提供了

2.代码

main.js 引入echarts

import * as echarts from 'echarts'// 在import的后面，echarts的前面加一个 * as
Vue.prototype.$echarts = echarts

vue子组件代码：

  • html

    <div id="totalCharts" style="width: 100%;height:300px;"></div>


    <div id="timesCharts" style="width: 100%;height:300px;">123</div>


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

  • js代码

    <script>
	export default {
	  name: 'totalPie',
	  props: ['totalData'],
	  data () {
	    return {
	      totalPayOption: {
	        title: {
	          text: '总支付金额数据[单位：元]',
	          left: 'center',
	        },
	        tooltip: {
	          trigger: 'item',
	          formatter: '{a} <br/>{b}: {c} ({d}%)',
	        },
	        legend: {
	          orient: 'vertical',
	          left: 10,
	          data: ['总支付金额', '总退款金额', '总实收金额'],
	        },
	        series: [
	          {
	            name: '总支付金额',
	            type: 'pie',
	            radius: [0, '40%'],
	            label: {
	              show: true,
	              position: 'inner',
	            },
	            labelLine: {
	              show: false,
	            },
	            data: [],
	            emphasis: {
	              itemStyle: {
	                shadowBlur: 10,
	                shadowOffsetX: 0,
	                shadowColor: 'rgba(0, 0, 0, 0.5)',
	              },
	            },
	          },
	          {
	            name: '总支付金额',
	            type: 'pie',
	            radius: ['55%', '70%'],
	            label: {
	              show: false,
	              position: 'inner',
	            },
	            labelLine: {
	              show: false,
	            },
	            data: [],
	          }
	        ],
	      },
	      totalTimesOption: {
	        title: {
	          text: '总支付笔数数据',
	          left: 'center',
	        },
	        tooltip: {
	          trigger: 'item',
	          formatter: '{a} <br/>{b}: {c} ({d}%)',
	        },
	        legend: {
	          orient: 'vertical',
	          left: 10,
	          data: ['总支付笔数', '总退款笔数'],
	        },
	        series: [
	          {
	            name: '支付笔数',
	            type: 'pie',
	            radius: '70%',
	            label: {
	              position: 'inner',
	            },
	            labelLine: {
	              show: false,
	            },
	            data: [],
	            emphasis: {
	              itemStyle: {
	                shadowBlur: 10,
	                shadowOffsetX: 0,
	                shadowColor: 'rgba(0, 0, 0, 0.5)',
	              },
	            },
	          }
	        ],
	      },
	      totalOption: {
	        tooltip: {
	          trigger: 'axis',
	          axisPointer: {
	            type: 'cross',
	            crossStyle: {
	              color: '#999',
	            },
	          },
	        },
	        title: {
	          text: '每天支付数据汇总统计',
	        },
	        legend: {
	          bottom: 10,
	          data: ['支付总额', '退款总额', '实收金额', '支付笔数', '退款笔数'],
	        },
	        toolbox: {
	          show: true,
	          orient: 'vertical',
	          left: 'right',
	          top: 'center',
	          feature: {
	            dataView: { show: true, readOnly: false, },
	            magicType: { show: true, type: ['line', 'bar'], },
	            restore: { show: true, },
	            saveAsImage: { show: true, },
	          },
	        },
	        xAxis: [
	          {
	            type: 'category',
	            data: [],
	            axisPointer: {
	              type: 'shadow',
	            },
	          }
	        ],
	        yAxis: [
	          {
	            type: 'value',
	            name: '金额/元',
	            axisLabel: {
	              formatter: '{value} 元',
	            },
	          },
	          {
	            type: 'value',
	            minInterval: 1,
	            axisLabel: {
	              formatter: '{value} 笔',
	            },
	          }
	        ],
	        series: [
	          {
	            emphasis: {
	              itemStyle: {
	                shadowBlur: 10,
	                shadowOffsetX: 0,
	                shadowColor: 'rgba(0, 0, 0, 0.5)',
	              },
	            },
	          }
	        ],
	      },
	    }
	  },
	  /* 监听数据变化，实时渲染图表 */
	  watch: {
	    /* totalData (newValue, oldValue) {
	      this.setTotalCharts(newValue)
	    }, */
	    totalData: {
	      handler (newValue, oldValue) {
	        this.setTotalCharts(newValue)
	      },
	      immediate: true,
	    },
	  },
	  mounted () {
	    this.showTotalPayCharts()
	    this.showTotalTimesCharts()
	    this.showTotalCharts()
	  },
	  methods: {
	    showTotalPayCharts () {
	      // 基于准备好的dom，初始化echarts实例
	      const payCharts = this.$echarts.init(document.getElementById('totalCharts'))// 也可以通过$refs.newCharts的方式去获取到dom实例。
	
	      payCharts.setOption(this.totalPayOption,true)
	    },
	    showTotalTimesCharts () {
	      const timesChart = this.$echarts.init(document.getElementById('timesCharts'))
	      timesChart.setOption(this.totalTimesOption,true)
	    },
	    showTotalCharts () {
	      const totalDataCharts = this.$echarts.init(document.querySelector('#totalDataCharts'))
	      totalDataCharts.setOption(this.totalOption,true)
	    },
	
	    /*
	      注意：echarts不会自动帮你渲染数据的，需要手动再次调用setOption函数
	        所以每次都要重新init()，然后再次调用setOption()
	    */
	    setTotalCharts (totalData) {
	      /* 饼图数组 */
	      const innerPayData = []
	      const outterPayData = []
	      const timesData = []
	
	      /* 柱状图数据 */
	      const series = []
	      const x = []
	
	      if (totalData.totals.length > 0) {
	        // region 给饼图和柱状图的option赋值
	        /* 总支付金额数据饼图 */
	        /* 将饼图数据赋值给数组 */
	        for (let i = 0; i < this.totalPayOption.legend.data.length; i++) {
	          const pieInnerData = {}
	          const pieOutterData = {}
	
	          if (this.totalPayOption.legend.data[i] === '总支付金额') {
	            pieInnerData.value = this.totalData.totalPay
	            pieInnerData.name = '总支付金额'
	          }
	          if (this.totalPayOption.legend.data[i] === '总退款金额') {
	            pieOutterData.value = this.totalData.totalRefund
	            pieOutterData.name = '总退款金额'
	          }
	          if (this.totalPayOption.legend.data[i] === '总实收金额') {
	            pieOutterData.value = this.totalData.totalReal
	            pieOutterData.name = '总实收金额'
	          }
	
	          innerPayData.push(pieInnerData)
	          outterPayData.push(pieOutterData)
	        }
	        /* 将饼图数据数组中的值赋值给饼图的data */
	        this.totalPayOption.series[0].data = innerPayData
	        this.totalPayOption.series[1].data = outterPayData
	
	        /* 总支付笔数数据饼图 */
	        /* 将饼图数据赋值给数组 */
	        for (let i = 0; i < this.totalTimesOption.legend.data.length; i++) {
	          const pieData = {}
	          if (this.totalTimesOption.legend.data[i] === '总支付笔数') {
	            pieData.value = this.totalData.totalTime
	            pieData.name = '总支付笔数'
	          }
	          if (this.totalTimesOption.legend.data[i] === '总退款笔数') {
	            pieData.value = this.totalData.totalRefundTime
	            pieData.name = '总退款笔数'
	          }
	          timesData.push(pieData)
	        }
	        this.totalTimesOption.series[0].data = timesData
	
	        /* 给柱状图赋值 */
	        for (let i = 0; i < totalData.totals.length; i++) {
	          x.push(totalData.totals[i].day.substring(totalData.totals[i].day.length - 11, totalData.totals[i].day.length - 9))
	        }
	        /* 将数组暂存于数组中 */
	        for (let i = 0; i < this.totalOption.legend.data.length; i++) {
	          const serie = {}
	          if (this.totalOption.legend.data[i] === '支付笔数' || this.totalOption.legend.data[i] === '退款笔数') {
	            serie.name = this.totalOption.legend.data[i]
	            serie.type = 'line'
	            serie.yAxisIndex = 1
	          } else {
	            serie.name = this.totalOption.legend.data[i]
	            serie.type = 'bar'
	          }
	          const data = []
	          for (let j = 0; j < totalData.totals.length; j++) {
	            if (this.totalOption.legend.data[i] === '支付笔数') {
	              data.push(totalData.totals[j].payTime)
	            } else if (this.totalOption.legend.data[i] === '支付总额') {
	              data.push(totalData.totals[j].totalMoney)
	            } else if (this.totalOption.legend.data[i] === '退款总额') {
	              data.push(totalData.totals[j].refundMoney)
	            } else if (this.totalOption.legend.data[i] === '实收金额') {
	              data.push(totalData.totals[j].totalReal)
	            } else if (this.totalOption.legend.data[i] === '退款笔数') {
	              data.push(totalData.totals[j].refundTimes)
	            }
	          }
	          serie.data = data
	          series.push(serie)
	        }
	        this.totalOption.title.text = `${totalData.totals[0].day.substr(0, 4)}年${totalData.totals[0].day.substr(5, 2)}月每天支付数据汇总统计`
	        this.totalOption.series = series
	        this.totalOption.xAxis[0].data = x
	        // endregion
	
	        // region 数据渲染
	        this.showTotalPayCharts()
	        this.showTotalTimesCharts()
	        this.showTotalCharts()
	        // endregion
	      } else {
	        // region 数据置空
	        /* 传输的数据为空的时候一定要置空，以清除内存中的数据 */
	        this.totalPayOption.series[0].data = [...[]]
	        this.totalPayOption.series[1].data = [...[]]
	        this.totalTimesOption.series[0].data = [...[]]
	
	        if (this.totalOption.series.length > 0) {
	          for (let i = 0; i < this.totalOption.series.length; i++) {
	            this.totalOption.series[i].data = []
	          }
	          this.totalOption.xAxis[0].data = []
	          /* 渲染一遍柱状图数据 */
	        }
	        this.showTotalPayCharts()
	        this.showTotalTimesCharts()
	        this.showTotalCharts()
	        // endregion
	      }
	    },
	  },
	}
</script>

2.注意

  • payCharts.setOption(this.totalPayOption, true) 这个里面的totalPayOption 才是你要改变的数据
  • 最终的呈现效果要看option里面的数据
  • 实列的作用是让你的dom元素有呈现echarts图像的能力。setoption是让echart具体长什么样子(饼图，环形图，地图等)

3.补充

1.数据置空

注意： 当接收到的json对象为空的时候，可能会出现之前的数据残留，使得图表依然有数据的情况，所以，当接收到的json对象为空的时候，一定要将图表的数据置空，然后再次 setOption 渲染一遍！！！

代码如下：

else {
        /* 传输的数据为空的时候一定要置空，以清除内存中的数据 */
        this.totalPayOption.series[0].data = [...[]]
        this.totalPayOption.series[1].data = [...[]]
        this.totalTimesOption.series[0].data = [...[]]
        
        if (this.totalOption.series.length > 0) {
          for (let i = 0; i < this.totalOption.series.length; i++) {
            this.totalOption.series[i].data = []
          }
          this.totalOption.xAxis[0].data = []
        }
        this.showTotalPayCharts()
	    this.showTotalTimesCharts()
	    this.showTotalCharts()
}

2.数据渲染位置

建议在一个组件中的所有echarts图表的数据都设置好了之后，再去调用setOption()进行数据渲染，防止出现有些图表渲染不了的情况

364.99°
关注
专栏目录
ECharts折线图渲染json格式数据（格式为对象）
前端视听
05-14 694
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://c
ECharts访问后台，JSON格式返回数据实例
weixin_33743248的博客
11-05 2138
完成图         一、页面代码 &lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quo
实战篇：（七）Vue2项目中使用 echarts（5.2.2）图表组件含代码
最新发布
mmc123125的博客
10-10 771
Vue2项目中使用 echarts（5.2.2）图表组件： 响应式布局和自适应设计 fontSize(res) 函数根据窗口宽度调整字体大小，使得图表的文字在不同屏幕分辨率下能够自动调整，适合大屏展示和移动端显示。 高度定制化的图表 代码中通过 getPie3D 和 getParametricEquation 方法自定义了 3D 饼图的外观和行为，图表的颜色、角度、旋转效果等都可以根据业务需求灵活调整。这种高度定制化让图表能够满足多种场景需求，而不仅限于 ECharts 的默认样式。
VUE2框架：Echarts渲染接口数据
qq_42139580的博客
08-29 1493
思路相同，首先保证series中的data拿到了接口调回来的数据，然后获取新的数据后面再次初始化echarts即调用。//获取处理之后的数据并赋给echarts。//组件销毁前要注销echarts实例。// Echarts配置对象。
vue如何使用后端的数据动态渲染echarts图
qq_42919419的博客
04-14 1949
vue使用后端返回的数据动态渲染echarts图
vue.js 流程图根据后端数据渲染
热门推荐
云
05-19 5万+
【代码】vue.js 流程图根据后端数据渲染。
ECharts加载json数据解决方案（以折线图为例）
lwgkzl的博客
07-21 4万+
ECharts是一个纯 Javascript 的图表库，提供了常规的折线图、柱状图、散点图、饼图、k线图等十分炫酷的图表，最主要的要文档还是中文的，制作者为baidu. 官方文档和五分钟上手教程： http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts 不过美中不足的是...
Vue+Echarts 项目演练 中心地图容器json数据
04-24
在本项目中，我们将探讨如何在Vue.js框架中结合Echarts库来实现一个中心地图容器，其中涉及到的主要知识点包括Vue.js的基本用法、Echarts的图表渲染以及json数据的处理。首先，我们来详细了解这三个核心概念。 Vue....
vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置）
10-17
在本文中，我们将探讨如何使用Vue.js和ECharts库来创建一个可拖动节点的折线图，并且支持拖动方向和上下限的设置。首先，我们要了解Vue和ECharts的基本概念。 Vue.js是一个轻量级的前端JavaScript框架，它采用组件...
VUE+ECharts：C# API驱动的设备管理图表动态展示
2. **响应式数据绑定**: 在模板部分，如`<span class="spanC">{{eqitQty}}</span>`这样的代码表示数据是从后台通过JSON格式返回，Vue会自动监听这些数据的变化，并更新视图。你需要在Vue实例中定义`eqitQty`等属性，...
VUE+ echarts图表动态获取后台数据详解---饼图与折线图
qq_44016753的博客
06-05 1万+
总结一下自己最近项目中用echarts动态获取接口数据并画图的方法。 1、对原型的理解与需求分析 话不多说，先看下原型： 这里的需求是：选取el-date-picker中的自定义时间、点击本周、本月、本年时，将数据显示在饼图中 这里的需求是：选取el-date-picker中的自定义时间、点击本周、本月、本年时，将数据显示在饼图中这里的需求是：选取el-date-picker中的自定义时间、点击本周、本月时，折线图的X轴（时间轴）返回的日期格式是每天的统计量 这里的需求是：点击本年时，折线图的X轴（时间轴）
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
10-16
主要介绍了vue.js实现数据库的JSON数据输出渲染到html页面功能,结合实例形式分析了vue.js针对本地json数据的读取、遍历输出相关操作技巧,需要的朋友可以参考下
Vue整合websocker+echar实现后台数据实时展示
08-29
在本项目中，我们主要探讨如何使用Vue.js框架与ECharts图表库，结合WebSocket技术来实现后台数据的实时展示。以下是对每个知识点的详细说明： 1. **Vue.js**: Vue.js 是一个轻量级的前端JavaScript框架，它以其易学...
echarts 图表 向后端获取数值 并渲染对应值 和 api运用
weixin_68266812的博客
12-01 1107
【代码】echarts 图表 获取数值 使用渲染。
Vue2.0 使用 echarts
m0_54355172的博客
07-27 994
到此，我们肯定要用自己的数据去渲染 echarts 图表，即上述案例中的 title、legend、series 都必须由我们自己的数据来渲染。这里就附上前后端代码了，因为操作比较简单，就简单说一下思路。在 mounted 钩子函数中调用初始化 echarts 图表的方法。template 中定义一个 div ，作为显示圆盘的载体。在 method 中定义初始化 echarts 的方法。main.js，引入 echarts。安装 echarts 依赖。
form-create 通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件
qq_42551543的博客
07-08 1227
form-create 通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件
vue后台返回的数据渲染到echarts饼图上
weixin_46015461的博客
07-15 4815
vue后台返回的数据渲染到echarts饼图上
vue中使用本地的json文件进行echarts画图
lixinhui2323的博客
05-22 977
中间读取本地json，使用的是Jquery。需要提前在项目中配置好Jquery。以后可以哪里需要这个画图组件，就哪个地方引入即可。
vue中使用iview一个数据分成两列渲染（render,竖列，左右不同数据）
vue+iview 动态渲染表格（vue.js结合iview插件）
03-19 6638
我在项目中有一个需求是下面这样的样式 开始的思路是使用iview中的table的columns，给表头数据数据使用render渲染不同的数据（如下） { title: '旧版本', key: 'name', align: 'center', render: (h, params) =...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

364.99°

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值