定制小程序开发费用【ECharts】调用接口获取后端数据的四种方法

使用eacharts做大屏，定制小程序开发费用需要使用后端数据，定制小程序开发费用下面的方法是自己试过有效的，定制小程序开发费用有什么不对的，望各位大佬指点。

目录


方法一：在mounted中使用定时器调用eacharts方法（定时器可以获取到data中的数据）

  1. mounted () {
  2.     setTimeout(() => {
  3.       this.axisOption() // 树状
  4.       this.pieOption()//饼图
  5.     }, 2000)
  6.   },
  7. //或者
  8. mounted () {
  9.     setTimeout(async () => {
  10.       const res = await Getwx()
  11.       this.Monthlist = res.Data.Monthlist
  12.       this.Visitpvlist = res.Data.Visitpvlist
  13.       this.drawLine();//柱状图
  14. }, 0);
  15. },

方法二：在调用数据的时候调用图表（一个页面的所有数据都在这一个接口中）

  1. created () {
  2.     this.GetProjectAll (）
  3.   },
  4.  
  5.  methods: {
  6. // 获取数据
  7.     async GetProjectAll () {
  8.       const res = await GetProjectAll({ projectid: this.formdata.type })
  9.       this.tableData = res.data.jrgrsl.data
  10.       this.pieData = res.data.clbp.data
  11.       this.$nextTick(() => {
  12.         this.axisOption() // 树状
  13.         this.pieOption()//饼图
  14.       })
  15.     },
  16.   }


 

方法三：使用chartes中的

  1. <script>
  2. import * as echarts from 'echarts'
  3. import { getStatistics } from '@/api/home'
  4. export default {
  5.   data () {
  6.     return {
  7.       mainData: [],//折线图数据
  8.     }
  9.   },
  10.   mounted () {
  11.      this.chartSetting();
  12.   },
  13.   created () {
  14.     this.CeData()
  15.   },
  16.   methods: {
  17.     // 返回数据
  18.     async CeData () {
  19.       const { data } = await getStatistics()
  20.       this.mainData = data.mainData
  21.     },
  22.     // 折现图
  23.     chartSetting () {
  24.       // 基于准备好的dom，初始化echarts实例
  25.       this.mainChart = echarts.init(document.getElementById('main'))
  26.       const option = {
  27.         tooltip: {
  28.           trigger: 'axis',
  29.           axisPointer: {
  30.             type: 'cross',
  31.             label: {
  32.               backgroundColor: '#6a7985'
  33.             }
  34.           }
  35.         },
  36.         dataset: [ // 数据
  37.           {  source: this.mainData // 表数据 },
  38.           { transform: {
  39.               type: 'sort'
  40.             }
  41.           }
  42.         ],
  43.         xAxis: [
  44.           {
  45.             type: 'category',
  46.             boundaryGap: false,
  47.             axisLabel: { // 底部文字设置
  48.               interval: 0, // 控制是否全部显示
  49.               fontSize: 12
  50.             },
  51.             axisLine: { // 底部横线
  52.               show: false
  53.             },
  54.             axisTick: { // 刻度线
  55.               show: false
  56.             }
  57.           }
  58.         ],
  59.         yAxis: [
  60.           { type: 'value' }
  61.         ],
  62.         series: [
  63.           {
  64.             name: '项目',
  65.             type: 'line',
  66.             stack: 'Total',
  67.             smooth: true,
  68.             lineStyle: {  width: 1,   color: '#2e3192' },
  69.             showSymbol: false,
  70.             label: {  show: true,  position: 'top' },
  71.             areaStyle: {
  72.               opacity: 0.8,
  73.               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  74.                 {  offset: 0,  color: '#62a0f8' },
  75.                 {  offset: 1, color: '#b5d5ff' }
  76.               ])
  77.             },
  78.             markPoint: { // 最大值和最小值标注
  79.               data: [
  80.                 { type: 'max', name: '最大值' }
  81.               ]
  82.             },
  83.             emphasis: {  focus: 'series' }
  84.           }
  85.         ]
  86.       }
  87.       // 绘制图表
  88.       this.mainChart.setOption(option)
  89.       const that = this
  90.       window.addEventListener('resize', function () {
  91.         that.mainChart.resize()
  92.       })
  93.     },
  94.   }
  95. }
  96. </script>



 

