微信小程序中使用echart、动态加载几条折线
2024-05-15 17:37:29
一、示例
echart小程序示例
gitub地址：GitHub - ecomfe/echarts-for-weixin: Apache ECharts 的微信小程序版本
在小程序中放入
效果
二、 小程序代码
json 组件的位置取决于一示例中的的echart的位置
{ "navigationStyle":"custom","usingComponents": {"ec-canvas":"../../ec-canvas/ec-canvas"}
}wxml
<coverheader headerOpt="{{headerOpt}}"></coverheader>
<wxs src="./../../filter/urlFilter.wxs" module="filter" />
<view class="tendency">
<view class="chartScreen"><view class="chart_item" wx:for="{{tendencyList}}" wx:key="index"><view class="check {{!filter.includesArr(chooseId,item.value)?'checked'+index:''}}" bindtap="clickcheck" data-item="{{item}}"></view><view>{{item.label}}</view></view>
</view>
<view class="echart_line"><view class="echart_line1"><ec-canvas id="mychart" canvas-id="mychart" ec="{{ ec }}"></ec-canvas></view>
</view>
</view>js
var request = require('../../utils/request.js');
let util=require('../../utils/util')
import {getTopicAnalysis } from "../../utils/api/test/test";
import * as echarts from '../../ec-canvas/echarts';
Page({/*** 页面的初始数据*/data: {headerOpt:{showGoHome:false,title:"详情页",// styles:'background-image:url(https://assets-dajieimg.oss-cn-beijing.aliyuncs.com/meishu/login/bg_top.png);background-size:100% 100%'},navigationBarAndStatusBarHeight:wx.getStorageSync('statusBarHeight') + wx.getStorageSync('navigationBarHeight') + 'px',tendencyList:[{label:'1',value:1},{label:'2',value:2},{label:'3',value:3},{label:'4',value:4},{label:'5',value:5},{label:'6',value:6,}],chooseList:[],//选中的listchooseId:[],//选中的idec: {lazyLoad: true // 延迟加载},Chart:null,},clickcheck(e){let that=thislet items=e.currentTarget.dataset.itemlet id=e.currentTarget.dataset.item.valuelet chooseId=that.data.chooseIdlet chooseList=that.data.chooseListconsole.log(id);// 如果id不存在加入if(!chooseId.includes(id)){chooseId.push(id)chooseList.push(items)}else{//删除idvar index = chooseId.findIndex(item => {return item === id})chooseId.splice(index,1)chooseList.splice(index,1)}console.log(chooseId);that.setData({chooseId,chooseList,})that.getseriesInfo()},getseriesInfo(){let colorArr= ['#556FFD', '#57BE6A', '#DF699B', '#98A1D0', '#EED46C','#D64052','#E3C24B']//传递的参数--getTopicAnalysis({chooseId:this.data.chooseId}).then((res)=>{if(res.data){let xAxisinfo = [];let legendInfo = [];let seriesInfo = [];res.data.forEach((ele,index) => {let params = {data: [],type: 'line',showSymbol: false,name: '',lineStyle:{color:colorArr[index]},};legendInfo.push(ele.topicName)//topicId 话题idparams.name = ele.topicName;ele.dailyData.forEach((eleData) => {if(index == 0){xAxisinfo.push(eleData.date)}params.data.push(eleData.cnt)});seriesInfo.push(params);})this.setData({xAxisinfo,legendInfo,seriesInfo})console.log(seriesInfo);if (!this.data.Chart){this.init_echarts(); //初始化图表}else{this.setOption(); //更新数据}console.log(seriesInfo);}})},//综合数据图标初始化init_echarts: function () {this.echartsComponnet.init((canvas, width, height,dpr) => {// 初始化图表const Chart = echarts.init(canvas, null, {// renderer: 'svg',width: width,height: height,devicePixelRatio: dpr // new});Chart.setOption(this.setOption());// 注意这里一定要返回 chart 实例，否则会影响事件处理等return Chart;});
},
//综合数据直线设置数据
setOption(){return {// color: ['#DC2FDC', '#1B89FF', '#87EEFB', '#EEAD6C', '#EED46C'],tooltip: {trigger: 'axis',confine: true,// showContent: false,backgroundColor: 'rgba(255,255,255,0.5)',borderWidth: 1,borderColor: '#e2e6f5',borderRadius: 4,padding: [10, 20, 10, 20],textStyle: {color: "#949AB7",},axisPointer: {type: "cross",label: {show:false,// backgroundColor: 'rgba(39, 100, 131, 0.71)',// backgroundColor: 'null',},lineStyle:{backgroundColor: 'rgba(39, 100, 131, 0.71)',}},formatter: function (params) {let str = params[0].name+'\n'let newParams = [];let tooltipString = [];newParams = [...params];newParams.sort((a,b) => {return Number(b.value) - Number(a.value)});newParams.forEach((ele,index) => {str +=ele.seriesName+ele.value+'\n'})return str}
},grid: {left: 20,right: 20,bottom: 15,top: 40,containLabel: true},legend: {icon:'circle', show:false,itemHeight: 12,itemWidth: 12,top:'bottom',textStyle: { //图例文字的样式color: '#3F96D5',fontSize: 12},data: this.data.legendInfo,},xAxis: {axisLabel:{color: "#9095A7", //刻度线标签颜色lineStyle:{color:'#9095A7',//更改坐标轴颜色},},axisTick:{show:false},axisPointer: {lineStyle:{color:'rgba(39, 100, 131, 1)'}},//设置轴线的属性axisLine:{lineStyle: {color: '#DFE1EB',//刻度线的颜色}},type: 'category',boundaryGap: false,data: this.data.xAxisinfo,},yAxis: {splitLine: {lineStyle: {type: 'dashed',color:'#DFE1EB'}},boundaryGap: [0, '50%'],type: 'value',// name: 'GMV',position: 'left',axisLabel: {color: "#9095A7", //刻度线标签颜色formatter(v) {v = v.toString()if (v >= 100000000000) {return (v.substring(0, 5) / 10) + '亿'} else if (v >= 10000000000) {return (v.substring(0, 4) / 10) + '亿'} else if (v >= 1000000000) {return (v.substring(0, 3) / 10) + '亿'} else if (v >= 100000000) {return (v.substring(0, 2) / 10) + '亿'} else if (v >= 10000000) {return v.substring(0, 4) + 'w'} else if (v >= 1000000) {return v.substring(0, 3) + 'w'} else if (v >= 100000) {return v.substring(0, 2) + 'w'} else if (v >= 10000) {return (v.substring(0, 2) / 10) + 'w'} else if (v >= 1000) {return v} else {return v}},},axisPointer: {lineStyle:{color:'rgba(39, 100, 131, 1)'}},
},
series: this.data.seriesInfo,
grid: {top: '5%',right:'8%',bottom:'10%',left:'14%'},
}},/*** 生命周期函数--监听页面加载*/onLoad(options) {this.echartsComponnet = this.selectComponent('#mychart');},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})wxss
page{background-color: #F5F5F5;color:#212848;
}
.tendency{background-color: #fff;padding: 30rpx;margin-top:20rpx ;}
.sec_title{font-size: 32rpx;font-weight: 500;margin-bottom: 36rpx;}
.chartScreen{display: flex;align-items: center;flex-wrap: wrap;}
.chart_item{display: flex;align-items: center;flex-shrink: 0;margin-right: 30rpx;font-size: 24rpx;margin-bottom: 18rpx;}
.check{width: 28rpx;height: 28rpx; border: 2rpx solid #dbdbdb;border-radius: 4rpx;margin-right: 8rpx;}
.checked0{background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAF8SURBVHgB7Za/S8NAFMe/76pInUpBF5f+Ce3iqqPgokNBXETcRLAOnXXvYAd1k9ZFBIfWQXHU2UFB3By6OAmSRYst6fNeQrGIlzYxvcV+lnBw3OfejySPoFkpcMZlrgCc1csUYoZA9RZ97tTLyQb5ss79MEQ/cNrUyimX3X0LMiE1zhMVpQNegjU4q2CXlG0hRsLQTKeBzVWCFaHIdreCjxxDTGRmgOKGQuOFcXTKxn2xRCiyPR3ZexM4DJDFIuyVlY47+GgG7zemNL/gF/782nzj+VnyGuT1TUsPOt6zH0bhVNo/0CTtyiSiQWWCMaUnNfYaQCJdW6ZfZUIYWaDQrwl7hy3OfQt6ZVXvUggF5bfdwLaS1JaKCpNJeHJZC5LmoPqa6NulIpHu68qFq9tosoGEwtOzX1NBUlitRZMJA39pLnVUorl7jC4LJRQklX/lf/wPHVhEprYH2IL5QiWI1mEnSqet2gV1VqZGglRO6+sYDo5+oW5k6pZR/wuVDZYh1UtPwwAAAABJRU5ErkJggg==') no-repeat;background-size: 100% 100%;}
.checked1{background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGiSURBVHgB7Za9S0JRFMDPfUlqNEgiBAW5NDQEOgRt4ZhTg1BLQVMfk0FLS1FbYNRmtUgfg4NDDelW/QGBkVCBQwo29cGDzCzk3c559cLA9/T5cZf6LfddOO/97jnvcu9hgEwkZt3c2hYB4B6cOqDZcDhiH8pCdHQ7w75kUrIlot/I7F3xSkq7tClARji4lUUkxmAMhME8EojFIVoI/0LTuGxdMDcwCUKEJFv2Bg1jLNAk+jp7YHFwBrIvOQjfHOjGNSVDkq1gZq+lIoRvDw1jGxaWyzZSOzgWDON1Sxpw+/FgYBC7O9F9eaR7WN0gD8VnWEtu4fgE1dAVuuxO9YNEJakmK5TeapYRuiXdS8cgm8+pmU71ByrKiFUTMkMhrTyU2lXL5e/1/QjKZdqizMDGT+e5UYDL5oT1oSXosNjVTGhOxDJxw/+rR9VdSpIQ7j5NTsRzZ3XJahIS13JaLR+Ryd/D/vdzPdR80iQwK+Li8QoawdTRpkkb4W/chzIIBIX8EoShHGObyKdBTJYy3gVBKerD9pspXmrHoTVgMuycHOT6BBgHmtv8l4eBAAAAAElFTkSuQmCC') no-repeat;background-size: 100% 100%;}
.checked2{background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGKSURBVHgB7Za/S8NAFMe/CbWDBCm1iIiDLp0cqlNdFBxcdBBxVXDSbnX0r9BNxUHQUQcFXRT8NXVSkW4O7SAo0oZQpEpoe967WlD00qRJb9EPhEvgkU/eu8vd08DJLW8MQAvt8NsEvyIIHHYIVl0Z3EzltU/ZbXtE37DAKsM6tI41BTIIB6+iztOdgToSOtQSUS3Ev9AzoW4DsYUxKBGSrDc97RyDgAj3R9GzNAn7sYjC7rU0LpAMSUaZ1d5sFPauHGN9C7/KXrZOUSvbjvHSkkamRsRondzIQmAk42KBVIqveF4/FmMzpMJQ1IAxGpdKGzLKyK2MkJbUPMiIBUCZRueSv8oILzJHYX1OzsTLuiaGEJsf/yGrf5QJL2i51DZzCqB/q291FnpnWMjpmaAyO82vjKarlCSUaUNOlC6yLclcCYn3hydRPoJKaO5n0Cqud5rSeZaf1UD5Pg8/eNraqJR++RvnoQWFkPAOimCMHem8OV2EmiwtDdW0Tu03dcSiHW+TiF+X5CDXBwmPnVkfFK3qAAAAAElFTkSuQmCC') no-repeat;background-size: 100% 100%;}.checked3{background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGgSURBVHgB7ZZNSwJRFIbfew0jUsgiiqAQjIQWleCm2tjKTUHQL3DZrn5Jy9pJ/8BolZtsoS1U1Fy4CoYkSbIyEiRBb/dMKQbO6Pgxm3o2d2Y4M8+ccz8ZJKfBlJNZWFAIbDBgCsOGISTq4vgw4FEYycBZaiSiX06UGw3h4dzCTkYtI4R0UBW5LOM+TILJLuMwEcrSVCHxLzSMfdIK39YiTBGSbM/vksORacaMYUjMOCbg33Gi9FZFJPqgGTeUDElGmdVqddxE87qxAwvbZVcRBZ+y1UOzpN71OZqoSGaKmi+7XQ74tpfwUanhMnyvtt3QFNrkAHAvT6vXnaRNGWXUq4zQLGksUcDLa1VmOo9N70JHGWFEpits9gl9bG11tjW32mWx+PdPGYGdnaeFXoDdZsXB7grGrRZVTvdEQpY5mXmCUbqOUpKEr5WWnMjmSn3JehIShWIFt7J8BJUwFn9Ev/S80tzlntVpouTfMQiGlraslA7KH9gPZb+UYSJcbl1pmIRoiAsuT8QBM7L8cRxxOn5DnojlkxBGgCoSiJCDXF/Qr6qL/ZClCgAAAABJRU5ErkJggg==') no-repeat;background-size: 100% 100%;}.checked4{background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGdSURBVHgB7Za/S0JRFMe/72UpEWhgIS5ltLTpf6BTDQ0SYaM155BTLQZtCoWLTkLmaBQY+Ac4NLXoUlOQYYhmmJBJIvq650Hi4I/3tHeX+kzvvnfhw3nnnHuPAEbW6V42QIhLEOxsacLvk2qi43dkUnmBZHqIWY1EvdSY1CHqMRXmICNMevYXRUBygxuCXQRfTLyF+BeqZtqyCOuhD1yEJFsKn7BihPZCw6pNln095lEMRqCp8EfWrjdQDEWG7p1Y2Ct7CYTQqX9iLKHZ68GCdwfDMK67YIudyrJn/zFapVeMQjfowwwrAOOGS36uJJJ9ZdYjH4tIuYwYGGE5GkeTFYB51wPL/l5fGaFGNlTYZrkosJy0ShXMb292e6tXVo6es6p8ghqEB+eWNGwD9dZK7Azi3KwcCa2Jt8QlKhdJqGVklZKkEAh25UT1Oj2WTJGQaOTuUWI5Jaixy5E4xkWndOP7VVo+sT5u7zAJioVElUkn5W/chzVwhKa2HDghQboRBUh0bvGIsiZCOhDXaPxmEzF7kYI2sGCkDDnI9Q1gapfGPx2fagAAAABJRU5ErkJggg==') no-repeat;background-size: 100% 100%;}.checked5{background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGbSURBVHgB7ZbLSwJBHMe/rksFhpiIQoee4CUQ7T+IOgQd6uytQ3c9Bh2Luhl19NDNs966FZ26FQkdhLYXBWnZKito7aP5DdkDdHV97KU+MMwsDPvZ78zOwwHG9dHihOh0HrBmmBUPeo6RVjU9Pjl3eOP4lJ31R/QLWdW0iCA6xYQNMsJDoyiwuCuwj7AAe/HYLcS/0DLikB/eYAy2CEnmC+3AMOuDHjHgmoJ3ZgOqIuE1t9u0X08SkswX2oahKijmEqZ9uxZ+yyp4udyCzuqOhO7xKC9muALz8M/ucVkhuw61+oRWNJ1D56CfvXCBt8u3qYaykWDckoxomrAkJfFekeAei8IzvdZQRhQu2peZCnU+J5vQankMjy5/ra2fMvkqiTf2UVZw3J8smS0bvrYCkX04RBdLkufPBA1z+S4Fq7T8S0nyzJLW5YTykOlI1paQqJWyfPgImldZSqJT2t5plMcMr6vFU3SDpa2tLu2Gv3EeyrAREp7DJgzDyAjscroKO1IakDVdjwl0/aYbMdt00ugHBg9zrOpahFwfXxGjuLpZ9F0AAAAASUVORK5CYII=') no-repeat;background-size: 100% 100%;}.echart_line{display: flex;align-items: center;}
.echart_line .echart_line1{height: 420rpx;width:100%;}微信小程序中使用echart、动态加载几条折线相关推荐
- 微信小程序中高清图片替换加载策略
微信小程序中高清图片替换加载策略 前言 一.基本思想 二.具体步骤 1.图片大小对比 2.代码流程 总结 前言 随着微信的不断发展,微信小程序凭借着它用户基数大,无下载安装等优点开始逐渐替代传统app ...
- Echarts动态加载多条折线图
背景:动态加载多条折线图,折线图条数不确定 页面效果: 页面代码 //气象数据function serchQx(beginTime, endTime, str, parameter) {$(" ...
- 页面加载成功后调用_在微信小程序里实现图片预加载组件
网页中的图片预加载 我们知道在 Web 页面中实现图片的预加载其实很简单,通常的做法是在 JS 中使用 Image 对象即可,代码大致如下 var image = new Image() image. ...
- mfc cimage加载显示图片_在微信小程序里实现图片预加载组件
网页中的图片预加载 我们知道在 Web 页面中实现图片的预加载其实很简单,通常的做法是在 JS 中使用 Image 对象即可,代码大致如下 var image = new Image() image. ...
- 微信小程序入门五上滑加载下拉刷新
之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介绍加载和刷新. 效果图: 先介绍在IDE中,怎么模拟上滑这个操作.开始我是用鼠标点击文章列表,然后先上移动.结果一直没有结果,以为是 ...
- 微信小程序实现上拉分页加载数据
文章目录 1. 实现上拉请求 2. 实现分页加载 3. 数据全部加载完成后阻止上拉刷新 4. 容易发送上拉刷新失败问题 微信小程序的上拉和下拉刷新是比较常见的功能,下拉刷新比较容易实现,这里说一下上拉 ...
- 微信小程序如何实现上拉加载更多数据?
思路:在下拉到页面的时候我们可以进行数据请求,请求到在上次加载完毕的后五条数据 (举个例子),通过page(页码),count(加载数据得条数)与start进行联接,我们可以发现:start:(pag ...
- 微信小程序 - 空数据、网络加载失败 组件
GitHub Demo 地址: jh-weapp-demo 实现一些常用效果.封装通用组件和工具类 小程序码 效果图: ##使用说明 1. usingComponents 添加"EmptyV ...
- 【微信小程序】实现上拉加载更多
小程序上拉加载更多 首先我们得运用到小程序的往下拉触底事件,如下图所示 代码量很少,方便理解,主要还是要有逻辑,也不说废话了直接上代码吧 data: {paging:5//显示几条内容}onReach ...
最新文章
- Unity 2021创建2D休闲点击器游戏视频教程
- opencv入门 - 显示图像学习总结
- set,env,和export的区别
- 【机器视觉学习笔记】Hough变换直线检测（C++）
- php sql查询占位符,使用命名占位符时PHP / SQL插入错误
- 华为全球分析师大会：HMS Core全球开发者应用集成的数量加速增长，打造全场景智慧体验...
- 解决IP地址冲突的方法--DHCP SNOOPING
- 不同角色给rules重新赋值校验规则
- springMVC工作过程
- 3-QT程序运行时报错E:\SogouInput\6.7.0.0329\程序异常终止，该怎么解决？
- 注册测绘师学习笔记（一）
- YOLOv2——中文版翻译
- hp打印机没有右键扫描_win10打印机右键没有‘开始扫描’的修复办法
- 向量组/矩阵/秩的理解
- 使用echarts的3D地图中的map3D与scatter3D混合使用时出现坐标位移的情况
- 媒体文件格式分析FMP4
- 为什么会有BFC？BFC是什么？如何触发？BFC解决了什么问题？
- 网络编程面试题：OSI模型是什么?/OSI模型介绍
- Android Studio修改AVD虚拟模拟器路径
- 笔记本安装MeeGo系统教程