1.js里面引入
import * as echarts from '../../images/ec-canvas/echarts'; //引入echarts.js
2.在json文件里面定义下
"usingComponents": {
"ec-canvas": "../../images/ec-canvas/ec-canvas"
}
3.在js里面
定义一个函数把公共的属性抽离出来
hucuie(zyn,xData, datas,legend,title) {
zyn.setOption({
title: {
text: title,
x: 'center',
textStyle:{
fontSize:12
}
},
tooltip: {
show: true,
trigger: 'axis',
position: function(point, params, dom, rect, size){
let x = point[0],
y = point[1],
viewWidth = size.viewSize[0],
boxWidth = size.contentSize[0],
posX = 0;
if(x + boxWidth > viewWidth){
posX = x - boxWidth;
}else{
posX = x;
}
return [posX,y];
},
label: {
normal: {
show: true
}
},
axisPointer: {
lineStyle: {
type: 'dashed',
color: '#00C8C8'
},
},
},
legend: {
y: 'top',
data: legend,
textStyle: {
color: 'black',
fontSize: 12
},
top:"8%"
},
grid: {
left: "0%",
right: "5%",
top: "30%",
containLabel: true
},
xAxis: [{
data: xData,
type: 'category',
scale: true,
nameTextStyle: {
fontSize: 14
},
splitLine: {
show: false
},
label: {
normal: {
show: true
}
},
}],
yAxis: [{
type: 'value',
nameTextStyle: {
fontSize: 14
},
splitLine: {
show: false
},
label: {
normal: {
show: true
}
},
},
{
nameTextStyle: {
fontSize: 14
},
splitLine: {
show: false
}
}
],
series:datas
})
},
4.定义一个 //getData方法里发送ajax
getData(e) {
url: "",
header: {
"content-type": "json"
},
success: (res) => {
在方法里面调用这个函数
this.hucuie(barec1, data6.category, arrs, data6.legend,type+"登记人数" )
}
}
5.onload的时候调用getdata
const App = getApp();
import * as echarts from '../../images/ec-canvas/echarts'; //引入echarts.js
var barec1 = null
var barec2 = null
var barec3 = null
var barec4 = null
var barec5 = null
var barec6 = null
var barec7 = null
let xData = "";
let line=""
let jiekoudata = "";
let first=""
let type = "";
Page({
/**
* 页面的初始数据
*/
data: {
select: true,
tihuoWay: '今日',
xData: "",
ec1: {
onInit: function (canvas, width, height) {
barec1 = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(barec1);
return barec1;
}
},
ec2: {
onInit: function (canvas, width, height) {
barec2 = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(barec2);
return barec2;
}
},
ec3: {
onInit: function (canvas, width, height) {
barec3 = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(barec3);
return barec3;
}
},
ec4: {
onInit: function (canvas, width, height) {
barec4 = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(barec4);
return barec4;
}
},
ec5: {
onInit: function (canvas, width, height) {
barec5= echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(barec5);
return barec5;
}
},
ec6: {
onInit: function (canvas, width, height) {
barec6 = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(barec6);
return barec6;
}
},
ec7: {
onInit: function (canvas, width, height) {
barec7= echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(barec7);
return barec7;
}
},
},
bindShowMsg() {
this.setData({
select: !this.data.select
})
},
mySelect(e) {
this.type= e.currentTarget.dataset.name,
console.log(this.type)
this.setData({
tihuoWay: this.type
})
this.getData()
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.type = "今日"
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
setTimeout(this.getData, 500);
},
//getData方法里发送ajax
getData(e) {
var type = this.type;
console.log(type)
console.log(type)
wx.showLoading({
title: '加载中...',
})
wx.request({
url: "",
header: {
"content-type": "json"
},
success: (res) => {
var data6 = res.data.data.platformOrderPriceBar;
var pie = res.data.data.feeItemOrderSourcePie;
console.log(pie)
console.log(pie)
line = res.data.data.orgOnlineNumTop5ProvinceBar
jiekoudata=res
//第一个图
var arrs = [];
for (var i = 0; i < data6.series.length; i++) {
arrs.push({
name: data6.series[i].name,
type: 'bar',
data: data6.series[i].data
});
}
this.hucuie(barec1, data6.category, arrs, data6.legend,type+"登记人数" )
console.log(arrstwo)
// 第二个图
var atts = line.value;
var arrstwo =[{
name: '麻醉',
type: 'line',
smooth: true,
data: [18, 36, 65, 30, 78, 40, 33]
}, {
name: '妇产',
type: 'line',
smooth: true,
data: [12, 100, 51, 35, 70, 30, 300]
}, {
name: '儿科',
type: 'line',
smooth: true,
data: [10, 200, 31, 50, 40, 700, 10]
},
{
name: '全科',
type: 'line',
smooth: true,
data: [10, 30, 31, 20, 740, 20, 10]
}
]
console.log(arrstwo)
this.hucuie(barec2, ["8:00-9:00","9:00-10：00","10:00-11：00","11:00-1：00"], arrstwo,["麻醉","妇产","儿科","全科"],type+"预约时间段人数")
// 第三个图
var arrthree=[{
type: 'pie',
center: ['50%', '50%'],
radius: ['40%', '50%'],
data:[{
value: 55,
name: '高血压'
}, {
value: 20,
name: '内科学'
}, {
value: 10,
name: '外科学'
}, {
value: 20,
name: '主治'
}, {
value: 38,
name: '大内科'
}],
label:{ //饼图图形上的文本标签
normal:{
show:true,
position:'inner', //标签的位置
textStyle : {
fontWeight : 300 ,
fontSize :12 //文字的字体大小
},
formatter:'{d}%'
}
},
}]
this.hucuie(barec3,[], arrthree,["高血压","内科学","外科学","大内科"], type+"已经预约人数占比")
// 第四个图
var arrfour=[
{
name: '外科',
type: 'bar',
label: {
normal: {
show: true,
position: 'inside'
}
},
data: [300, 270, 340, 344, 300, 320, 310]
},
{
name: '内科',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true
}
},
data: [120, 102, 141, 174, 190, 250, 220]
},
]
this.hucuie(barec4,[], arrfour,["内科","外科"], type+"限额人数")
wx.hideLoading();
},
fail: function (res) {},
complete: function (res) {},
})
},
hucuie(zyn,xData, datas,legend,title) {
zyn.setOption({
title: {
text: title,
x: 'center',
textStyle:{
fontSize:12
}
},
tooltip: {
show: true,
trigger: 'axis',
position: function(point, params, dom, rect, size){
let x = point[0],
y = point[1],
viewWidth = size.viewSize[0],
boxWidth = size.contentSize[0],
posX = 0;
if(x + boxWidth > viewWidth){
posX = x - boxWidth;
}else{
posX = x;
}
return [posX,y];
},
label: {
normal: {
show: true
}
},
axisPointer: {
lineStyle: {
type: 'dashed',
color: '#00C8C8'
},
},
},
legend: {
y: 'top',
data: legend,
textStyle: {
color: 'black',
fontSize: 12
},
top:"8%"
},
grid: {
left: "0%",
right: "5%",
top: "30%",
containLabel: true
},
xAxis: [{
data: xData,
type: 'category',
scale: true,
nameTextStyle: {
fontSize: 14
},
splitLine: {
show: false
},
label: {
normal: {
show: true
}
},
}],
yAxis: [{
type: 'value',
nameTextStyle: {
fontSize: 14
},
splitLine: {
show: false
},
label: {
normal: {
show: true
}
},
},
{
nameTextStyle: {
fontSize: 14
},
splitLine: {
show: false
}
}
],
series:datas
})
},
})