企业网站

怎样建立网站

作者:admin 发布时间:2020-12-29

怎样建立网站:微信小程序中使用ECharts实现报表图表展示

Echarts可视化工具很方便的解决了统计图表的问题 但是微信小程序是不支持 DOM 操作 后来在Echarts官网找到了微信小程序的版本。

开始上代码了 首先要在index.wxml中定义 我要在一个页面中使用两个图表

!--index.wxml--

view class containerForm

ec-canvas id mychart-dom-multi-bar canvas-id mychart-multi-bar ec {{ ecBar }} /ec-canvas

ec-canvas id mychart-dom-multi-scatter canvas-id mychart-multi-scatter ec {{ ecPie }} /ec-canvas

/view

 

 

index.js中

 

 

import * as echarts from ../../../ec-canvas/echarts ;

1:引入插件 插件可以在官网定制http://echarts.baidu.com/builder.html

2:为了方便赋值 这里建立两个全局变量变量是根据业务情景 关于猪的

var barGraph null;

var pieChart null;

3:在page模块种的data里加入

data: {

ecBar: {

onInit: function (canvas, width, height) {

barGraph echarts.init(canvas, null, {

width: width,

height: height

});

canvas.setChart(barGraph);

return barGraph;

}

},

ecPie: {

onInit: function (canvas, width, height) {

pieChart echarts.init(canvas, null, {

width: width,

height: height

});

canvas.setChart(pieChart);

return pieChart;

}

}

},

4 onLoad中加载请求数据

onLoad: function () {

//加载过快导致echarts未创建完成出现空值错误

setTimeout(this.getData,500);

},

5:getData方法里发送ajax

getData() {

wx.showLoading({

title: 加载中... ,

});

let that this;

util.request(发送ajax请求).then(function (res) {

if (res.errno 0) {

//第一个

barGraph.setOption({

color: [ #37a2da , #32c5e9 , #67e0e3 ],

tooltip: {

trigger: axis ,

axisPointer: {

type: shadow

}

},

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 ,

stack: 总量 ,

label: {

normal: {

show: true

}

},

data: [res.data.value,...],//后台数据

itemStyle: {

 

}

}

]

});

//第二个

pieChart.setOption({

backgroundColor: #ffffff ,

color: [ #37A2DA , #32C5E9 , #67E0E3 , #91F2DE , #007500 ],

series: [{

label: {

normal: {

fontSize: 14

}

},

type: pie ,

center: [ 50% , 50% ],

radius: [0, 40% ],

data: [{

value: res.data.sowCount,//数据

name: 饼图模块名称

} {...}

],

itemStyle: {

emphasis: {

shadowBlur: 10,

shadowOffsetX: 0,

shadowColor: rgba(0, 2, 2, 0.3)

}

}

}]

});

}

wx.hideLoading();

});

}

这样就可以了 其中注意...的省略

 

 

 

点赞 6 评论 6
前言微信小程序图表插件(wx-charts)是基于canvas绘制,体积小巧,支持图表类型饼图、线图、柱状图 、区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个。如上图所示,我们基于wxcharts.js 来实现订单统计报表。导入wxcharts.js将wxcharts.js 存放在utils目录column.wxml view >
LocalDateTime与字符串互转/Date互转/LocalDate互转/指定日期/时间比较/循环/本周开始日期 29924

收缩