devbox
爱喝兽奶帝天荒
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue中使用echarts实现动态数据绑定、获取后端接口数据_vue echarts 动态数据

作者：爱喝兽奶帝天荒 | 2024-07-15 08:15:32

赞

踩

vue echarts 动态数据

之前几篇echarts的文章是实现了静态的柱状图、折线图、饼状图、地图，在项目中我们肯定是需要获取后端接口，将后端返回的数据显示在图表上，所以这次就记录一下如何实现echarts的动态数据绑定。

简单来讲，就是从接口获取到的数据，需要在图表的方法里再次定义一下，然后用setOption方法就可以获取到了。

1.柱状图

首先看接口传过来的数据，传过来一个数组，第一条年度2021，数量1，第二条年度2022，数量3

因为柱状图的数据有两个，横坐标和纵坐标，所以我们将传来的数据，横坐标做一个数组，纵坐标做一个数组。

首先在data中定义

  1. lwData: {}, // 论文数据
  2. lwndArr: [], // 年度数组
  3. lwtsArr: [], // 论文发表天数数组

接着获取接口数据，把接口数据处理一下放进两个数组里。年度为横坐标，将data中传来的年度循环放入年度数组。天数为纵坐标，将data中传来的天数循环放入天数数组。

  1. this.axios.post(this.counturl, {
  2.   type:'paper'
  3. }).then(res => {
  4.   if (res.result === '00000') {
  5.     this.lwData = res.data
  6.     for(let i=0;i<this.lwData.length; i++) {
  7.       this.lwndArr[i] = this.lwData[i].nd
  8.     }
  9.     for(let i=0;i<this.lwData.length; i++) {
  10.       this.lwtsArr[i] = this.lwData[i].count
  11.     }
  12.     lwndArr = this.lwndArr
  13.     lwtsArr = this.lwtsArr
  14.   } else {
  15.       this.$Message.error(res.data.information)
  16.     }
  17. })

echarts和别的获取接口数据不一样的地方，在于echarts中需要再次定义一下数组，然后把接口获取到的数据放进去，不能直接引用this里的数据。

在获取echarts图表的方法里，定义横纵坐标的两个data，然后使用setOption方法，引用定义的data，就可以显示出接口里的数据了。（不再需要const option）

  1. // 论文发表天数柱状图
  2. getLwBar () {
  3.   let lwndArr = []
  4.   let lwtsArr = []
  5.   const lwBar = echarts.init(document.getElementById('lwBar'))// 图标初始化
  6.     this.axios.post(this.counturl, {
  7.       type:'paper'
  8.     }).then(res => {
  9.       if (res.result === '00000') {
  10.         this.lwData = res.data
  11.         for(let i=0;i<this.lwData.length; i++) {
  12.           this.lwndArr[i] = this.lwData[i].nd
  13.         }
  14.         for(let i=0;i<this.lwData.length; i++) {
  15.           this.lwtsArr[i] = this.lwData[i].count
  16.         }
  17.         lwndArr = this.lwndArr
  18.         lwtsArr = this.lwtsArr
  19.         lwBar.setOption({
  20.           title: {
  21.             text: '论文发表天数柱状图'
  22.           },
  23.           tooltip: {
  24.           },
  25.           legend: {
  26.             data: ['论文发表天数']
  27.           },
  28.           xAxis:{
  29.             name: '年份',
  30.             data:lwndArr
  31.           },
  32.           yAxis:{
  33.             name:'论文发表天数',
  34.             type:'value'
  35.           },
  36.           series:[
  37.             {
  38.               name: '论文发表天数',
  39.               type: 'bar', // 类型为柱状图
  40.               data: lwtsArr,
  41.               barWidth: '20%', // 柱条宽度 每个柱条的宽度就是类目宽度的 20%
  42.               // 柱子的样式
  43.               itemStyle: {
  44.                 color: '#5574c2'
  45.               }
  46.             }
  47.           ]
  48.         })
  49.         } else {
  50.           this.$Message.error(res.data.information)
  51.         }
  52.       })
  53.       // 随着屏幕大小调节图表
  54.       window.addEventListener('resize', () => {
  55.         lwBar.resize()
  56.       })
  57.    },

