echarts如何调用wx.request返回数据中的某字段数据?
js文件(需要把series中的三个data字段替换成我数据库中的三个字段)
import * as echarts from '../../ec-canvas/echarts';
const app = getApp();
function initChart(canvas, width, height, dpr) {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(chart);
var option = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
confine: true
},
legend: {
data: ['热度', '正面', '负面']
},
grid: {
left: 20,
right: 20,
bottom: 15,
top: 40,
containLabel: true
},
xAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: '#999'
}
},
axisLabel: {
color: '#666'
}
}
],
yAxis: [
{
type: 'category',
axisTick: { show: false },
data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
axisLine: {
lineStyle: {
color: '#999'
}
},
axisLabel: {
color: '#666'
}
}
],
series: [
{
name: '热度',
type: 'bar',
label: {
normal: {
show: true,
position: 'inside'
}
},
data: [300, 270, 340, 344, 300, 320, 310],
itemStyle: {
// emphasis: {
// color: '#37a2da'
// }
}
},
{
name: '正面',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true
}
},
data: [120, 102, 141, 174, 190, 250, 220],
itemStyle: {
// emphasis: {
// color: '#32c5e9'
// }
}
},
{
name: '负面',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'left'
}
},
data: [-20, -32, -21, -34, -90, -130, -110],
itemStyle: {
// emphasis: {
// color: '#67e0e3'
// }
}
}
]
};
chart.setOption(option);
return chart;
}
Page({
onShareAppMessage: function (res) {
return {
title: 'ECharts 可以在微信小程序中使用啦!',
path: '/pages/index/index',
success: function () { },
fail: function () { }
}
},
data: {
ec: {
onInit: initChart
}
},
onLoad: function (options) {
var that = this;//把this对象复制到临时变量that
const wxreq = wx.request({
url: 'http://123.23.5.12/data/xxx.php',
data:{
//id:"1",
//name:'Leanne Graham'
},
header: {
'content-type': 'application/json' // 默认值
},
success: function (res){
console.log(res.data);
that.userData = res.data; //无效不能实时的渲染到页面
that.setData({ userData: res.data });//和页面进行绑定可以动态的渲染到页面
},
fail: function (res){
console.log(res.data);
this.userData = "数据获取失败";
}
})
},
onReady() {
}
});
数据库中的字段名为,date2,yuegangluo,yuegangpan,lpjc(需要后面3个)
调试输出结果为:
但是我不会调用到前面的data中,查了很多资料,新手,越看越迷糊,求点拨迷津,感谢~
2 回复
大佬,我换了个方式,直接在initChart给option里的series赋值,定义了X轴和series值,目前都正常可以显示了,tooltip也正常了,就是Y轴变成了2条折现上限的累加了。
js文件
import * as echarts from '../../ec-canvas/echarts';
const app = getApp();
function initChart(canvas, width, height, dpr) {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(chart);
//var that = this;//把this对象复制到临时变量that
const wxreq = wx.request({
url: 'http://121.60.40.43/data/bar2.php',
data:{
//id:"1",
//name:'Leanne Graham'
},
header: {
'content-type': 'application/json' // 默认值
},
success: function (res){
console.log(res.data)
const date2=[];
// const lpjc=[];
const yuegangpan=[];
const yuegangluo=[];
for(var i=0;i