我这里一个页面用了两个echarts,第一个是折线图与柱状图结合,第二个是横向柱状图;
我在js代码中的重要部分加了注释;wxml代码很简单,放在最后;
import * as echarts from '../../components/ec-canvas/echarts';
import { getINCOMETJList } from "../../api/statistics/index";
// 接口拿到数据,页面没更新,需要把chart定义和option定义放到page的外边,代码的前边;
let chart = null
let chart2 = null
const option = {
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
show: false,
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
data: ['就诊人次', '就诊金额']
},
xAxis: [
{
type: 'category',
data: [], // 在需要接口数据的值这里初始给一个空数组,然后获取接口数据后,重新赋值;
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '(人)',
axisLabel: {
formatter: '{value} 人',
}
},
{
type: 'value',
name: '(元)',
axisLabel: {
formatter: '{value} 元'
}
}
],
series: [
{
name: '就诊人次',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ' 人';
}
},
data: [] // 在需要接口数据的值这里初始给一个空数组,然后获取接口数据后,重新赋值;
},
{
name: '就诊金额',
type: 'line',
yAxisIndex: 1,
smooth: true,
tooltip: {
valueFormatter: function (value) {
return value + ' 元';
}
},
data: [] // 在需要接口数据的值这里初始给一个空数组,然后获取接口数据后,重新赋值;
}
]
};
const option2 = {
title: {
text: ''
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: [1, 2, 3, 4, 5]
},
series: [
{
name: '药品',
type: 'bar',
data: [] // 在需要接口数据的值这里初始给一个空数组,然后获取接口数据后,重新赋值;
}
]
};
// echart需要初始化,不用赋值;
function initChart(canvas, width, height, dpr) {
chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr
});
return chart;
}
function initChart2(canvas, width, height, dpr) {
chart2 = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr
});
return chart2;
}
Page({
data: {
ec: {
onInit: initChart
},
ec2: {
onInit: initChart2
}
},
onLoad: function () {
this.updateData();
},
updateData: function() {
// 使用接口拿到echarts所需数据
getINCOMETJList({ ParameterData: ParameterData }).then((res) => {
console.log(res)
if(res.Code == 200) {
const data = res.Data.ReplyData;
this.setData({,
Month: data.OPMONTHTJDATA.map(item => item.Month),
MONTHVISITNUM: data.OPMONTHTJDATA.map(item => item.MONTHVISITNUM),
MONTHAMT: data.OPMONTHTJDATA.map(item => item.MONTHAMT),
CHARGEAMT: data.OPMEDICINETOPDATA.map(item => item.CHARGEAMT),
})
// 重新赋值,option中初始定义了空数组,在这里给数组赋值;
option.xAxis.data = this.data.Month
option.series[0].data = this.data.MONTHVISITNUM
option.series[1].data = this.data.MONTHAMT
option2.series[0].data = this.data.CHARGEAMT
// 给chart图表添加接口返回的数据
setTimeout(() => {
chart.clear()
chart2.clear()
chart.setOption(option);
chart2.setOption(option2);
}, 500);
}
})
}
});
<view class="card">
<view class="card-content">
<ec-canvas ec="{{ ec }}" force-use-old-canvas="true"></ec-canvas>
</view>
</view>
<view class="card">
<view class="card-content">
<ec-canvas ec="{{ ec2 }}" force-use-old-canvas="true"></ec-canvas>
</view>
</view>