效果：

2.折线图 

 折线图和柱状图一样，需要把横坐标和纵坐标分开。

首先在data中定义

  1. zzData: {}, // 著作数据
  2. zzndArr: [], // 著作年度数组
  3. zzslArr: [], // 著作出版数量数组

接着获取接口数据，setOption

  1. // 著作折线图
  2. getZzLine () {
  3.   let zzndArr = []
  4.   let zzslArr = []
  5.   const zzLine = echarts.init(document.getElementById('zzLine'))// 图标初始化
  6.   this.axios.post(this.counturl, {
  7.     type:'book'
  8.   }).then(res => {
  9.     if (res.result === '00000') {
  10.       this.zzData = res.data
  11.       for(let i=0;i<this.zzData.length; i++) {
  12.         this.zzndArr[i] = this.zzData[i].nd
  13.       }
  14.       for(let i=0;i<this.zzData.length; i++) {
  15.         this.zzslArr[i] = this.zzData[i].count
  16.       }
  17.       zzndArr = this.zzndArr
  18.       zzslArr = this.zzslArr
  19.       zzLine.setOption({
  20.       title: {
  21.         text: '著作出版数量折线图'
  22.       },
  23.       tooltip: {
  24.         trigger: 'axis'   // axis   item   none三个值
  25.       },
  26.       legend: {
  27.         data: ['著作']
  28.       },
  29.       xAxis:{
  30.         name: '年份',
  31.         data:zzndArr
  32.       },
  33.       yAxis:{
  34.         name:'数量',
  35.         type:'value'
  36.       },
  37.       series:[
  38.         {
  39.           name: '著作出版数量',
  40.           type: 'line', // 类型为z折线图
  41.           data: zzslArr,
  42.           type: 'line',
  43.           stack: 'x',
  44.           itemStyle: {
  45.             color: '#ef6567',
  46.             width: 4
  47.           }
  48.         }
  49.       ]
  50.     })
  51.   } else {
  52.     this.$Message.error(res.data.information)
  53.   }
  54. })
  55. // 随着屏幕大小调节图表
  56. window.addEventListener('resize', () => {
  57.   zzLine.resize()
  58. })
  59. },

效果：

3.饼状图 

饼状图和柱状、折线图的区别在于，饼状图只需要获取一个数据，数据格式如下：

  1. data: [
  2.   {
  3.      value: 335,
  4.      name: '初级会计师'
  5.   },
  6. {
  7.      value: 200,
  8.      name: '中级会计师'
  9.   },
  10. ]

所以我们只需要后端传过来的数据也是这样的就可以了，要注意在图表方法中再定义一次 。

接口数据：

除此之外，饼状图还有一个表头数据很重要，因为它有很多个表头数据，所以不能和柱状、折线

一样直接定义，也需要从接口获取一下，所以我们先在data中定义这两个数据。

  1. scaleData: [], // 饼状图数据
  2. scaleLegend: [], // 饼状图标注

 接着获取接口，把对应的数据获取到，使用setOption

  1. // 毕业人数
  2.       getPieEcharts () {
  3.         let scaleData= []
  4.         let scaleLegend = []
  5.         const kjjgPie = echarts.init(document.getElementById('kjjgPie'))// 图标初始化
  6.         this.axios.post(this.scaleurl, {
  7.           type:this.selectedScale
  8.         }).then(res => {
  9.           if (res.result === '00000') {
  10.             this.scaleData = res.data
  11.             scaleData = this.scaleData
  12.             for(let i = 0; i<res.data.length; i++) {
  13.               this.scaleLegend[i] = res.data[i].name
  14.             }
  15.             scaleLegend = this.scaleLegend
  16.             kjjgPie.setOption({
  17.               legend: {
  18.                 data: scaleLegend
  19.               },
  20.               tooltip: {},
  21.               color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
  22.               series: [
  23.                 {
  24.                   radius: '50%',
  25.                   // name: '毕业人数',
  26.                   type: 'pie', // 类型为柱状图
  27.                   label: {
  28.                     //echarts饼图内部显示百分比设置
  29.                     show: true,
  30.                     position: "outside", //outside 外部显示  inside 内部显示
  31.                     formatter: '{b}({d}%)',
  32.                   },
  33.                   data: scaleData
  34.                 }
  35.               ]
  36.             })
  37.           } else {
  38.             this.$Message.error(res.data.information)
  39.           }
  40.         })
  41.         // 随着屏幕大小调节图表
  42.         window.addEventListener('resize', () => {
  43.           kjjgPie.resize()
  44.         })
  45.       },