方法四：在对应图表中，用ajax请求

  1.  drawLine2 () {
  2.       var chartDom = document.getElementById('main2');
  3.       var myChart = echarts.init(chartDom);
  4.       var option;
  5.  
  6.       option = {
  7.         tooltip: {
  8.           trigger: 'axis',
  9.           axisPointer: {
  10.             type: 'cross',
  11.             crossStyle: {
  12.               color: '#999'
  13.             }
  14.           }
  15.         },
  16.         grid: {
  17.           left: "11%",
  18.           width: "80%",
  19.           height: "60%"
  20.         },
  21.         legend: [{
  22.           data: ['单位: 秒'],
  23.           top: "10",
  24.           left: "10",
  25.           itemWidth: 8,
  26.           itemHeight: 8,
  27.           icon: "rect",
  28.           textStyle: {
  29.             color: "#fff"
  30.           }
  31.         }, {
  32.           data: ['增速%'],
  33.           top: "10",
  34.           right: "5%",
  35.           itemWidth: 8,
  36.           itemHeight: 8,
  37.           icon: "rect",
  38.           textStyle: {
  39.             color: "#fff"
  40.           }
  41.         }],
  42.         xAxis: [
  43.           {
  44.             type: 'category',
  45.             data: [],
  46.             axisPointer: {
  47.               type: 'shadow'
  48.             },
  49.             axisTick: {
  50.               show: false
  51.             },
  52.             axisLabel: {
  53.               interval: 0,
  54.               textStyle: {
  55.                 color: '#b8b8ba',
  56.               },
  57.             }
  58.           }
  59.         ],
  60.         yAxis: [
  61.           {
  62.             type: 'value',
  63.             min: 0,
  64.             max: 10000,
  65.             interval: 2000,
  66.             axisLabel: {
  67.               formatter: function (value) {
  68.                 return value + ""
  69.               },
  70.               textStyle: {
  71.                 color: '#b8b8ba',
  72.               },
  73.             },
  74.             axisLine: {
  75.               show: true
  76.             },
  77.             axisTick: {
  78.               show: false
  79.             },
  80.             splitLine: {
  81.               show: true,
  82.               lineStyle: {
  83.                 width: 0.5
  84.               }
  85.             },
  86.             symbol: "triangle"
  87.           },
  88.           {
  89.             type: 'value',
  90.             min: 0.4,
  91.             max: 0.9,
  92.             interval: 0.1,
  93.             axisLabel: {
  94.               formatter: '{value}',
  95.               textStyle: {
  96.                 color: '#b8b8ba',
  97.               },
  98.             },
  99.             splitLine: {
  100.               show: true,
  101.               lineStyle: {
  102.                 width: 0.5
  103.               }
  104.             },
  105.           }
  106.         ],
  107.         series: [
  108.           {
  109.             name: '单位: 秒',
  110.             type: 'bar',
  111.             data: [],
  112.             itemStyle: {
  113.               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  114.                 { offset: 0, color: '#01c7f4' },
  115.                 { offset: 1, color: '#003fe2' }
  116.               ]),
  117.               borderRadius: 8
  118.             },
  119.             barWidth: 10
  120.           },
  121.           {
  122.             name: '增速%',
  123.             type: 'line',
  124.             areaStyle: {},
  125.             yAxisIndex: 1,
  126.             data: [],
  127.             itemStyle: {
  128.               color: "#77ff3b",
  129.             },
  130.             lineStyle: {
  131.               width: 1
  132.             },
  133.             symbolSize: 7,
  134.             areaStyle: {
  135.               opacity: 0.4,
  136.               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  137.                 { offset: 1, color: '#040d0c' },
  138.                 { offset: 0, color: '#5cd62c' }
  139.               ])
  140.             },
  141.           }
  142.         ]
  143.       };
  144.       const zoomSize = 6;
  145.       myChart.on('click', function (params) {
  146.         console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
  147.         myChart.dispatchAction({
  148.           type: 'dataZoom',
  149.           startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
  150.           endValue:
  151.             dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
  152.         });
  153.       });
  154.       option && myChart.setOption(option);
  155.       $.ajax({
  156.         type: "get",
  157.         // async: false, //同步执行
  158.         url: "api/WxStatistics/GetStatisticsData",
  159.         data: {},
  160.         success: function (result) {
  161.           myChart.setOption({
  162.             xAxis: { data: result.Data.Monthlist },
  163.             series: [
  164.               {
  165.                 data: result.Data.Staytimeuvlist,
  166.               },
  167.               {
  168.                 data: [0.6, 0.65, 0.65, 0.68, 0.58, 0.61, 0.58, 0.6, 0.61, 0.65, 0.63, 0.55],
  169.               }
  170.             ]
  171.           })
  172.         },
  173.         error: function (errorMsg) {
  174.           alert("不好意思，图表请求数据失败啦!");
  175.           myChart.hideLoading();
  176.         }
  177.       })
  178.       window.addEventListener("resize", function () {
  179.         myChart.resize();
  180.       });
  181.     },

注意

如果一个图表需要展示不同数据时，每获取一次数据，图表都会重新渲染一次（例如下拉框中选取数据后，图表切换对应数据）。
可能会出现There is a chart instance already initialized on the dom.这样的警告，意思是dom上已经初始化了一个图表实例。
解决办法：可以在每次渲染前先销毁这个实例，然后再重新渲染。

  1. var myChart //先注册全局变量
  2.  
  3.  axisOption () {
  4.       //在方法内判断，然后销毁实例，然后再初始化
  5.       if (myChart != null && myChart != "" && myChart != undefined) {
  6.         myChart.dispose();//销毁
  7.       }
  8.       // 基于准备好的dom，初始化echarts实例
  9.       myChart = echarts.init(document.getElementById('axisMain'))
  10.       const option = { }
  11.       // 绘制图表
  12.       myChart.setOption(option)
  13.       window.addEventListener('resize', function () {
  14.         myChart.resize()
  15.       })
  16.     },

到这里就结束啦，这篇文章看完如果您觉得有所收获，认为还行的话，就点个赞收藏一下

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