如何在微信小程序中使用ECharts图表

在微信小程序中使用ECharts

1. 下载插件
首先，下载 GitHub 上的 ecomfe/echarts-for-weixin 项目。
下载链接：ecomfe/echarts-for-weixin
2. 运行项目可查看图表示例

3. 使用组件
//ec-canvas是提供的组件，将文件夹ec-canvas复制到自己的项目中

//配置要应用组件的json文件,我这里是home.json,一定注意路径要写对。

{"usingComponents": {"ec-canvas": "../../ec-canvas/ec-canvas"}
}

// 在home.js引用echarts

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

//配置全局css

/**app.wxss**/
.container {position: absolute;top: 0;bottom: 0;left: 0;right: 0;display: flex;  /* flex布局 *//* 注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 */flex-direction: column;  /*决定主轴的方向（即项目的排列方向） *//* column：主轴为垂直方向，起点在上沿。*/align-items: center;   /*定义项目在交叉轴上如何对齐 *//* center：交叉轴的中点对齐*/justify-content: space-between;   /* 定义了项目在主轴上的对齐方式 *//* space-between：两端对齐，项目之间的间隔都相等 */box-sizing: border-box;/* content-box：padding和border不被包含在定义的width和height之内盒子的实际宽度=设置的width+padding+border border-box：padding和border被包含在定义的width和height之内。盒子的实际宽度=设置的width（padding和border不会影响实际宽度）*/
}

//home.wxml

<view class="container"><ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

其中 ec 是一个我们在 index.js 中定义的对象，它使得图表能够在页面加载后被初始化并设置。
//home.wxss

ec-canvas {width: 100%;height: 50%;background: #eee;
}

//home.js

Page({data: {ec: {onInit: initChart}}
});

function initChart(canvas, width, height) {const chart = echarts.init(canvas, null, {width: width,height: height});canvas.setChart(chart);var option = {...};chart.setOption(option);return chart;
}

这对于所有 ECharts 图表都是通用的，用户只需要修改上面 option 的内容，即可改变图表。option 的使用方法参见 ECharts 配置项文档。对于不熟悉 ECharts 的用户，可以参见5 分钟上手 ECharts 教程。

如何在微信小程序中使用ECharts图表相关推荐

微信小程序中使用Echarts（折线图）
一.微信中使用 Echars 直接在官网小程序使用Echarts中(文档-教程-在微信中使用Echarts),找到GitHub上的DEMO下载链接,官网有详细的使用步骤官网:http://echar ...
微信小程序中使用echarts图
嗨喽大家好,我是老黑.最近这段时间完成了一个功能,那就是在微信小程序中引入了echarts图,也算是对这段时间的工作的一个总结吧.这个功能自己花费了很长的时间才整出来.后来自己反省了以下,总结了以 ...
教你解决Taro微信小程序中使用Echarts体积过大的问题
教你解决Taro微信小程序中使用Echarts体积过大的问题背景为什么选择Echarts? 单包超过2M,如何处理? 以为到此就结束了? 最后背景近期笔者在使用Taro进行微信小程序开发,当引 ...
小程序多个echars_微信小程序中使用echarts以及踩坑总结
人在家中坐,锅从天上来. 半个月前本来在家写着一个项目,还没来得及提测,领导突然一个电话,需要立刻去支援另一个项目,一打听,一个烂尾半年的项目,纵使内心不愿意,还是要去啊.因为鲁迅说过,生活就像强*, ...
小程序引入的echarts过大如何解决_在微信小程序中使用 ECharts
官方文档官方已经提供了小程序版的 ECharts echarts-for-weixin 并提供的了使用示例使用方式还是熟悉的 ECharts 的配置方案,只要自己 option 或者完整的将浏览器 ...
微信小程序中使用ECharts实现报表图表展示
Echarts可视化工具很方便的解决了统计图表的问题,但是微信小程序是不支持 DOM 操作,后来在Echarts官网找到了微信小程序的版本. 开始上代码了,首先要在index.wxml中定义,我要在一 ...
微信小程序中使用echarts
echart体验示例小程序Demo: echarts微信小程序组件:兼容小程序 Canvas的组件ec-canvas,可以方便地使用 ECharts,载gitHub项目. ec-canvas 目录下有 ...
taro react 微信小程序中使用echarts
1.从echarts-for-weixin下载ec-canvas并放到src目录下 2.修改echarts.js文件,找到t.addEventListener(e,n,i)改为t.addEventLi ...
ECharts 全新大版本 4.0 正式发布即将支持微信小程序中使用ECharts
2018年1月16日,ECharts (echarts.baidu.com)发布了最新大版本 4.0,新版本在产品的性能.功能.易用性等各个方面进行了全面提升.和 ECharts 4.0 一起发布的还 ...

如何在微信小程序中使用ECharts图表

在微信小程序中使用ECharts

如何在微信小程序中使用ECharts图表相关推荐

最新文章

热门文章