效果：

这里右上角有一个选择框，可以根据选择的数据，显示对应的饼状图。

在这里可以简单提一下，首先是select选择框：

  1. <Select  v-model="selectedScale"  style="display:inline-block;width:200px;float:right;margin-right:10px;" @on-change="scaleChange">
  2.   <Option v-for="item in selectList.scale" :value="item.code" :key="item.code" placeholder="请选择">
  3.   {{ item.name }}
  4.   </Option>
  5. </Select>

 在data中定义默认的数据：

selectedScale: 'zyzg', // 被选择的饼状图类别

用select选择框的on-change事件，当选项改变时，将改变的value传给定义的selectedScale，接口会根据selectedScale的内容，返回不一样的数据。

  1. scaleChange(value) {
  2.   this.selectedScale = value
  3.   this.getPieEcharts()
  4. },

4.地图 

 地图的具体内容可以看之前两篇地图的文章。需求是鼠标放在某一个地区，要显示对应的内容，新增的需求是要提供多个散点，还有个全省的数据。

地图和饼状图一样，可以要求后端按照规定的格式传过来，会方便很多，散点图的数据就获取对应的几条就可以了。

传过来的接口数据：

data中定义：

  1. profileData: [], // 地图数据
  2. sdData: [], // 散点数据
  3. qsljnumber: '', // 全省领军人数
  4. qslwnumber: '', // 全省论文数量
  5. qszznumber: '', // 全省著作数量

