我这里一个页面用了两个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.Monthoption.series[0].data = this.data.MONTHVISITNUMoption.series[1].data = this.data.MONTHAMToption2.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>