微信小程序引入echarts图表
微信小程序引入echarts图表
ECharts 和微信小程序官方团队合作,提供了 ECharts 的微信小程序版本,ECharts图表技术在国内应该是最好的了,能结合到小程序应用真的是极好。
准备:小程序开发环境,下载ECharts组件,gitHub地址:ecomfe/echarts-for-weixin
要求小程序基础库:1.9.91(基本不用考虑版本兼容问题)
操作过程:把ec-canvas拷贝到项目根目录。
对应页面json文件引入组件:
{"navigationBarTitleText": "客户报表","usingComponents": {"ec-canvas": "../../ec-canvas/ec-canvas"}
}
对应页面js文件:
import * as echarts from '../../ec-canvas/echarts';
const app = getApp();
var list = [1,4,6,8]
var list1 = [90,30,490,39]function initChart(canvas, width, height) {const chart = echarts.init(canvas, null, {width: width,height: height});canvas.setChart(chart);var option = {tooltip: {trigger: 'axis'},legend: {data: ['客户']},grid: {left: '1%',right: '30rpx',bottom: '1%',containLabel: true},xAxis: {type: 'category',boundaryGap: false,data: list,name: '月份',nameGap: 2,axisLabel: {interval: 0}},yAxis: {type: 'value',name:'数量'},series: [{name: '客户',type: 'line',stack: '总量',data: list1}]};chart.setOption(option);return chart;
}
Page({data: {ec: {onInit: initChart}}
})
对应页面wxml文件:
<view class="container"><ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}"></ec-canvas>
</view>
对应页面wxss文件:
.container{position: relative;width: 90%;height: 500rpx;margin:0 auto;
}
ec-canvas {position: relative;width: 300rpx;height: 400rpx;
}
至此,ECharts图表设置成功,option对象信息可以根据ECharts提供的文档进行设置,非常多。
文档一层层对应,很清晰,需要设置什么就找相应的设置即可,option的设置和网页都是一致的。
在开发的过程中,我需要线型图表可以在小程序左右滑动,一屏装不下,demo提供了不阻塞滑动,但只有开发工具上可以滑动,放到真机就不能滑动了,这个有点尴尬。有哪位大神解决这个图表真机上可以滑动的告知一下(抱拳)
ECharts小程序示例
热爱编程的您可复制链接交流:【小程序+云开发】(非技术勿扰)
分享不易,点赞关注给作者一点点鼓励,谢谢您!
下一篇:微信小程序给echarts图表动态赋值
微信小程序引入echarts图表相关推荐
- 微信小程序引入echarts图表(保姆式)
在开发微信小程序时,有需求需要使用到柱状图,饼图等图表,但是echarts官网没有小程序版,不过已经有人在github发布echarts的小程序版本了,感谢大佬的分享. 首先,下载echarts微信版 ...
- 微信小程序给echarts图表动态赋值
微信小程序给echarts图表动态赋值 接上一篇:微信小程序引入echart图表 直接上例子(运行需要结合上一篇,拉至文章顶部进入): import * as echarts from '../../ ...
- 微信小程序使用echarts图表,与延迟加载图表,解决echarts文件过大
微信小程序使用echarts图表,与延迟加载图表,解决echarts文件过大 引入echarts组件 展示echarts图表数据 延迟加载图表 如何解决echarts文件过大 引入echarts组件 ...
- 微信小程序引入echarts过大最佳解决方案、echarts在微信开发者工具中不跟随滑动、使用echarts控制台提示使用canvas 2d
一.微信小程序引入echarts过大最佳解决方案 微信上传时代码包大小限制为2MB,但是当我们引入echarts以后,单echarts代码包已经973KB,因此再结合额外的业务代码以及其他资源很有可能 ...
- 微信小程序引入ECharts,并自定义动态修改表内参数配置
ECharts官方并没有给出小程序的相关参考,但是有大神做出了ECharts-小程序版,可以直接引用. 效果图 引用步骤 1.下载文件 GitHub - ecomfe/echarts-for-weix ...
- 微信小程序使用echarts图表(ec-canvas)
本文微信小程序开发所使用技术:taro+vue+less taro:v3.3.14 vue:v2.6.14 若使用ec-canvas加载图表时报错如下图: 解决方法①: 将echarts.js源码中的 ...
- 微信小程序使用Echarts图表组件,动态加载数据,图表模糊处理
1:下载 GitHub 上的项目 https://github.com/ecomfe/echarts-for-weixin 2:项目下载之后,打开小程序开发工具,可以看到效果如下 3:如果是在项目里面 ...
- 微信小程序引入echarts插件教程
1.在app.json中添加如下代码: {"plugins": {"echarts": {"version": "1.0.3&qu ...
- 微信小程序使用Echarts真机调试报错,Echarts占内存过大解决方法
Echarts真机调试报错 解决办法:给组件添加force-use-old-canvas="true"属性就可以在真机调试里展示. 重点:发布线上时,一定要将这句去掉,现在只是不支 ...
- 微信小程序使用echarts绘画动态图表
微信小程序使用echarts绘画动态图表 首先我们从官网下载echarts插件,路径是https://github.com/ecomfe/echarts-for-weixin,把echarts文件放到 ...
最新文章
- 这才是程序员想弄死产品经理的真正原因!
- .NET 通用权限设计
- 鸡啄米vc++2010系列35(工具栏资源及CToolBar类)
- 【专升本计算机】专升本计算机期末考试复习题(B卷附答案)
- hdu4956 Poor Hanamichi
- android ratingbar星星显示
- zookeeper 日志查看_zookeeper 安装和集群配置
- 微信公众帐号中使用的QQ表情代码对照表
- python获取国内IP地址合集下发至网络设备
- 4.3.5 导频插入
- Unity lua行为树实现(可实现rpg挂机自动战斗)
- SpringBootJ2EE相关介绍
- 关于跨境电商shopee平台,你了解多少?
- 【JAVA】Retrofit详解和使用
- 互联网集体下沉,PKQ后又一匹下沉黑马出现了
- 关于华硕飞行堡垒系列无法使用扇热小风扇的问题
- IntelliJ IDEA 2018.3 安装、永久破解及新特性说明
- Google搜索引擎使用技巧大全
- Springboot:拦截器和过滤器
- 用Python爬虫做一个短视频+评论下载小工具