在已经写好的静态的echarts图的基础上引用api接口调取并显示数据

在已经写好的静态的echarts图的基础上引用api接口调取并显示数据
昨天已经写好了静态的echarts图 今天给了几个接口来调用,需要修改js。
在ec所指向的函数中加入新的代码块,并且引入了新的js:axios.js

const url ='/admin/big_data/height_count';//这是个接口const body = {access_token:'aaaa'}//这三行我还没搞懂是啥意思

然后写函数

axios.post(url,body).then((res)=>{
这里面插入这个页面准备定义的变量,h爱要把下面没在函数内的代码剪切进来 直接复制整段代码吧
})

整段代码:

import * as echarts from '../../ec-canvas/echarts' 
const axios = require('../../utils/axios.js')
function initChart(canvas, width, height) {const url ='/admin/big_data/height_count';const body = {access_token:'aaaa'}axios.post(url,body).then((res)=>{// console.log(res.data);let xAxis_data=res.data.map((item)=>{// console.log(item.height);return item.height;})// console.log(xAxis_data);let yAxis_data=res.data.map((item)=>{// console.log(item.count);return item.count   })// console.log(yAxis_data);const chart = echarts.init(canvas, null, {width: width,height: height});canvas.setChart(chart);var option = {title:{text:'树高分别柱状图',top:10,left:10},color: ['#3398DB'],tooltip: {trigger: 'axis',axisPointer: {            // 坐标轴指示器,坐标轴触发有效type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{ data:xAxis_data,type: 'category',axisLabel: {    interval: 1,   //每膈几个显示,1是隔一个显示一个rotate: 60,			//旋转60度},axisTick: {alignWithLabel: true}}],yAxis: [{type: 'value'}],series: [{name: '直接访问',type: 'bar',barWidth: '50%',data: yAxis_data}]};chart.setOption(option);return chart;}) 
}function onitChart(canvas, width, height) {const url ='/admin/big_data/tree_name_count1';const body = {access_token:'aaaa'}axios.post(url,body).then((res)=>{console.log(res.data);let xAxis_data=res.data.map((item)=>{console.log(item.item);return item.item;})let count_data=res.data.map((item)=>{console.log(item.count);return item.count;})let percent_data=res.data.map((item)=>{console.log(item.percent);return item.percent;})var count_data1=[]for (let i = 0 ; i< count_data.length;i++){count_data1[i] = xAxis_data[i]+" "+count_data[i]+'棵'+parseInt(percent_data[i]*100)+'% ';}var dw = []for (let c=0; c<count_data1.length;c++){dw[c]={value:0,name:''}for (let s = 0;s<2;s++){dw[c].value=count_data[c]dw[c].name = count_data1[c]}}let color_data=res.data.map((item)=>{return item.color})const chart = echarts.init(canvas, null, {width: width,height: height});canvas.setChart(chart);var option = {title:{text:'树种分别图',top:10,left:10},color:color_data,tooltip: {trigger: 'item',formatter: '{b}: {c} ({d}%)'},legend: {orient: 'vertical',right: 10,top:60,data: count_data1},series: [{right:110,name: '访问来源',type: 'pie',radius: ['40%', '80%'],center:['40%','50%'],avoidLabelOverlap: false,label: {show: false,position: 'center'},emphasis: {label: {show: true,fontSize: '20',fontWeight: 'bold'}},labelLine: {show: false},data: dw}]};chart.setOption(option);return chart;})}
Page({/*** 页面的初始数据*/data: {ec: {onInit: initChart},ec2: {onInit: onitChart}},

这是两个函数,也就是两个echarts图引用过api接口后改完后。老样子我会把源代码传到GitHub,下面评论找链接。
每天整理,希望可以做个前端工程师吧🙂

在已经写好的静态的echarts图的基础上引用api接口调取并显示数据

在已经写好的静态的echarts图的基础上引用api接口调取并显示数据
昨天已经写好了静态的echarts图 今天给了几个接口来调用,需要修改js。
在ec所指向的函数中加入新的代码块,并且引入了新的js:axios.js

const url ='/admin/big_data/height_count';//这是个接口const body = {access_token:'aaaa'}//这三行我还没搞懂是啥意思

然后写函数

axios.post(url,body).then((res)=>{
这里面插入这个页面准备定义的变量,h爱要把下面没在函数内的代码剪切进来 直接复制整段代码吧
})

整段代码:

import * as echarts from '../../ec-canvas/echarts' 
const axios = require('../../utils/axios.js')
function initChart(canvas, width, height) {const url ='/admin/big_data/height_count';const body = {access_token:'aaaa'}axios.post(url,body).then((res)=>{// console.log(res.data);let xAxis_data=res.data.map((item)=>{// console.log(item.height);return item.height;})// console.log(xAxis_data);let yAxis_data=res.data.map((item)=>{// console.log(item.count);return item.count   })// console.log(yAxis_data);const chart = echarts.init(canvas, null, {width: width,height: height});canvas.setChart(chart);var option = {title:{text:'树高分别柱状图',top:10,left:10},color: ['#3398DB'],tooltip: {trigger: 'axis',axisPointer: {            // 坐标轴指示器,坐标轴触发有效type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{ data:xAxis_data,type: 'category',axisLabel: {    interval: 1,   //每膈几个显示,1是隔一个显示一个rotate: 60,			//旋转60度},axisTick: {alignWithLabel: true}}],yAxis: [{type: 'value'}],series: [{name: '直接访问',type: 'bar',barWidth: '50%',data: yAxis_data}]};chart.setOption(option);return chart;}) 
}function onitChart(canvas, width, height) {const url ='/admin/big_data/tree_name_count1';const body = {access_token:'aaaa'}axios.post(url,body).then((res)=>{console.log(res.data);let xAxis_data=res.data.map((item)=>{console.log(item.item);return item.item;})let count_data=res.data.map((item)=>{console.log(item.count);return item.count;})let percent_data=res.data.map((item)=>{console.log(item.percent);return item.percent;})var count_data1=[]for (let i = 0 ; i< count_data.length;i++){count_data1[i] = xAxis_data[i]+" "+count_data[i]+'棵'+parseInt(percent_data[i]*100)+'% ';}var dw = []for (let c=0; c<count_data1.length;c++){dw[c]={value:0,name:''}for (let s = 0;s<2;s++){dw[c].value=count_data[c]dw[c].name = count_data1[c]}}let color_data=res.data.map((item)=>{return item.color})const chart = echarts.init(canvas, null, {width: width,height: height});canvas.setChart(chart);var option = {title:{text:'树种分别图',top:10,left:10},color:color_data,tooltip: {trigger: 'item',formatter: '{b}: {c} ({d}%)'},legend: {orient: 'vertical',right: 10,top:60,data: count_data1},series: [{right:110,name: '访问来源',type: 'pie',radius: ['40%', '80%'],center:['40%','50%'],avoidLabelOverlap: false,label: {show: false,position: 'center'},emphasis: {label: {show: true,fontSize: '20',fontWeight: 'bold'}},labelLine: {show: false},data: dw}]};chart.setOption(option);return chart;})}
Page({/*** 页面的初始数据*/data: {ec: {onInit: initChart},ec2: {onInit: onitChart}},

这是两个函数,也就是两个echarts图引用过api接口后改完后。老样子我会把源代码传到GitHub,下面评论找链接。
每天整理,希望可以做个前端工程师吧🙂