在微信开发者工具使用eCharts

一、引入组件

直接拷贝 ec-canvas 目录到新建的项目下，GitHub上最新版本组件的下载地址。
其中提到的ec-canvas组件目录就在下载的echarts-for-weixin-master项目目录中

二、创建图表

1、首先在需要引入ECharts的小程序目录中的index.json文件中添加对组件ec-canvas的引入路径：

index.json 配置如下：

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

注意：路径的相对位置要写对，要根据自己的目录做出调整，这里只是示例

2、在index.js文件中的结构如下：

首先，在js文件引入echarts

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 = {//这里添加对图表得设置};chart.setOption(option);return chart;
}
//在data对象中声明一个存放echarts数据的对象
Page({data: {ec: {onInit: initChart}}
});

其中在var option = {……}添加所需图表的基础代码后再根据要求进行设置；
关于代码直接在官网给出的实例中选择符合自己需求的图表即可。

3、在index.wxml中使用ec-canvas组件，将定义好的ECharts图表引入到页面中，例如：

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

注意：其中ec是一个在index.js中定义的对象

4、将在GitHub中下载的echarts-for-weixin-master项目打开，然后将里面的app.wxss中的代码复制到自己项目的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;
}
ec-canvas {width: 100%;height: 100%;
}

然后在自己的index.wxss中添加样式,最后运行一下，效果就出来啦。

在微信开发者工具使用eCharts相关推荐

微信小程序引入echarts过大最佳解决方案、echarts在微信开发者工具中不跟随滑动、使用echarts控制台提示使用canvas 2d
一.微信小程序引入echarts过大最佳解决方案微信上传时代码包大小限制为2MB,但是当我们引入echarts以后,单echarts代码包已经973KB,因此再结合额外的业务代码以及其他资源很有可能 ...
【uni-app】微信开发者工具注意点（微信小程序）
目录一.微信小程序的appid 二.真机调试不让调,报体积过大三.echarts用真机调试会出错但上线时就完好四.真机调试image不显示,但是电脑上显示正常五.uni-app使用appid和 ...
使用微信开发者工具创建小程序项目
个人资源与分享网站:http://xiaocaoshare.com/ 1.微信开发者工具自行到网上下载即可 2.打开微信开发者工具,如图所示: 点击创建后,如下图所示: #### 项目结构 ``` └ ...
uni-app启动微信开发者工具
运行uni-app在微信开发者工具下注意的问题: (1)在点击工具栏里的文件 -> 新建 -> 项目: (2)选择uni-app,输入工程名,如:hello-uniapp,点击创建,即可成 ...
微信开发者工具出现 Error:unable to verify the first cert？
微信开发者工具出现 Error:unable to verify the first cert? 不知道什么原因突然遇到这个问题,网上搜索了好多方案都无效,官方也没有指定有效的方案或者问题原因.奇了 ...
微信开发者工具一打开代码编辑区文件全部不见了
今天开微信开发者工具时,一打开竟然文件全部不见了!然后页面也编译不出来,搜了一下大神们的建议: 1.在编辑器控制台输入:openVendor 回车会打开一个文件夹:C:\Use ...
Linux安装微信开发者工具(deepin linux ubt)
一.环境:: deepin linux15.4.1 二.安装过程: 2.1 安装wine sudo apt-get install wine 2.2 安装nwjs-sdk 2.2.1 下载linux版 ...
Linux微信运行错误,Ubuntu 16.04 运行微信开发者工具编译出错的解决办法
最近有折腾小程序的意向,但微信的开发者工具只提供了 Windows 和 Mac 两个版本,对于我这样的 Linux 用户来说不是那么地友好. 经过观察发现,那个开发者工具实际上是基于nw.js开发的, ...
微信开发者工具 wxmi修改模版颜色_网站建设公司讲解：微信小程序的开发者工具界面...
网站建设公司深圳市博纳网络信息技术有限公司()讲解:微信小程序的开发者工具界面创建项目后,进入到微信开发者工具界面,界面大致可以分为6个区域:①菜单栏区域,②模拟器.编辑器.调试器显示与隐藏区域,③ ...