接口数据：

  1. initCharts () {
  2.         const charts = echarts.init(this.$refs['charts'])
  3.         let airData = []
  4.         let currentSdData = []
  5.         this.axios.post(this.profileurl, {
  6.         }).then(res => {
  7.           if (res.result === '00000') {
  8.             this.profileData = res.data
  9.             airData=this.profileData
  10.             this.sdData[0] = res.data[0]
  11.             this.sdData[1] = res.data[14]
  12.             this.sdData[2] = res.data[15]
  13.             this.sdData[3] = res.data[16]
  14.             currentSdData = this.sdData
  15.             this.qsljnumber = res.data[17].text.ljnumber
  16.             this.qslwnumber = res.data[17].text.lwnumber
  17.             this.qszznumber = res.data[17].text.zznumber
  18.             charts.setOption({
  19.               series:[
  20.                 {
  21.                   type: 'map',
  22.                   data:airData
  23.                 },
  24.                 {
  25.                   type: 'effectScatter',
  26.                   data:currentSdData
  27.                 }
  28.               ]
  29.             })
  30.           } else {
  31.             this.$Message.error(res.data.information)
  32.           }
  33.         })
  34.         const option = {
  35.           // 背景颜色
  36.           backgroundColor: 'white',
  37.           // 提示浮窗样式
  38.           tooltip: {
  39.             show: true,
  40.             trigger: 'item',
  41.             alwaysShowContent: false,
  42.             backgroundColor: '#0C121C',
  43.             borderColor: 'rgba(0, 0, 0, 0.16);',
  44.             hideDelay: 100,
  45.             triggerOn: 'mousemove',
  46.             enterable: true,
  47.             textStyle: {
  48.               color: '#DADADA',
  49.               fontSize: '12',
  50.               width: 20,
  51.               height: 30,
  52.               overflow: 'break'
  53.             },
  54.             formatter (params) {
  55.               console.log(params)
  56.               return `地区：${params.data.name}</br>领军人数：${params.data.text.ljnumber}</br>论文数量：${params.data.text.lwnumber}</br>著作数量：${params.data.text.zznumber}`
  57.             },
  58.             showDelay: 100
  59.           },
  60.           // 地图配置
  61.           geo: {
  62.             map: 'jiangsu',
  63.             // 地图文字
  64.             label: {
  65.               // 通常状态下的样式
  66.               normal: {
  67.                 // 默认是否显示地区名称
  68.                 show: true,
  69.                 textStyle: {
  70.                   color: 'black'
  71.                 }
  72.               },
  73.               // 鼠标放上去的样式
  74.               emphasis: {
  75.                 textStyle: {
  76.                   color: 'black'
  77.                 }
  78.               }
  79.             },
  80.             // 地图区域的样式设置
  81.             itemStyle: {
  82.               normal: {
  83.                 // 地图边界颜色
  84.                 borderColor: '#fff',
  85.                 // 地图区域背景颜色
  86.                 areaColor: '#AAD5FF',
  87.               },
  88.               // 鼠标放上去高亮的样式
  89.               emphasis: {
  90.                 // 鼠标放上去地图区域背景颜色
  91.                 areaColor: '#0057da',
  92.                 borderWidth: 0
  93.               }
  94.             }
  95.           },
  96.           series: [
  97.             {
  98.               data: airData,
  99.               geoIndex: 0,  
  100.               type:'map'
  101.             },
  102.             {
  103.               type: 'effectScatter',
  104.               coordinateSystem: 'geo',
  105.               effectType: 'ripple',
  106.               showEffectOn: 'render',
  107.               rippleEffect: {
  108.                 period: 1,
  109.                 scale: 2,
  110.                 brushType: 'fill'
  111.               },
  112.               symbolSize: [15, 15],
  113.               // 这里渲染标志里的内容以及样式
  114.               tooltip: {
  115.                 show: true,
  116.                 formatter (value) {
  117.                   return `地区：${value.data.name}</br>领军人数：${value.data.text.ljnumber}</br>论文数量：${value.data.text.lwnumber}</br>著作数量：${value.data.text.zznumber}`
  118.                 },
  119.                 color: '#fff'
  120.               },
  121.               hoverAnimation: true,
  122.               // 标志的样式
  123.               itemStyle: {
  124.                 normal: {
  125.                   color: 'rgba(255, 235, 59, .7)',
  126.                   shadowBlur: 10,
  127.                   shadowColor: '#333'
  128.                 }
  129.               },
  130.               zlevel: 1,
  131.               data: currentSdData
  132.             }
  133.           ],
  134.           // 视觉映射组件
  135.           visualMap:{
  136.             min:1,
  137.             max:300,
  138.             inRange:{
  139.               color:['#e0ffff', '#006edd']
  140.             },
  141.             calculable: true //出现滑块
  142.           }
  143.         }
  144.         // 地图注册，第一个参数的名字必须和option.geo.map一致
  145.         echarts.registerMap('jiangsu', zhongguo)
  146.  
  147.         charts.setOption(option)
  148.       },

效果：

关于之前写的静态图表的文章链接：

vue中使用echart绘制柱状图、折现图、饼状图_芝士焗红薯的博客-CSDN博客_echart饼状图

关于之前写的自定义地图样式的文章链接：

vue中使用echarts实现地图自定义浮窗内容及样式_芝士焗红薯的博客-CSDN博客_echarts 地图自定义样式

vue中使用echarts实现地图颜色渐变及自定义浮窗内容_芝士焗红薯的博客-CSDN博客_echarts 地图整体渐变色

vue中使用echarts实现地图散点图_芝士焗红薯的博客-CSDN博客_echarts实时更新散点图

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/爱喝兽奶帝天荒/article/detail/828427
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号