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中，查了很多资料，新手，越看越迷糊，求点拨迷津，感谢~
initChart
这个函数是可以写到pages里的，和onLoad同级，请求完成之后直接调用，把数据传进去就ok了
Page({
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let that=this;
that.setData({
ec: {
onInit: that.initChart
}
})
// 模拟请求
var times=setTimeout(function(){
console.log("模拟请求")
// 数据
that.data.xdata=['00:00','01:00', '02:00', '03:00', '04:00', '05:00', '6:00', '7:00','8:00','9:00','10:00','11:00','12:00','13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00','20:00','21:00','22:00','23:00'];
that.data.data1=[18, 36, 65, 30, 78, 340, 33,18, 36, 65, 30, 78, 340, 33,18, 36, 65, 30, 78, 340, 33,18, 36, 65];
that.data.data2=[12, 50, 51, 35, 70, 30, 200,12, 50, 51, 35, 70, 30, 20,12, 50, 51, 35, 70, 30, 200,12, 50, 51];
clearTimeout(times);
},1000)
},
// 折线图
initChart(canvas, width, height, dpr) {
let that=this;
// 由于请求数据有延迟所以写一个时间函数，当数据存在的时候再执行绘制
var times=setInterval(function(){
var xdata=that.data.xdata;
var data1=that.data.data1;
var data2=that.data.data2;
if(xdata && data1 && data2){
clearInterval(times)
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(chart);
var option = {
title:{
text: '停车场24小时流量动态图',
left: 'center',
top:'4%',
textStyle:{
fontSize:14,
color:'#333333'
}
},
legend: {
data: ['已停车位', '剩余车位'],
z: 100,
top:'15%',
right:'4%',
icon:'rect',
itemWidth:11,
itemHeight:8,
textStyle:{
fontSize:12,
color:'#8C8C8C'
}
},
grid:{
left: '5%',
right: '5%',
bottom: '5%',
top:'30%',
containLabel: true
},
tooltip: {
show: true,
trigger: 'axis',
},
xAxis: {
type: 'category',
data: xdata,
axisLabel : {
show : true,
// interval: 0,
// rotate:45, //代表逆时针旋转45度
textStyle:{
color:'#8C8C8C',
fontSize:12
}
},
axisLine : {
show : true,
lineStyle : {
color:'#8C8C8C'
}
// x轴坐标轴颜色
},
axisTick : {
show : true,
lineStyle : {
color:'#8C8C8C'
}
// x轴刻度的颜色
},
},
yAxis: {
x: 'center',
type: 'value',
axisLabel : {
show : true,
textStyle : {
color : '#999',
fontSize:12
}
},
axisLine : {
lineStyle : {
color : 'transparent'
}
// y轴坐标轴颜色
},
axisTick : {
lineStyle : {
color : 'transparent'
}
// y轴刻度的颜色
},
//设置网格线颜色
splitLine : {
show : true,
lineStyle : {
color : ['#D8D8D8'],
width : 1,
type : 'solid'
}
},
},
series: [{
name: '已停车位',
type: 'line',
smooth: false,//设置成曲线
symbol:'none',//取消折点圆圈
data: data1,
itemStyle : {
normal:{
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#04BEFE'},
{offset: 1, color: '#4481EB'}
]
)
}
},
areaStyle: {
normal: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: "#BEE2FC" // 0% 处的颜色
}, {
offset: 0.7,
color: "#BEE2FC" // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
},
}, {
name: '剩余车位',
type: 'line',
smooth: false,//设置成曲线
symbol:'none',//取消折点圆圈
data: data2,
itemStyle : {
normal:{
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#F9D423'},
{offset: 1, color: '#F83600'}
]
)
}
},
areaStyle: {
normal: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: "#FEE7BB" // 0% 处的颜色
}, {
offset: 0.7,
color: "#FDC4B3" // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
},
}]
};
chart.setOption(option,true);
return chart;
}
},100)
},
})
大佬，我换了个方式，直接在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{"usingComponents": {"ec-canvas": "../../ec-canvas/ec-canvas"}}<view class="container"><ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas></view>.container{padding-top:30rpx;width:100%;height:800rpx;}ec-canvas {width: 100%;height: 100%;}