定制设计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.       },

效果：

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

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

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发