小程序中多个echarts折线图在同一个页面的使用
最近做小程序的业务中遇到一个页面要同时显示几个echarts图,刚开始遇到各种冲突,死数据可以,动态数据就报错的问题,折磨了一天,仔细看了官网和查在各种资料之后,终于解决了。
直接上代码:
commin.js /***
* echartName : echarts的别名
* func :渲染函数的函数名
* ***/
function wxCharts(echartName,fun) {
this.chart1 = echartName; //去获取echarts 这里的id就是echarts的id
this.chart1.init((canvas, width, height, dpr) => {
// 初始化图表
let barChart = echarts.init(canvas, null, { //echarts会继承父元素的宽高
width: width,
height: height,
devicePixelRatio: dpr // 像素
});
barChart.setOption(fun);
return barChart; //一定要return出去
});
}
module.exports.wxCharts = wxCharts;
html :
<!--圆环 -->
<ec-canvas id="tendency" canvas-id="tendency" force-use-old-canvas="true" ec="{{ tendency }}" ></ec-canvas>
<!--或者:-->
<ec-canvas id="tendency" canvas-id="tendency" ec="{{ tendency }}" ></ec-canvas>
js:
data:{
//圆环
tendency: {
disableTouch: true,
lazyLoad: true
} },
//圆
tendencyInit:function (chartData) {
this.chart = this.selectComponent('#tendency'); //去获取echarts 这里的id就是echarts的id
commin.wxCharts(this.chart,this.tendencyvray(chartData))
},
// 这里换成 所需折现图的配置就可以了
tendencyvray: function (chartData) {
var option = {
backgroundColor: "#ffffff",
series: [{
type: 'pie',
label: {
normal: {
position: 'inner'
}
},
center: ['50%', '50%'],
radius: ['80%', '70%'],
data: chartData
}]
}
return option
}, //这里是折现图的数据就可以了
tendencyInitData:function () {
let chartData = [
{
value:20,
itemStyle: { color: '#FFD234' }
},
{
value:40,
itemStyle: { color: '#FF8340' }
},
{
value: 40,
itemStyle: { color: '#3AD868' }
}
]
this.tendencyInit(chartData)
},
html :
<!--叠加柱状图-->
<ec-canvas id="stat" canvas-id="stat" force-use-old-canvas="true" ec="{{ stat }}" ></ec-canvas>
<!--或者-->
<ec-canvas id="stat" canvas-id="stat" ec="{{ stat }}" ></ec-canvas>
js:
data:{
//叠加柱状图
stat:{
disableTouch: true,
lazyLoad: true
}
},
//叠加柱状图 --- chart图
chargeYears:function (chartData) {
this.chart = this.selectComponent('#stat'); //去获取echarts 这里的id就是echarts的id
commin.wxCharts(this.chart,this.chargevrayYears(chartData))
},
chargevrayYears:function (chartData) {
let option = {
legend: {
data: ['完成工单', '转派工单','超时工单']
},
tooltip:{
axisPointer:{
type:"shadow"
},
trigger:"axis"
},
label:{
position:"insideRight",
show:true
},
grid:{
top:'40',
bottom:"20%",
containLabel:true,
left:"3%",
right:"4%"
},
xAxis:{
data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
type:"category"
},
yAxis:{
type:"value"
},
series: chartData.seriesData
}
return option
},
chargeInitYears() {
var dataArr = [
{
data:[10,20,30,13,34,56,24,78,56,37,56,15],
label:{
"position":"insideRight",
},
name:"完成工单",
stack:"总量",
type:"bar",
color:"#4CC340",
},
{
data:[10,20,30,13,34,56,24,78,56,37,56,15],
label:{
"position":"insideRight",
},
name:"转派工单",
stack:"总量",
type:"bar",
color:"#FAAA42"
},
{
data:[10,20,30,13,34,56,24,78,56,37,56,15],
label:{
"position":"insideRight",
},
name:"超时工单",
stack:"总量",
type:"bar",
color:"#FA734B"
},
]
for (var i = 0; i < dataArr.length; i++) {
var dic = dataArr[i];
dic['type'] = 'bar';
dic['itemStyle'] = {
normal: {
label: {
show: true, //开启显示
position: 'inside', //在上方显示
distance: i == 0 ? 5 : 10,
formatter: function (val) {
if (val.value !== 0) {
return val.value;
} else {
return '';
}
},
textStyle: { //数值样式
fontSize: 10,
color: '#fff'
}
},
}
}
}
var chartData = {
seriesData: dataArr
};
this.chargeYears(chartData)
},
html :
<!--柱状图-->
<ec-canvas id="station" canvas-id="station" force-use-old-canvas="true" ec="{{ station }}" ></ec-canvas>
<!--或者-->
<ec-canvas id="station" canvas-id="station" ec="{{ station }}" ></ec-canvas>
JS :
data:{
//柱状图
station:{
disableTouch: true,
lazyLoad: true
},
},
//柱状图 --- chart图
station: function (chartData) {
this.chart = this.selectComponent('#station'); //去获取echarts 这里的id就是echarts的id
commin.wxCharts(this.chart,this.stationvray(chartData))
},
stationvray: function (chartData) {
var option = {
color:'#4CC340',
type: 'bar',
label: {
normal: {
show: true,
position: 'top'
}
},
grid: {
top:'0',
left: '3%',
right: '4%',
bottom: '20%',
containLabel: true
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'value',
},
yAxis: {
type: 'category',
data: ['小谷围站场','罗冲围站场','西北山站场','罗小黑站场','西北山站场'],
},
series: chartData.seriesData
}
return option
},
stationInitChart(){
var chartData = {
seriesData: [{
type:'bar',
label: {
show: true, //开启显示
position: 'inside', //在上方显示
color:"#fff"
},
data: [14,28,38,24,32],
},
]
};
this.station(chartData)
}
index.html <!--圆-->
<ec-canvas id="warn" canvas-id="warn" force-use-old-canvas="true" ec="{{ warn }}" ></ec-canvas>
<!--或者-->
<ec-canvas id="warn" canvas-id="warn" ec="{{ warn }}" ></ec-canvas>
Js :
data:{
//圆
warn:{
disableTouch: true,
lazyLoad: true
}
},
// 圆
warnInit:function (chartData) {
this.chart = this.selectComponent('#warn'); //去获取echarts 这里的id就是echarts的id
commin.wxCharts(this.chart,this.warnvray(chartData))
},
warnvray: function (chartData) {
var option = {
backgroundColor: "#ffffff",
series: [{
label: {
formatter: '{b} \n\n {d}%',
},
type: 'pie',
center: ['50%', '40%'],
radius: ['15%', '50%'],
data: chartData
}]
}
return option
},
warnInitChart:function () {
let chartData = [
{
value:20,
name:"严重告警",
itemStyle: { color: '#fa393a' }
},
{
value:10,
name:"一级告警",
itemStyle: { color: '#FA6437' }
},
{
value: 30,
name:"二级告警",
itemStyle: { color: '#F79431' }
},
{
value: 30,
name:"三级告警",
itemStyle: { color: '#F0C61F' }
},
{
value: 10,
name:"提示告警",
itemStyle: { color: '#2997E6' }
}
]
this.warnInit(chartData)
}
小程序中多个echarts折线图在同一个页面的使用的更多相关文章
- 微信小程序中自定义swiper轮播图面板指示点的样式
重置样式: .swiper{ width: 100%; height: 240px; margin-bottom: 0.5rem; position:relative; } div.wx-swiper ...
- 在微信小程序中使用富文本转化插件wxParse
在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...
- 微信小程序中的组件使用1
不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...
- 在微信小程序中使用 echarts 图片-例 折线图
首先进入echarts官方[https://echarts.apache.org/handbook/zh/get-started/].这边只需要在小程序中简单应用一下echarts折线图 所以不需要把 ...
- 微信小程序中使用ECharts 异步加载数据 实现图表
<!--pages/bar/index.wxml--> <view class="container"> <ec-canvas id="my ...
- 微信小程序中悬浮窗功能的实现(主要探讨和解决在原生组件上的拖动)
问题场景 所谓悬浮窗就是图中微信图标的按钮,采用fixed定位,可拖动和点击. 这算是一个比较常见的实现场景了. 为什么要用cover-view做悬浮窗?原生组件出来背锅了~ 最初我做悬浮窗用的不是c ...
- 微信小程序中在swiper-item中遍历循环添加多个数据内容(微信小程序交流群:604788754)
在小程序中为了实现一个<swiper-item>中添加多个内容重复的标签,那就需要使用wx:for循环.如果按小程序的简易教程,循环加在block中,而swiper-item放在里面.所有 ...
- 实现Echarts折线图的虚实转换
需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础 ...
- 微信小程序中用户登录和登录态维护
提供用户登录以及维护用户的登录状态,是一个拥有用户系统的软件应用普遍需要做的事情.像微信这样的一个社交平台,如果做一个小程序应用,我们可能很少会去做一个完全脱离和舍弃连接用户信息的纯工具软件. 让用户 ...
随机推荐
- [源码解析] 深度学习分布式训练框架 horovod (8) --- on spark
[源码解析] 深度学习分布式训练框架 horovod (8) --- on spark 目录 [源码解析] 深度学习分布式训练框架 horovod (8) --- on spark 0x00 摘要 0 ...
- 看CarbonData如何用四招助力Apache Spark
摘要:CarbonData 在 Apache Spark 和存储系统之间起到中介服务的作用,为 Spark 提供的4个重要功能. 本文分享自华为云社区<Make Apache Spark bet ...
- Redis高并发快的3大原因详解
1. Redis的高并发和快速的原因 1.redis是基于内存的,内存的读写速度非常快: 2.redis是单线程的,省去了很多上下文切换线程的时间: 3.redis使用多路复用技术,可以处理并发的连接 ...
- Keepalive介绍及工作原理
注:keepalive和Nginx和高可用没有关联. 1.什么是高可用,为什么要设计高可用? 1.两台业务系统启动着相同的服务,如果有一台故障,另一台自动接管,我们将国称之为高可用.2.系统可用率算法 ...
- MindSpore模型精度调优实战:如何更快定位精度问题
摘要:为大家梳理了针对常见精度问题的调试调优指南,将以"MindSpore模型精度调优实战"系列文章的形式分享出来,帮助大家轻松定位精度问题,快速优化模型精度. 本文分享自华为云社 ...
- sys用户权限不足,本地登录失败 |ORA-01031 insufficient privileges|
机器总喜欢挑放假的时候出问题,"双节"(中秋.国庆)快到了,对于搞系统运维的工程师来说其实并不轻松,于是今天赶紧装起一台数据库备用服务器以备半夜"机"叫. 安装 ...
- 『无为则无心』Python序列 — 23、Python序列的公共API
目录 1.运算符 @1.+加号 @2.*乘号 @3.in或not in 2.公共方法 @1.len()方法 @2.del和del() @3.max()方法 @4.min()方法 @5.range() ...
- MySQL 查看命令执行时间
查看执行时间 1 show profiles; 2 show variables like "%pro%";查看profiling 是否是on状态: 3 如果是off,则执行se ...
- GKCTF X DASCTF 2021_babycat复现学习
17解的一道题,涉及到了java反序列化的知识,学习了. 看了下积分榜,如果做出来可能能进前20了哈哈哈,加油吧,这次就搞了两个misc签到,菜的扣脚. 打开后是个登录框,sign up提示不让注册, ...
- java基础---类和对象(3)
一.Object类 java.lang.Object类是Java语言中类层次结构的根类,也就是说任何一个类都是该类的直接或者间接子类 如果定义一个Java类时没有使用extends关键字声明其父类,则 ...