微信小程序实现引入echart图表操作分享
Admin 2021-03-31 群英行业资讯
前不久,ECharts 团队与微信小程序团队合作公布了 ECharts 微信小程序支持 Canvas 2D 的更新。
使用 Canvas 2D 可以使微信小程序环境中的 Canvas 与 W3C 标准 Canvas 接口更为接近,因而可以解决之前接口实现不一致引起的 bug。并且,Canvas 2D 的同层渲染可以解决图表与其他原生组件覆盖层级的问题。
简单介绍下echarts:
商业级数据图表,它是一个纯JavaScript的图标库,兼容绝大部分的浏览器,底层依赖轻量级的canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。
正文:
准备:小程序开发环境,下载ECharts组件,gitHub地址:https://github.com/ecomfe/echarts-for-weixin
操作过程:
1、把ec-canvas拷贝到项目中(可以不是根目录,但是后续引用的时候,注意更改文件地址)
2、对应页面json文件引入组件
{ "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" } }
(免费视频教程:php视频教程)
3、对应页面js文件
import * as echarts from '../../ec-canvas/echarts'; function initChart(canvas, width, height) { const chart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(chart); var option = { title: { text: '测试下面legend的红色区域不应被裁剪', left: 'center' }, color: ["#37A2DA", "#67E0E3", "#9FE6B8"], legend: { data: ['A', 'B', 'C'], top: 50, left: 'center', backgroundColor: 'red', z: 100 }, grid: { containLabel: true }, tooltip: { show: true, trigger: 'axis' }, xAxis: { type: 'category', boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], // show: false }, yAxis: { x: 'center', type: 'value', splitLine: { lineStyle: { type: 'dashed' } } // show: false }, series: [{ name: 'A', type: 'line', smooth: true, data: [18, 36, 65, 30, 78, 40, 33] }, { name: 'B', type: 'line', smooth: true, data: [12, 50, 51, 35, 70, 30, 20] }, { name: 'C', type: 'line', smooth: true, data: [10, 30, 31, 50, 40, 20, 10] }] }; chart.setOption(option); return chart; } Page({ data: { ec: { onInit: initChart } }, onReady() { } });
4、wxml文件
<!--index.wxml--> <view class="container"> <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"> </ec-canvas> </view>
5、页面样式
/**app.wxss**/ .container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; box-sizing: border-box; }
6、效果图
相关推荐:小程序开发教程
以上就是微信小程序中如何引入echart图表的详细内容,更多请关注群英网络其它相关文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
微信小程序引流怎么做?对于微信小程序大家应该都不陌生,现在许多的商家和企业都在利用微信小程序来引流,吸引更多的流量和关注。今天这篇我们就来探讨一下微信小程序引流的方法和技巧。
不知道你有没有遇到过这样的问题,在小程序中设置button按钮的宽度没有任何效果。如果你也经常遇到这种问题,那就来看看下面的解决方法吧。
购买服务器搭建b2b网站如何周全考虑各种客户类型和企业规模呢?B2B企业通常需要为各种规模的企业客户服务,从小型家庭公司到大型跨国公司,等等。相同的产品不一定适合所有类型的客户。另外,B2B网站需要获得浏览用户的信任,同时也要说明B2B网站是如何为客户所属行业和规模企业解决问题的。
做微信小程序有什么好处?为什么知名的小程序都会选择G口大带宽?现在买服务器做小程序也是越来越火热,因为商户可通过编码元素一键生成自己的微信小程序商城,无需技术,零代码开发,行业主题模板一键启动线上运营,大大减少大家的运营成本。
通过给 button 组件设置属性 open-type="share",可以在用户点击按钮后触发 Page.onShareAppMessage 事件,相关组件:button。