├── .gitignore ├── ISSUE_TEMPLATE.md ├── LICENSE ├── README.md ├── app.js ├── app.json ├── app.wxss ├── ec-canvas ├── ec-canvas.js ├── ec-canvas.json ├── ec-canvas.wxml ├── ec-canvas.wxss ├── echarts.js └── wx-canvas.js ├── img ├── icons │ ├── bar.png │ ├── boxplot.png │ ├── custom.png │ ├── funnel.png │ ├── gauge.png │ ├── graph.png │ ├── heatmap.png │ ├── k.png │ ├── line.png │ ├── map.png │ ├── parallel.png │ ├── pictorialbar.png │ ├── pie.png │ ├── radar.png │ ├── sankey.png │ ├── scatter.png │ ├── sunburst.png │ ├── themeRiver.png │ ├── tree.png │ └── treemap.png ├── pie-bg.png ├── pie-pattern.jpg └── weixin-app.jpg ├── pages ├── bar │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── boxplot │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── funnel │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── gauge │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── graph │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── heatmap │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── index │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── k │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── lazyLoad │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── line │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── loadImage │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── map │ ├── index.js │ ├── index.json │ ├── index.wxml │ ├── index.wxss │ └── mapData.js ├── measureText │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── move │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── multiCharts │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── parallel │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── pie │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── radar │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── sankey │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── saveCanvas │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── scatter │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── sunburst │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── themeRiver │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── tree │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss └── treemap │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── project.config.json └── sitemap.json /.gitignore: -------------------------------------------------------------------------------- 1 | project.private.config.json 2 | 3 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## 提问前应该做的事 2 | 3 | 请确保提问前做了以下事，将完成的项目的 `[]` 改为 `[x]`： 4 | 5 | - [] 我已通读过 [README](https://github.com/ecomfe/echarts-for-weixin/blob/master/README.md) 6 | - [] 我已阅读过 [FAQ](https://github.com/ecomfe/echarts-for-weixin/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3Afaq+) 7 | 8 | ## 需提供的信息 9 | 10 | 将符合项的 `[]` 改为 `[x]`，并补充需要的信息： 11 | 12 | ### 简单描述问题： 13 | ？？？ 14 | 15 | ### 预期效果： 16 | ？？？ 17 | （如有需要请提供预期的图） 18 | 19 | ### 实际效果： 20 | ？？？ 21 | （如有需要请提供截图） 22 | 23 | ### 复现环境： 24 | - [] 在微信开发工具中存在该问题 25 | - [] 在真机上存在该问题 26 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | BSD 3-Clause License 2 | 3 | Copyright (c) 2020, Baidu Inc. 4 | All rights reserved. 5 | 6 | Redistribution and use in source and binary forms, with or without 7 | modification, are permitted provided that the following conditions are met: 8 | 9 | * Redistributions of source code must retain the above copyright notice, this 10 | list of conditions and the following disclaimer. 11 | 12 | * Redistributions in binary form must reproduce the above copyright notice, 13 | this list of conditions and the following disclaimer in the documentation 14 | and/or other materials provided with the distribution. 15 | 16 | * Neither the name of the copyright holder nor the names of its 17 | contributors may be used to endorse or promote products derived from 18 | this software without specific prior written permission. 19 | 20 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" 21 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 22 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 23 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE 24 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL 25 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR 26 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER 27 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, 28 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 29 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 30 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 在微信小程序中使用 Apache ECharts 2 | 3 | 本项目是基于 [Apache ECharts](https://github.com/apache/echarts) 的微信小程序图表库，以及使用的示例。 4 | 5 | 开发者可以通过熟悉的 ECharts 配置方式，快速开发图表，满足各种可视化需求。 6 | 7 | ## 体验示例小程序 8 | 9 | 在微信中扫描下面的二维码即可体验 ECharts Demo： 10 | 11 | ![ECharts Demo](img/weixin-app.jpg) 12 | 13 | ## 下载 14 | 15 | 为了兼容小程序 Canvas，我们提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。 16 | 17 | 首先，下载本项目。 18 | 19 | 其中，`ec-canvas` 是我们提供的组件，其他文件是如何使用该组件的示例。 20 | 21 | `ec-canvas` 目录下有一个 `echarts.js`，默认我们会在每次 `echarts-for-weixin` 项目发版的时候替换成最新版的 ECharts。如有必要，可以自行从 ECharts 项目中下载[最新发布版](https://github.com/apache/echarts/releases)，或者从[官网自定义构建](https://echarts.apache.org/zh/builder.html)以减小文件大小。 22 | 23 | ## 引入组件 24 | 25 | 微信小程序的项目创建可以参见[微信公众平台官方文档](https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/)。 26 | 27 | 在创建项目之后，可以将下载的 [ecomfe/echarts-for-weixin](https://github.com/ecomfe/echarts-for-weixin) 项目完全替换新建的项目，然后将修改代码；或者仅拷贝 `ec-canvas` 目录到新建的项目下，然后做相应的调整。 28 | 29 | 如果采用完全替换的方式，需要将 `project.config.json` 中的 `appid` 替换成在公众平台申请的项目 id。`pages` 目录下的每个文件夹是一个页面，可以根据情况删除不需要的页面，并且在 `app.json` 中删除对应页面。 30 | 31 | 如果仅拷贝 `ec-canvas` 目录，则可以参考 `pages/bar` 目录下的几个文件的写法。下面，我们具体地说明。 32 | 33 | 34 | ## 创建图表 35 | 36 | 首先，在 `pages/bar` 目录下新建以下几个文件：`index.js`、 `index.json`、 `index.wxml`、 `index.wxss`。并且在 `app.json` 的 `pages` 中增加 `'pages/bar/index'`。 37 | 38 | `index.json` 配置如下： 39 | 40 | ```json 41 | { 42 | "usingComponents": { 43 | "ec-canvas": "../../ec-canvas/ec-canvas" 44 | } 45 | } 46 | ``` 47 | 48 | 这一配置的作用是，允许我们在 `pages/bar/index.wxml` 中使用 `` 组件。注意路径的相对位置要写对，如果目录结构和本例相同，就应该像上面这样配置。 49 | 50 | `index.wxml` 中，我们创建了一个 `` 组件，内容如下： 51 | 52 | ```xml 53 | 54 | 55 | 56 | ``` 57 | 58 | > 注意此处的 `.container`，新建小程序项目后，其中 `app.wxss` 中默认自动生成的此 class 与本 demo 中的可能不一致，导致图表不能正常显示，只显示空白。请注意参考 `app.wxss` 修改样式，保证图表的初始化的时候是有宽度和高度的。 59 | 60 | 其中 `ec` 是一个我们在 `index.js` 中定义的对象，它使得图表能够在页面加载后被初始化并设置。`index.js` 的结构如下： 61 | 62 | ```js 63 | function initChart(canvas, width, height, dpr) { 64 | const chart = echarts.init(canvas, null, { 65 | width: width, 66 | height: height, 67 | devicePixelRatio: dpr // 像素比 68 | }); 69 | canvas.setChart(chart); 70 | 71 | var option = { 72 | ... 73 | }; 74 | chart.setOption(option); 75 | return chart; 76 | } 77 | 78 | Page({ 79 | data: { 80 | ec: { 81 | onInit: initChart 82 | } 83 | } 84 | }); 85 | ``` 86 | 87 | 这对于所有 ECharts 图表都是通用的，用户只需要修改上面 `option` 的内容，即可改变图表。`option` 的使用方法参见 [ECharts 配置项文档](https://echarts.apache.org/zh/option.html)。对于不熟悉 ECharts 的用户，可以参见 [快速上手 ECharts](https://echarts.apache.org/handbook/zh/get-started/) 教程。 88 | 89 | 完整的例子请参见 [ecomfe/echarts-for-weixin](https://github.com/ecomfe/echarts-for-weixin) 项目。 90 | 91 | ## FAQ 92 | ### 如何获取图表实例？ 93 | 94 | `echarts.init` 返回的即为图表实例，可以参考 [pages/bar/index.js](/blob/master/pages/bar/index.js) 的写法。 95 | 96 | ### 如何延迟加载图表？ 97 | 98 | 参见 `pages/lazyLoad` 的例子，可以在获取数据后再初始化数据。 99 | 100 | ### 如何在一个页面中加载多个图表？ 101 | 102 | 参见 `pages/multiCharts` 的例子。 103 | 104 | ### 如何使用 Tooltip？ 105 | 106 | 目前，本项目已支持 ECharts Tooltip，但是由于 ECharts 相关功能尚未发版，因此需要使用当前本项目中 `ec-canvas/echarts.js`，这个文件包含了可以在微信中使用 Tooltip 的相关代码。目前在 ECharts 官网下载的 `echarts.js` 还不能直接替换使用，等 ECharts 正式发版后即可。 107 | 108 | 具体使用方法和 ECharts 相同，例子参见 `pages/line/index.js`。 109 | 110 | 目前一个已知的 bug 是，有些图表的 tooltip 会显示 `
` 而非换行符。这一问题将在之后修复，暂时碰到这一问题时，开发者可以通过在 formatter 中使用 `\n` 作为换行。 111 | 112 | ### 如何保存为图片？ 113 | 114 | 参见 `pages/saveCanvas` 的例子。 115 | 116 | ### 文件太大怎么办？ 117 | 118 | 本项目默认提供的 ECharts 文件是最新版本的包含所有组件文件。可以下载不同版本的 [ECharts](https://github.com/apache/echarts/blob/master/dist/) 进行替换。建议调试时使用未压缩版本，发布时使用压缩版本，否则文件会太大无法发布。 119 | 120 | 发布时，如果对文件大小要求更高，可以在 [ECharts 在线定制](https://echarts.apache.org/zh/builder.html)网页下载仅包含必要组件的包，并且选择压缩。 121 | 122 | 下载的文件放在 `ec-canvas/echarts.js`，**注意一定需要重命名为 `echarts.js`**。 123 | 124 | 此外，还可考虑使用微信小程序的[分包策略](https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/independent.html) 125 | 126 | ## 微信版本要求 127 | 128 | ### Canvas 2d 版本要求 129 | 130 | 最新版的 ECharts 微信小程序支持微信 Canvas 2d，当用户的基础库版本 >= 2.9.0 且没有设置 `force-use-old-canvas="true"` 的情况下，使用新的 Canvas 2d（默认）。 131 | 132 | 使用新的 Canvas 2d 可以提升渲染性能，解决非同层渲染问题，强烈建议开启 133 | 134 | 如果仍需使用旧版 Canvas，使用方法如下： 135 | 136 | ```html 137 | 138 | ``` 139 | 140 | ### 最低版本要求 141 | 142 | 支持微信版本 >= 6.6.3，对应基础库版本 >= 1.9.91。尽可能使用更高版本的基础库版本。 143 | 144 | 调试的时候，需要在微信开发者工具中，将“详情”下的“调试基础库”设为 1.9.91 及以上版本。 145 | 146 | 发布前，需要在 [https://mp.weixin.qq.com](https://mp.weixin.qq.com) 的“设置”页面，将“基础库最低版本设置”设为 1.9.91。当用户微信版本过低的时候，会提示用户更新。 147 | 148 | 149 | ## 暂不支持的功能 150 | 151 | ECharts 中的绝大部分功能都支持小程序版本，因此这里仅说明不支持的功能，以及存在的问题。 152 | 153 | 以下功能尚不支持，如果有相关需求请在 [issue](https://github.com/ecomfe/echarts-for-weixin/issues) 中向我们反馈，对于反馈人数多的需求将优先支持： 154 | 155 | - 多个 zlevel 分层 156 | 157 | 此外，目前还有一些 bug 尚未修复，部分需要小程序团队配合上线支持，但不影响基本的使用。已知的 bug 包括： 158 | 159 | - 安卓平台：transform 的问题（会影响关系图边两端的标记位置、旭日图文字位置等） 160 | - iOS 平台：半透明略有变深的问题 161 | - iOS 平台：渐变色出现在定义区域之外的地方 162 | 163 | 如有其它问题，也欢迎在 [issue](https://github.com/ecomfe/echarts-for-weixin/issues) 中向我们反馈，谢谢！ 164 | 165 | ## Notice 166 | 167 | The Apache Software Foundation [Apache ECharts, ECharts](https://echarts.apache.org/), Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the [Apache Software Foundation](https://www.apache.org/). 168 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | onLaunch: function () { 4 | // 展示本地存储能力 5 | var logs = wx.getStorageSync('logs') || [] 6 | logs.unshift(Date.now()) 7 | wx.setStorageSync('logs', logs) 8 | 9 | // 登录 10 | wx.login({ 11 | success: res => { 12 | // 发送 res.code 到后台换取 openId, sessionKey, unionId 13 | } 14 | }) 15 | // 获取用户信息 16 | wx.getSetting({ 17 | success: res => { 18 | if (res.authSetting['scope.userInfo']) { 19 | // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框 20 | wx.getUserInfo({ 21 | success: res => { 22 | // 可以将 res 发送给后台解码出 unionId 23 | this.globalData.userInfo = res.userInfo 24 | 25 | // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 26 | // 所以此处加入 callback 以防止这种情况 27 | if (this.userInfoReadyCallback) { 28 | this.userInfoReadyCallback(res) 29 | } 30 | } 31 | }) 32 | } 33 | } 34 | }) 35 | }, 36 | globalData: { 37 | userInfo: null 38 | } 39 | }) -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/index/index", 4 | "pages/bar/index", 5 | "pages/measureText/index", 6 | "pages/line/index", 7 | "pages/scatter/index", 8 | "pages/sunburst/index", 9 | "pages/funnel/index", 10 | "pages/radar/index", 11 | "pages/gauge/index", 12 | "pages/pie/index", 13 | "pages/k/index", 14 | "pages/heatmap/index", 15 | "pages/tree/index", 16 | "pages/treemap/index", 17 | "pages/map/index", 18 | "pages/graph/index", 19 | "pages/boxplot/index", 20 | "pages/parallel/index", 21 | "pages/sankey/index", 22 | "pages/themeRiver/index", 23 | "pages/lazyLoad/index", 24 | "pages/multiCharts/index", 25 | "pages/move/index", 26 | "pages/saveCanvas/index", 27 | "pages/loadImage/index" 28 | ], 29 | "window": { 30 | "backgroundTextStyle": "light", 31 | "backgroundColor": "#eee", 32 | "navigationBarBackgroundColor": "#eee", 33 | "navigationBarTitleText": "ECharts 图表示例", 34 | "navigationBarTextStyle": "black" 35 | }, 36 | "sitemapLocation": "sitemap.json" 37 | } -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | .container { 3 | position: absolute; 4 | top: 0; 5 | bottom: 0; 6 | left: 0; 7 | right: 0; 8 | 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | justify-content: space-between; 13 | box-sizing: border-box; 14 | } 15 | -------------------------------------------------------------------------------- /ec-canvas/ec-canvas.js: -------------------------------------------------------------------------------- 1 | import WxCanvas from './wx-canvas'; 2 | import * as echarts from './echarts'; 3 | 4 | let ctx; 5 | 6 | function compareVersion(v1, v2) { 7 | v1 = v1.split('.') 8 | v2 = v2.split('.') 9 | const len = Math.max(v1.length, v2.length) 10 | 11 | while (v1.length < len) { 12 | v1.push('0') 13 | } 14 | while (v2.length < len) { 15 | v2.push('0') 16 | } 17 | 18 | for (let i = 0; i < len; i++) { 19 | const num1 = parseInt(v1[i]) 20 | const num2 = parseInt(v2[i]) 21 | 22 | if (num1 > num2) { 23 | return 1 24 | } else if (num1 < num2) { 25 | return -1 26 | } 27 | } 28 | return 0 29 | } 30 | 31 | Component({ 32 | properties: { 33 | canvasId: { 34 | type: String, 35 | value: 'ec-canvas' 36 | }, 37 | 38 | ec: { 39 | type: Object 40 | }, 41 | 42 | forceUseOldCanvas: { 43 | type: Boolean, 44 | value: false 45 | } 46 | }, 47 | 48 | data: { 49 | isUseNewCanvas: false 50 | }, 51 | 52 | ready: function () { 53 | // Disable prograssive because drawImage doesn't support DOM as parameter 54 | // See https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html 55 | echarts.registerPreprocessor(option => { 56 | if (option && option.series) { 57 | if (option.series.length > 0) { 58 | option.series.forEach(series => { 59 | series.progressive = 0; 60 | }); 61 | } 62 | else if (typeof option.series === 'object') { 63 | option.series.progressive = 0; 64 | } 65 | } 66 | }); 67 | 68 | if (!this.data.ec) { 69 | console.warn('组件需绑定 ec 变量，例：'); 71 | return; 72 | } 73 | 74 | if (!this.data.ec.lazyLoad) { 75 | this.init(); 76 | } 77 | }, 78 | 79 | methods: { 80 | init: function (callback) { 81 | const version = wx.getSystemInfoSync().SDKVersion 82 | 83 | const canUseNewCanvas = compareVersion(version, '2.9.0') >= 0; 84 | const forceUseOldCanvas = this.data.forceUseOldCanvas; 85 | const isUseNewCanvas = canUseNewCanvas && !forceUseOldCanvas; 86 | this.setData({ isUseNewCanvas }); 87 | 88 | if (forceUseOldCanvas && canUseNewCanvas) { 89 | console.warn('开发者强制使用旧canvas,建议关闭'); 90 | } 91 | 92 | if (isUseNewCanvas) { 93 | // console.log('微信基础库版本大于2.9.0，开始使用'); 94 | // 2.9.0 可以使用 95 | this.initByNewWay(callback); 96 | } else { 97 | const isValid = compareVersion(version, '1.9.91') >= 0 98 | if (!isValid) { 99 | console.error('微信基础库版本过低，需大于等于 1.9.91。' 100 | + '参见：https://github.com/ecomfe/echarts-for-weixin' 101 | + '#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82'); 102 | return; 103 | } else { 104 | console.warn('建议将微信基础库调整大于等于2.9.0版本。升级后绘图将有更好性能'); 105 | this.initByOldWay(callback); 106 | } 107 | } 108 | }, 109 | 110 | initByOldWay(callback) { 111 | // 1.9.91 <= version < 2.9.0：原来的方式初始化 112 | ctx = wx.createCanvasContext(this.data.canvasId, this); 113 | const canvas = new WxCanvas(ctx, this.data.canvasId, false); 114 | 115 | if (echarts.setPlatformAPI) { 116 | echarts.setPlatformAPI({ 117 | createCanvas: () => canvas, 118 | }); 119 | } else { 120 | echarts.setCanvasCreator(() => canvas); 121 | }; 122 | // const canvasDpr = wx.getSystemInfoSync().pixelRatio // 微信旧的canvas不能传入dpr 123 | const canvasDpr = 1 124 | var query = wx.createSelectorQuery().in(this); 125 | query.select('.ec-canvas').boundingClientRect(res => { 126 | if (typeof callback === 'function') { 127 | this.chart = callback(canvas, res.width, res.height, canvasDpr); 128 | } 129 | else if (this.data.ec && typeof this.data.ec.onInit === 'function') { 130 | this.chart = this.data.ec.onInit(canvas, res.width, res.height, canvasDpr); 131 | } 132 | else { 133 | this.triggerEvent('init', { 134 | canvas: canvas, 135 | width: res.width, 136 | height: res.height, 137 | canvasDpr: canvasDpr // 增加了dpr，可方便外面echarts.init 138 | }); 139 | } 140 | }).exec(); 141 | }, 142 | 143 | initByNewWay(callback) { 144 | // version >= 2.9.0：使用新的方式初始化 145 | const query = wx.createSelectorQuery().in(this) 146 | query 147 | .select('.ec-canvas') 148 | .fields({ node: true, size: true }) 149 | .exec(res => { 150 | const canvasNode = res[0].node 151 | this.canvasNode = canvasNode 152 | 153 | const canvasDpr = wx.getSystemInfoSync().pixelRatio 154 | const canvasWidth = res[0].width 155 | const canvasHeight = res[0].height 156 | 157 | const ctx = canvasNode.getContext('2d') 158 | 159 | const canvas = new WxCanvas(ctx, this.data.canvasId, true, canvasNode) 160 | if (echarts.setPlatformAPI) { 161 | echarts.setPlatformAPI({ 162 | createCanvas: () => canvas, 163 | loadImage: (src, onload, onerror) => { 164 | if (canvasNode.createImage) { 165 | const image = canvasNode.createImage(); 166 | image.onload = onload; 167 | image.onerror = onerror; 168 | image.src = src; 169 | return image; 170 | } 171 | console.error('加载图片依赖 `Canvas.createImage()` API，要求小程序基础库版本在 2.7.0 及以上。'); 172 | // PENDING fallback? 173 | } 174 | }) 175 | } else { 176 | echarts.setCanvasCreator(() => canvas) 177 | } 178 | 179 | if (typeof callback === 'function') { 180 | this.chart = callback(canvas, canvasWidth, canvasHeight, canvasDpr) 181 | } else if (this.data.ec && typeof this.data.ec.onInit === 'function') { 182 | this.chart = this.data.ec.onInit(canvas, canvasWidth, canvasHeight, canvasDpr) 183 | } else { 184 | this.triggerEvent('init', { 185 | canvas: canvas, 186 | width: canvasWidth, 187 | height: canvasHeight, 188 | dpr: canvasDpr 189 | }) 190 | } 191 | }) 192 | }, 193 | canvasToTempFilePath(opt) { 194 | if (this.data.isUseNewCanvas) { 195 | // 新版 196 | const query = wx.createSelectorQuery().in(this) 197 | query 198 | .select('.ec-canvas') 199 | .fields({ node: true, size: true }) 200 | .exec(res => { 201 | const canvasNode = res[0].node 202 | opt.canvas = canvasNode 203 | wx.canvasToTempFilePath(opt) 204 | }) 205 | } else { 206 | // 旧的 207 | if (!opt.canvasId) { 208 | opt.canvasId = this.data.canvasId; 209 | } 210 | ctx.draw(true, () => { 211 | wx.canvasToTempFilePath(opt, this); 212 | }); 213 | } 214 | }, 215 | 216 | touchStart(e) { 217 | if (this.chart && e.touches.length > 0) { 218 | var touch = e.touches[0]; 219 | var handler = this.chart.getZr().handler; 220 | handler.dispatch('mousedown', { 221 | zrX: touch.x, 222 | zrY: touch.y, 223 | preventDefault: () => {}, 224 | stopImmediatePropagation: () => {}, 225 | stopPropagation: () => {} 226 | }); 227 | handler.dispatch('mousemove', { 228 | zrX: touch.x, 229 | zrY: touch.y, 230 | preventDefault: () => {}, 231 | stopImmediatePropagation: () => {}, 232 | stopPropagation: () => {} 233 | }); 234 | handler.processGesture(wrapTouch(e), 'start'); 235 | } 236 | }, 237 | 238 | touchMove(e) { 239 | if (this.chart && e.touches.length > 0) { 240 | var touch = e.touches[0]; 241 | var handler = this.chart.getZr().handler; 242 | handler.dispatch('mousemove', { 243 | zrX: touch.x, 244 | zrY: touch.y, 245 | preventDefault: () => {}, 246 | stopImmediatePropagation: () => {}, 247 | stopPropagation: () => {} 248 | }); 249 | handler.processGesture(wrapTouch(e), 'change'); 250 | } 251 | }, 252 | 253 | touchEnd(e) { 254 | if (this.chart) { 255 | const touch = e.changedTouches ? e.changedTouches[0] : {}; 256 | var handler = this.chart.getZr().handler; 257 | handler.dispatch('mouseup', { 258 | zrX: touch.x, 259 | zrY: touch.y, 260 | preventDefault: () => {}, 261 | stopImmediatePropagation: () => {}, 262 | stopPropagation: () => {} 263 | }); 264 | handler.dispatch('click', { 265 | zrX: touch.x, 266 | zrY: touch.y, 267 | preventDefault: () => {}, 268 | stopImmediatePropagation: () => {}, 269 | stopPropagation: () => {} 270 | }); 271 | handler.processGesture(wrapTouch(e), 'end'); 272 | } 273 | } 274 | } 275 | }); 276 | 277 | function wrapTouch(event) { 278 | for (let i = 0; i < event.touches.length; ++i) { 279 | const touch = event.touches[i]; 280 | touch.offsetX = touch.x; 281 | touch.offsetY = touch.y; 282 | } 283 | return event; 284 | } 285 | -------------------------------------------------------------------------------- /ec-canvas/ec-canvas.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /ec-canvas/ec-canvas.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /ec-canvas/ec-canvas.wxss: -------------------------------------------------------------------------------- 1 | .ec-canvas { 2 | width: 100%; 3 | height: 100%; 4 | } 5 | -------------------------------------------------------------------------------- /ec-canvas/wx-canvas.js: -------------------------------------------------------------------------------- 1 | export default class WxCanvas { 2 | constructor(ctx, canvasId, isNew, canvasNode) { 3 | this.ctx = ctx; 4 | this.canvasId = canvasId; 5 | this.chart = null; 6 | this.isNew = isNew 7 | if (isNew) { 8 | this.canvasNode = canvasNode; 9 | } 10 | else { 11 | this._initStyle(ctx); 12 | } 13 | 14 | // this._initCanvas(zrender, ctx); 15 | 16 | this._initEvent(); 17 | } 18 | 19 | getContext(contextType) { 20 | if (contextType === '2d') { 21 | return this.ctx; 22 | } 23 | } 24 | 25 | // canvasToTempFilePath(opt) { 26 | // if (!opt.canvasId) { 27 | // opt.canvasId = this.canvasId; 28 | // } 29 | // return wx.canvasToTempFilePath(opt, this); 30 | // } 31 | 32 | setChart(chart) { 33 | this.chart = chart; 34 | } 35 | 36 | addEventListener() { 37 | // noop 38 | } 39 | 40 | attachEvent() { 41 | // noop 42 | } 43 | 44 | detachEvent() { 45 | // noop 46 | } 47 | 48 | _initCanvas(zrender, ctx) { 49 | zrender.util.getContext = function () { 50 | return ctx; 51 | }; 52 | 53 | zrender.util.$override('measureText', function (text, font) { 54 | ctx.font = font || '12px sans-serif'; 55 | return ctx.measureText(text); 56 | }); 57 | } 58 | 59 | _initStyle(ctx) { 60 | ctx.createRadialGradient = () => { 61 | return ctx.createCircularGradient(arguments); 62 | }; 63 | } 64 | 65 | _initEvent() { 66 | this.event = {}; 67 | const eventNames = [{ 68 | wxName: 'touchStart', 69 | ecName: 'mousedown' 70 | }, { 71 | wxName: 'touchMove', 72 | ecName: 'mousemove' 73 | }, { 74 | wxName: 'touchEnd', 75 | ecName: 'mouseup' 76 | }, { 77 | wxName: 'touchEnd', 78 | ecName: 'click' 79 | }]; 80 | eventNames.forEach(name => { 81 | this.event[name.wxName] = e => { 82 | const touch = e.touches[0]; 83 | this.chart.getZr().handler.dispatch(name.ecName, { 84 | zrX: name.wxName === 'tap' ? touch.clientX : touch.x, 85 | zrY: name.wxName === 'tap' ? touch.clientY : touch.y, 86 | preventDefault: () => {}, 87 | stopImmediatePropagation: () => {}, 88 | stopPropagation: () => {} 89 | }); 90 | }; 91 | }); 92 | } 93 | 94 | set width(w) { 95 | if (this.canvasNode) this.canvasNode.width = w 96 | } 97 | set height(h) { 98 | if (this.canvasNode) this.canvasNode.height = h 99 | } 100 | 101 | get width() { 102 | if (this.canvasNode) 103 | return this.canvasNode.width 104 | return 0 105 | } 106 | get height() { 107 | if (this.canvasNode) 108 | return this.canvasNode.height 109 | return 0 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /img/icons/bar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ecomfe/echarts-for-weixin/82e6cdfe5347265c04cced222bd6398dcb6eb279/img/icons/bar.png -------------------------------------------------------------------------------- /img/icons/boxplot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ecomfe/echarts-for-weixin/82e6cdfe5347265c04cced222bd6398dcb6eb279/img/icons/boxplot.png -------------------------------------------------------------------------------- /img/icons/custom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ecomfe/echarts-for-weixin/82e6cdfe5347265c04cced222bd6398dcb6eb279/img/icons/custom.png -------------------------------------------------------------------------------- /img/icons/funnel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ecomfe/echarts-for-weixin/82e6cdfe5347265c04cced222bd6398dcb6eb279/img/icons/funnel.png -------------------------------------------------------------------------------- /img/icons/gauge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ecomfe/echarts-for-weixin/82e6cdfe5347265c04cced222bd6398dcb6eb279/img/icons/gauge.png -------------------------------------------------------------------------------- /img/icons/graph.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ecomfe/echarts-for-weixin/82e6cdfe5347265c04cced222bd6398dcb6eb279/img/icons/graph.png -------------------------------------------------------------------------------- /img/icons/heatmap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ecomfe/echarts-for-weixin/82e6cdfe5347265c04cced222bd6398dcb6eb279/img/icons/heatmap.png -------------------------------------------------------------------------------- /img/icons/k.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ecomfe/echarts-for-weixin/82e6cdfe5347265c04cced222bd6398dcb6eb279/img/icons/k.png -------------------------------------------------------------------------------- /img/icons/line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ecomfe/echarts-for-weixin/82e6cdfe5347265c04cced222bd6398dcb6eb279/img/icons/line.png -------------------------------------------------------------------------------- /img/icons/map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ecomfe/echarts-for-weixin/82e6cdfe5347265c04cced222bd6398dcb6eb279/img/icons/map.png -------------------------------------------------------------------------------- /img/icons/parallel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ecomfe/echarts-for-weixin/82e6cdfe5347265c04cced222bd6398dcb6eb279/img/icons/parallel.png -------------------------------------------------------------------------------- /img/icons/pictorialbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ecomfe/echarts-for-weixin/82e6cdfe5347265c04cced222bd6398dcb6eb279/img/icons/pictorialbar.png -------------------------------------------------------------------------------- /img/icons/pie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ecomfe/echarts-for-weixin/82e6cdfe5347265c04cced222bd6398dcb6eb279/img/icons/pie.png -------------------------------------------------------------------------------- /img/icons/radar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ecomfe/echarts-for-weixin/82e6cdfe5347265c04cced222bd6398dcb6eb279/img/icons/radar.png -------------------------------------------------------------------------------- /img/icons/sankey.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ecomfe/echarts-for-weixin/82e6cdfe5347265c04cced222bd6398dcb6eb279/img/icons/sankey.png -------------------------------------------------------------------------------- /img/icons/scatter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ecomfe/echarts-for-weixin/82e6cdfe5347265c04cced222bd6398dcb6eb279/img/icons/scatter.png -------------------------------------------------------------------------------- /img/icons/sunburst.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ecomfe/echarts-for-weixin/82e6cdfe5347265c04cced222bd6398dcb6eb279/img/icons/sunburst.png -------------------------------------------------------------------------------- /img/icons/themeRiver.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ecomfe/echarts-for-weixin/82e6cdfe5347265c04cced222bd6398dcb6eb279/img/icons/themeRiver.png -------------------------------------------------------------------------------- /img/icons/tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ecomfe/echarts-for-weixin/82e6cdfe5347265c04cced222bd6398dcb6eb279/img/icons/tree.png -------------------------------------------------------------------------------- /img/icons/treemap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ecomfe/echarts-for-weixin/82e6cdfe5347265c04cced222bd6398dcb6eb279/img/icons/treemap.png -------------------------------------------------------------------------------- /img/pie-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ecomfe/echarts-for-weixin/82e6cdfe5347265c04cced222bd6398dcb6eb279/img/pie-bg.png -------------------------------------------------------------------------------- /img/pie-pattern.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ecomfe/echarts-for-weixin/82e6cdfe5347265c04cced222bd6398dcb6eb279/img/pie-pattern.jpg -------------------------------------------------------------------------------- /img/weixin-app.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ecomfe/echarts-for-weixin/82e6cdfe5347265c04cced222bd6398dcb6eb279/img/weixin-app.jpg -------------------------------------------------------------------------------- /pages/bar/index.js: -------------------------------------------------------------------------------- 1 | import * as echarts from '../../ec-canvas/echarts'; 2 | 3 | let chart = null; 4 | 5 | function initChart(canvas, width, height, dpr) { 6 | chart = echarts.init(canvas, null, { 7 | width: width, 8 | height: height, 9 | devicePixelRatio: dpr // new 10 | }); 11 | canvas.setChart(chart); 12 | 13 | var option = { 14 | tooltip: { 15 | trigger: 'axis', 16 | axisPointer: { // 坐标轴指示器，坐标轴触发有效 17 | type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' 18 | }, 19 | confine: true 20 | }, 21 | legend: { 22 | data: ['热度', '正面', '负面'] 23 | }, 24 | grid: { 25 | left: 20, 26 | right: 20, 27 | bottom: 15, 28 | top: 40, 29 | containLabel: true 30 | }, 31 | xAxis: [ 32 | { 33 | type: 'value', 34 | axisLine: { 35 | lineStyle: { 36 | color: '#999' 37 | } 38 | }, 39 | axisLabel: { 40 | color: '#666' 41 | } 42 | } 43 | ], 44 | yAxis: [ 45 | { 46 | type: 'category', 47 | axisTick: { show: false }, 48 | data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'], 49 | axisLine: { 50 | lineStyle: { 51 | color: '#999' 52 | } 53 | }, 54 | axisLabel: { 55 | color: '#666' 56 | } 57 | } 58 | ], 59 | series: [ 60 | { 61 | name: '热度', 62 | type: 'bar', 63 | label: { 64 | normal: { 65 | show: true, 66 | position: 'inside' 67 | } 68 | }, 69 | data: [300, 270, 340, 344, 300, 320, 310], 70 | itemStyle: { 71 | // emphasis: { 72 | // color: '#37a2da' 73 | // } 74 | } 75 | }, 76 | { 77 | name: '正面', 78 | type: 'bar', 79 | stack: '总量', 80 | label: { 81 | normal: { 82 | show: true 83 | } 84 | }, 85 | data: [120, 102, 141, 174, 190, 250, 220], 86 | itemStyle: { 87 | // emphasis: { 88 | // color: '#32c5e9' 89 | // } 90 | } 91 | }, 92 | { 93 | name: '负面', 94 | type: 'bar', 95 | stack: '总量', 96 | label: { 97 | normal: { 98 | show: true, 99 | position: 'left' 100 | } 101 | }, 102 | data: [-20, -32, -21, -34, -90, -130, -110], 103 | itemStyle: { 104 | // emphasis: { 105 | // color: '#67e0e3' 106 | // } 107 | } 108 | } 109 | ] 110 | }; 111 | 112 | chart.setOption(option); 113 | return chart; 114 | } 115 | 116 | Page({ 117 | onShareAppMessage: function (res) { 118 | return { 119 | title: 'ECharts 可以在微信小程序中使用啦！', 120 | path: '/pages/index/index', 121 | success: function () { }, 122 | fail: function () { } 123 | } 124 | }, 125 | data: { 126 | ec: { 127 | onInit: initChart 128 | } 129 | }, 130 | 131 | onReady() { 132 | setTimeout(function () { 133 | // 获取 chart 实例的方式 134 | // console.log(chart) 135 | }, 2000); 136 | } 137 | }); 138 | -------------------------------------------------------------------------------- /pages/bar/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "ec-canvas": "../../ec-canvas/ec-canvas" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /pages/bar/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /pages/bar/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | ec-canvas { 3 | width: 100%; 4 | height: 100%; 5 | } 6 | -------------------------------------------------------------------------------- /pages/boxplot/index.js: -------------------------------------------------------------------------------- 1 | import * as echarts from '../../ec-canvas/echarts'; 2 | 3 | const app = getApp(); 4 | 5 | function initChart(canvas, width, height, dpr) { 6 | const chart = echarts.init(canvas, null, { 7 | width: width, 8 | height: height, 9 | devicePixelRatio: dpr // new 10 | }); 11 | canvas.setChart(chart); 12 | 13 | var option = { 14 | title: { 15 | text: 'Dispersion of house price\naccording to the number of bedrooms', 16 | x: 'center', 17 | y: 10, 18 | textStyle: { 19 | color: '#3259B8', 20 | fontSize: 16, 21 | fontWeight: 'normal', 22 | }, 23 | }, 24 | tooltip: { 25 | trigger: 'item', 26 | axisPointer: { 27 | type: 'shadow' 28 | } 29 | }, 30 | grid: { 31 | left: '15%', 32 | right: '10%', 33 | 34 | }, 35 | xAxis: { 36 | type: 'category', 37 | data: ['1 bedroom', '2 bedrooms', '3 bedrooms', '4 bedrooms', '5 bedrooms', '6 bedrooms'], 38 | 39 | nameTextStyle: { 40 | color: '#3259B8', 41 | fontSize: 14, 42 | 43 | }, 44 | axisTick: { 45 | show: false, 46 | }, 47 | axisLine: { 48 | lineStyle: { 49 | color: '#3259B8', 50 | } 51 | }, 52 | splitLine: { 53 | show: false 54 | } 55 | }, 56 | 57 | yAxis: { 58 | type: 'value', 59 | nameTextStyle: { 60 | color: '#3259B8', 61 | fontSize: 14, 62 | }, 63 | axisLabel: { 64 | formatter: '{value}\nCNY/㎡', 65 | }, 66 | axisLine: { 67 | lineStyle: { 68 | color: '#3259B8', 69 | } 70 | }, 71 | splitLine: { 72 | lineStyle: { 73 | color: '#A7BAFA', 74 | }, 75 | } 76 | 77 | }, 78 | series: [{ 79 | name: 'boxplot', 80 | type: 'boxplot', 81 | data: [ 82 | [30645, 83 | 53490, 84 | 66640.5, 85 | 89123, 86 | 159949, 87 | ], 88 | [19464, 89 | 46454, 90 | 59139, 91 | 83479, 92 | 179440, 93 | ], 94 | [16704, 95 | 46041, 96 | 60155, 97 | 86818, 98 | 159980, 99 | ], 100 | [21543, 101 | 41619.75, 102 | 58819.5, 103 | 87540, 104 | 159978, 105 | ], 106 | [15202, 107 | 35757, 108 | 44721, 109 | 59916.5, 110 | 159825, 111 | ], 112 | [22158, 113 | 34754.5, 114 | 49718, 115 | 71637, 116 | 139972, 117 | ], 118 | ], 119 | itemStyle: { 120 | normal: { 121 | borderColor: { 122 | type: 'linear', 123 | x: 0, 124 | y: 0, 125 | x2: 0, 126 | y2: 1, 127 | colorStops: [{ 128 | offset: 0, 129 | color: '#F02FC2' // 0% 处的颜色 130 | }, { 131 | offset: 1, 132 | color: '#3EACE5' // 100% 处的颜色 133 | }], 134 | globalCoord: false // 缺省为 false 135 | }, 136 | borderWidth: 2, 137 | color: { 138 | type: 'linear', 139 | x: 0, 140 | y: 0, 141 | x2: 0, 142 | y2: 1, 143 | colorStops: [{ 144 | offset: 0, 145 | color: 'rgba(240,47,194,0.7)' // 0% 处的颜色 146 | }, { 147 | offset: 1, 148 | color: 'rgba(62,172,299,0.7)' // 100% 处的颜色 149 | }], 150 | globalCoord: false // 缺省为 false 151 | }, 152 | } 153 | }, 154 | tooltip: { 155 | formatter: function (param) { 156 | return [ 157 | 'Upper: ' + param.data[5] + ' CNY/㎡', 158 | 'Q3: ' + param.data[4] + ' CNY/㎡', 159 | 'Median: ' + param.data[3] + ' CNY/㎡', 160 | 'Q1: ' + param.data[2] + ' CNY/㎡', 161 | 'Lower: ' + param.data[1] + ' CNY/㎡' 162 | ].join('
') 163 | } 164 | } 165 | }, 166 | 167 | ] 168 | }; 169 | 170 | chart.setOption(option); 171 | return chart; 172 | } 173 | 174 | Page({ 175 | onShareAppMessage: function (res) { 176 | return { 177 | title: 'ECharts 可以在微信小程序中使用啦！', 178 | path: '/pages/index/index', 179 | success: function () { }, 180 | fail: function () { } 181 | } 182 | }, 183 | data: { 184 | ec: { 185 | onInit: initChart 186 | } 187 | }, 188 | 189 | onReady() { 190 | } 191 | }); 192 | -------------------------------------------------------------------------------- /pages/boxplot/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "ec-canvas": "../../ec-canvas/ec-canvas" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /pages/boxplot/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /pages/boxplot/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | ec-canvas { 3 | width: 100%; 4 | height: 100%; 5 | } 6 | -------------------------------------------------------------------------------- /pages/funnel/index.js: -------------------------------------------------------------------------------- 1 | import * as echarts from '../../ec-canvas/echarts'; 2 | 3 | const app = getApp(); 4 | 5 | function initChart(canvas, width, height, dpr) { 6 | const chart = echarts.init(canvas, null, { 7 | width: width, 8 | height: height, 9 | devicePixelRatio: dpr // new 10 | }); 11 | canvas.setChart(chart); 12 | 13 | var option = { 14 | backgroundColor: "#ffffff", 15 | tooltip: { 16 | trigger: 'item', 17 | formatter: "{a}\n{b} : {c}%" 18 | }, 19 | legend: { 20 | orient: 'vertical', 21 | left: 10, 22 | data: ['展现', '点击', '访问', '咨询', '订单'] 23 | }, 24 | calculable: true, 25 | series: [ 26 | { 27 | name: '漏斗图', 28 | type: 'funnel', 29 | width: '40%', 30 | height: '45%', 31 | left: '5%', 32 | top: '50%', 33 | data: [{ value: 100, name: '展现' }, 34 | { value: 80, name: '点击' }, 35 | { value: 60, name: '访问' }, 36 | { value: 30, name: '咨询' }, 37 | { value: 10, name: '订单' }, 38 | 39 | ] 40 | }, 41 | { 42 | name: '金字塔', 43 | type: 'funnel', 44 | width: '40%', 45 | height: '45%', 46 | left: '5%', 47 | top: '5%', 48 | sort: 'ascending', 49 | data: [ 50 | { value: 60, name: '访问' }, 51 | { value: 30, name: '咨询' }, 52 | { value: 10, name: '订单' }, 53 | { value: 80, name: '点击' }, 54 | { value: 100, name: '展现' } 55 | ] 56 | }, 57 | { 58 | name: '漏斗图', 59 | type: 'funnel', 60 | width: '40%', 61 | height: '45%', 62 | left: '55%', 63 | top: '5%', 64 | label: { 65 | normal: { 66 | position: 'left' 67 | } 68 | }, 69 | data: [ 70 | { value: 60, name: '访问' }, 71 | { value: 30, name: '咨询' }, 72 | { value: 10, name: '订单' }, 73 | { value: 80, name: '点击' }, 74 | { value: 100, name: '展现' } 75 | ] 76 | }, 77 | { 78 | name: '金字塔', 79 | type: 'funnel', 80 | width: '40%', 81 | height: '45%', 82 | left: '55%', 83 | top: '50%', 84 | sort: 'ascending', 85 | label: { 86 | normal: { 87 | position: 'left' 88 | } 89 | }, 90 | data: [ 91 | { value: 60, name: '访问' }, 92 | { value: 30, name: '咨询' }, 93 | { value: 10, name: '订单' }, 94 | { value: 80, name: '点击' }, 95 | { value: 100, name: '展现' } 96 | ] 97 | } 98 | ] 99 | }; 100 | 101 | 102 | chart.setOption(option); 103 | return chart; 104 | } 105 | 106 | Page({ 107 | onShareAppMessage: function (res) { 108 | return { 109 | title: 'ECharts 可以在微信小程序中使用啦！', 110 | path: '/pages/index/index', 111 | success: function () { }, 112 | fail: function () { } 113 | } 114 | }, 115 | data: { 116 | ec: { 117 | onInit: initChart 118 | } 119 | }, 120 | 121 | onReady() { 122 | } 123 | }); 124 | -------------------------------------------------------------------------------- /pages/funnel/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "ec-canvas": "../../ec-canvas/ec-canvas" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /pages/funnel/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /pages/funnel/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | ec-canvas { 3 | width: 100%; 4 | height: 100%; 5 | } 6 | -------------------------------------------------------------------------------- /pages/gauge/index.js: -------------------------------------------------------------------------------- 1 | import * as echarts from '../../ec-canvas/echarts'; 2 | 3 | const app = getApp(); 4 | 5 | function initChart(canvas, width, height, dpr) { 6 | const chart = echarts.init(canvas, null, { 7 | width: width, 8 | height: height, 9 | devicePixelRatio: dpr // new 10 | }); 11 | canvas.setChart(chart); 12 | 13 | var option = { 14 | backgroundColor: "#ffffff", 15 | series: [{ 16 | name: '业务指标', 17 | type: 'gauge', 18 | detail: { 19 | formatter: '{value}%' 20 | }, 21 | axisLine: { 22 | show: true 23 | }, 24 | data: [{ 25 | value: 40, 26 | name: '完成率', 27 | }] 28 | 29 | }] 30 | }; 31 | 32 | chart.setOption(option, true); 33 | 34 | return chart; 35 | } 36 | 37 | Page({ 38 | onShareAppMessage: function (res) { 39 | return { 40 | title: 'ECharts 可以在微信小程序中使用啦！', 41 | path: '/pages/index/index', 42 | success: function () { }, 43 | fail: function () { } 44 | } 45 | }, 46 | data: { 47 | ec: { 48 | onInit: initChart 49 | } 50 | }, 51 | 52 | onReady() { 53 | } 54 | }); 55 | -------------------------------------------------------------------------------- /pages/gauge/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "ec-canvas": "../../ec-canvas/ec-canvas" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /pages/gauge/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /pages/gauge/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | ec-canvas { 3 | width: 100%; 4 | height: 100%; 5 | } 6 | -------------------------------------------------------------------------------- /pages/graph/index.js: -------------------------------------------------------------------------------- 1 | import * as echarts from '../../ec-canvas/echarts'; 2 | 3 | const app = getApp(); 4 | 5 | function initChart(canvas, width, height, dpr) { 6 | const chart = echarts.init(canvas, null, { 7 | width: width, 8 | height: height, 9 | devicePixelRatio: dpr // new 10 | }); 11 | canvas.setChart(chart); 12 | 13 | var option = { 14 | title: { 15 | text: 'Graph 简单示例' 16 | }, 17 | tooltip: {}, 18 | animationDurationUpdate: 1500, 19 | animationEasingUpdate: 'quinticInOut', 20 | series: [ 21 | { 22 | type: 'graph', 23 | layout: 'none', 24 | symbolSize: 50, 25 | roam: true, 26 | label: { 27 | normal: { 28 | show: true 29 | } 30 | }, 31 | // edgeSymbol: ['circle', 'arrow'], 32 | // edgeSymbolSize: [4, 10], 33 | edgeLabel: { 34 | normal: { 35 | textStyle: { 36 | fontSize: 20 37 | } 38 | } 39 | }, 40 | data: [{ 41 | name: '节点1', 42 | x: 300, 43 | y: 300, 44 | itemStyle: { 45 | color: '#37A2DA' 46 | } 47 | }, { 48 | name: '节点2', 49 | x: 800, 50 | y: 300, 51 | itemStyle: { 52 | color: '#32C5E9' 53 | } 54 | }, { 55 | name: '节点3', 56 | x: 550, 57 | y: 100, 58 | itemStyle: { 59 | color: '#9FE6B8' 60 | } 61 | }, { 62 | name: '节点4', 63 | x: 550, 64 | y: 500, 65 | itemStyle: { 66 | color: '#FF9F7F' 67 | } 68 | }], 69 | // links: [], 70 | links: [{ 71 | source: 0, 72 | target: 1, 73 | symbolSize: [5, 20], 74 | label: { 75 | normal: { 76 | show: true 77 | } 78 | }, 79 | lineStyle: { 80 | normal: { 81 | width: 4, 82 | curveness: 0.2 83 | } 84 | } 85 | }, { 86 | source: '节点2', 87 | target: '节点1', 88 | label: { 89 | normal: { 90 | show: true 91 | } 92 | }, 93 | lineStyle: { 94 | normal: { curveness: 0.2 } 95 | } 96 | }, { 97 | source: '节点1', 98 | target: '节点3' 99 | }, { 100 | source: '节点2', 101 | target: '节点3' 102 | }, { 103 | source: '节点2', 104 | target: '节点4' 105 | }, { 106 | source: '节点1', 107 | target: '节点4' 108 | }], 109 | lineStyle: { 110 | normal: { 111 | opacity: 0.9, 112 | width: 2, 113 | curveness: 0 114 | } 115 | } 116 | } 117 | ] 118 | }; 119 | 120 | chart.setOption(option); 121 | return chart; 122 | } 123 | 124 | Page({ 125 | onShareAppMessage: function (res) { 126 | return { 127 | title: 'ECharts 可以在微信小程序中使用啦！', 128 | path: '/pages/index/index', 129 | success: function () { }, 130 | fail: function () { } 131 | } 132 | }, 133 | data: { 134 | ec: { 135 | onInit: initChart 136 | } 137 | }, 138 | 139 | onReady() { 140 | } 141 | }); 142 | -------------------------------------------------------------------------------- /pages/graph/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "ec-canvas": "../../ec-canvas/ec-canvas" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /pages/graph/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /pages/graph/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | ec-canvas { 3 | width: 100%; 4 | height: 100%; 5 | } 6 | -------------------------------------------------------------------------------- /pages/heatmap/index.js: -------------------------------------------------------------------------------- 1 | import * as echarts from '../../ec-canvas/echarts'; 2 | 3 | const app = getApp(); 4 | 5 | function initChart(canvas, width, height, dpr) { 6 | const chart = echarts.init(canvas, null, { 7 | width: width, 8 | height: height, 9 | devicePixelRatio: dpr // new 10 | }); 11 | canvas.setChart(chart); 12 | 13 | const model = { 14 | yCates: ['Saturday', 'Friday', 'Thursday', 15 | 'Wednesday', 'Tuesday', 'Monday', 16 | 'Sunday'], 17 | xCates: ['1', '2', '3', '4', '5'], 18 | data: [ 19 | // [yCateIndex, xCateIndex, value] 20 | [0, 0, 5], [0, 1, 7], [0, 2, 3], [0, 3, 5], [0, 4, 2], 21 | [1, 0, 1], [1, 1, 2], [1, 2, 4], [1, 3, 8], [1, 4, 2], 22 | [2, 0, 2], [2, 1, 3], [2, 2, 8], [2, 3, 6], [2, 4, 7], 23 | [3, 0, 3], [3, 1, 7], [3, 2, 5], [3, 3, 1], [3, 4, 6], 24 | [4, 0, 3], [4, 1, 2], [4, 2, 7], [4, 3, 8], [4, 4, 9], 25 | [5, 0, 2], [5, 1, 2], [5, 2, 3], [5, 3, 4], [5, 4, 7], 26 | [6, 0, 6], [6, 1, 5], [6, 2, 3], [6, 3, 1], [6, 4, 2] 27 | ] 28 | }; 29 | 30 | const data = model.data.map(function (item) { 31 | return [item[1], item[0], item[2] || '-']; 32 | }); 33 | 34 | const option = { 35 | tooltip: { 36 | position: 'top' 37 | }, 38 | animation: false, 39 | grid: { 40 | bottom: 60, 41 | top: 10, 42 | left: 80 43 | }, 44 | xAxis: { 45 | type: 'category', 46 | data: model.xCates 47 | }, 48 | yAxis: { 49 | type: 'category', 50 | data: model.yCates 51 | }, 52 | visualMap: { 53 | min: 1, 54 | max: 10, 55 | show: false, 56 | calculable: true, 57 | orient: 'horizontal', 58 | left: 'center', 59 | bottom: 10, 60 | inRange: { 61 | color: ["#37A2DA", "#32C5E9", "#67E0E3", "#91F2DE", "#FFDB5C", "#FF9F7F"], 62 | } 63 | }, 64 | series: [{ 65 | name: 'Punch Card', 66 | type: 'heatmap', 67 | data: data, 68 | label: { 69 | normal: { 70 | show: true 71 | } 72 | }, 73 | itemStyle: { 74 | emphasis: { 75 | shadowBlur: 10, 76 | shadowColor: 'rgba(0, 0, 0, 0.5)' 77 | } 78 | } 79 | }] 80 | }; 81 | 82 | chart.setOption(option); 83 | return chart; 84 | } 85 | 86 | Page({ 87 | onShareAppMessage: function (res) { 88 | return { 89 | title: 'ECharts 可以在微信小程序中使用啦！', 90 | path: '/pages/index/index', 91 | success: function () { }, 92 | fail: function () { } 93 | } 94 | }, 95 | data: { 96 | ec: { 97 | onInit: initChart 98 | } 99 | }, 100 | 101 | onReady() { 102 | } 103 | }); 104 | -------------------------------------------------------------------------------- /pages/heatmap/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "ec-canvas": "../../ec-canvas/ec-canvas" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /pages/heatmap/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /pages/heatmap/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | ec-canvas { 3 | width: 100%; 4 | height: 100%; 5 | } 6 | -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | const app = getApp(); 2 | 3 | Page({ 4 | onShareAppMessage: function (res) { 5 | return { 6 | title: 'ECharts 可以在微信小程序中使用啦！', 7 | path: '/pages/index/index', 8 | success: function () {}, 9 | fail: function () {} 10 | } 11 | }, 12 | data: { 13 | charts: [{ 14 | id: 'bar', 15 | name: '柱状图' 16 | }, { 17 | id: 'scatter', 18 | name: '散点图' 19 | }, { 20 | id: 'pie', 21 | name: '饼图' 22 | }, { 23 | id: 'line', 24 | name: '折线图' 25 | }, { 26 | id: 'funnel', 27 | name: '漏斗图' 28 | }, { 29 | id: 'gauge', 30 | name: '仪表盘' 31 | }, { 32 | id: 'k', 33 | name: 'K 线图' 34 | }, { 35 | id: 'radar', 36 | name: '雷达图' 37 | }, { 38 | id: 'heatmap', 39 | name: '热力图' 40 | }, { 41 | id: 'tree', 42 | name: '树图' 43 | }, { 44 | id: 'treemap', 45 | name: '矩形树图' 46 | }, { 47 | id: 'sunburst', 48 | name: '旭日图' 49 | }, { 50 | id: 'map', 51 | name: '地图' 52 | }, { 53 | id: 'graph', 54 | name: '关系图' 55 | }, { 56 | id: 'boxplot', 57 | name: '箱型图' 58 | }, { 59 | id: 'parallel', 60 | name: '平行坐标图' 61 | }, { 62 | id: 'sankey', 63 | name: '桑基图' 64 | }, { 65 | id: 'themeRiver', 66 | name: '主题河流图' 67 | }], 68 | chartsWithoutImg: [{ 69 | id: 'lazyLoad', 70 | name: '延迟加载图表' 71 | }, { 72 | id: 'multiCharts', 73 | name: '一个页面中多个图表' 74 | }, { 75 | id: 'move', 76 | name: '页面不阻塞滚动' 77 | }, { 78 | id: 'saveCanvas', 79 | name: '保存 Canvas 到本地文件' 80 | }, { 81 | id: 'loadImage', 82 | name: '加载图片' 83 | }] 84 | }, 85 | 86 | onReady() { 87 | }, 88 | 89 | open: function (e) { 90 | wx.navigateTo({ 91 | url: '../' + e.target.dataset.chart.id + '/index' 92 | }); 93 | } 94 | }); 95 | -------------------------------------------------------------------------------- /pages/index/index.json: -------------------------------------------------------------------------------- 1 | { 2 | } 3 | -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{chart.name}} 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | .panel { 2 | display: block; 3 | margin-top: 10px; 4 | } 5 | 6 | .panel .chart-with-img { 7 | display: inline-block; 8 | width: 25%; 9 | margin: 10px 4%; 10 | text-align: center; 11 | } 12 | 13 | .chart-with-img image { 14 | box-sizing: border-box; 15 | width: 100%; 16 | height: 100px; 17 | padding: 20px; 18 | background-color: #f3f3f3; 19 | border: 1px solid #eee; 20 | display: block; 21 | margin: 0 auto; 22 | margin-bottom: 10px; 23 | } 24 | 25 | .chart-without-img { 26 | display: block; 27 | width: 92%; 28 | margin: 10px 4%; 29 | border: none; 30 | border-radius: 0; 31 | } 32 | 33 | .chart-without-img button { 34 | text-align: left; 35 | } 36 | -------------------------------------------------------------------------------- /pages/k/index.js: -------------------------------------------------------------------------------- 1 | import * as echarts from '../../ec-canvas/echarts'; 2 | 3 | const app = getApp(); 4 | 5 | function initChart(canvas, width, height, dpr) { 6 | const chart = echarts.init(canvas, null, { 7 | width: width, 8 | height: height, 9 | devicePixelRatio: dpr // new 10 | }); 11 | canvas.setChart(chart); 12 | 13 | var option = { 14 | title: { 15 | text: 'K 线图' 16 | }, 17 | xAxis: { 18 | data: ['10:00', '10:30', '11:00', '11:30', '13:00', '13:30', '14:00'] 19 | }, 20 | yAxis: {}, 21 | series: [{ 22 | type: 'k', 23 | data: [ 24 | [100, 200, 40, 250], 25 | [80, 90, 66, 100], 26 | [90, 40, 33, 110], 27 | [50, 60, 40, 80], 28 | [200, 180, 160, 200], 29 | [100, 200, 40, 250], 30 | [80, 90, 66, 100] 31 | ], 32 | itemStyle: { 33 | normal: { 34 | color: '#ff0000', 35 | color0: '#00ff00', 36 | borderWidth: 1, 37 | opacity: 1, 38 | } 39 | } 40 | }] 41 | }; 42 | 43 | chart.setOption(option); 44 | return chart; 45 | } 46 | 47 | Page({ 48 | onShareAppMessage: function (res) { 49 | return { 50 | title: 'ECharts 可以在微信小程序中使用啦！', 51 | path: '/pages/index/index', 52 | success: function () { }, 53 | fail: function () { } 54 | } 55 | }, 56 | data: { 57 | ec: { 58 | onInit: initChart 59 | } 60 | }, 61 | 62 | onReady() { 63 | } 64 | }); 65 | -------------------------------------------------------------------------------- /pages/k/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "ec-canvas": "../../ec-canvas/ec-canvas" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /pages/k/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /pages/k/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | ec-canvas { 3 | width: 100%; 4 | height: 100%; 5 | } 6 | -------------------------------------------------------------------------------- /pages/lazyLoad/index.js: -------------------------------------------------------------------------------- 1 | import * as echarts from '../../ec-canvas/echarts'; 2 | 3 | const app = getApp(); 4 | 5 | function setOption(chart) { 6 | const option = { 7 | tooltip: { 8 | trigger: 'axis', 9 | axisPointer: { // 坐标轴指示器，坐标轴触发有效 10 | type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' 11 | } 12 | }, 13 | legend: { 14 | data: ['热度', '正面', '负面'] 15 | }, 16 | grid: { 17 | left: 20, 18 | right: 20, 19 | bottom: 15, 20 | top: 40, 21 | containLabel: true 22 | }, 23 | xAxis: [ 24 | { 25 | type: 'value', 26 | axisLine: { 27 | lineStyle: { 28 | color: '#999' 29 | } 30 | }, 31 | axisLabel: { 32 | color: '#666' 33 | } 34 | } 35 | ], 36 | yAxis: [ 37 | { 38 | type: 'category', 39 | axisTick: { show: false }, 40 | data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'], 41 | axisLine: { 42 | lineStyle: { 43 | color: '#999' 44 | } 45 | }, 46 | axisLabel: { 47 | color: '#666' 48 | } 49 | } 50 | ], 51 | series: [ 52 | { 53 | name: '热度', 54 | type: 'bar', 55 | label: { 56 | normal: { 57 | show: true, 58 | position: 'inside' 59 | } 60 | }, 61 | data: [300, 270, 340, 344, 300, 320, 310], 62 | itemStyle: { 63 | // emphasis: { 64 | // color: '#37a2da' 65 | // } 66 | } 67 | }, 68 | { 69 | name: '正面', 70 | type: 'bar', 71 | stack: '总量', 72 | label: { 73 | normal: { 74 | show: true 75 | } 76 | }, 77 | data: [120, 102, 141, 174, 190, 250, 220], 78 | itemStyle: { 79 | // emphasis: { 80 | // color: '#32c5e9' 81 | // } 82 | } 83 | }, 84 | { 85 | name: '负面', 86 | type: 'bar', 87 | stack: '总量', 88 | label: { 89 | normal: { 90 | show: true, 91 | position: 'left' 92 | } 93 | }, 94 | data: [-20, -32, -21, -34, -90, -130, -110], 95 | itemStyle: { 96 | // emphasis: { 97 | // color: '#67e0e3' 98 | // } 99 | } 100 | } 101 | ] 102 | }; 103 | chart.setOption(option); 104 | } 105 | 106 | Page({ 107 | onShareAppMessage: res => { 108 | return { 109 | title: 'ECharts 可以在微信小程序中使用啦！', 110 | path: '/pages/index/index', 111 | success: function () { }, 112 | fail: function () { } 113 | } 114 | }, 115 | 116 | onReady: function () { 117 | // 获取组件 118 | this.ecComponent = this.selectComponent('#mychart-dom-bar'); 119 | }, 120 | 121 | data: { 122 | ec: { 123 | // 将 lazyLoad 设为 true 后，需要手动初始化图表 124 | lazyLoad: true 125 | }, 126 | isLoaded: false, 127 | isDisposed: false 128 | }, 129 | 130 | // 点击按钮后初始化图表 131 | init: function () { 132 | this.ecComponent.init((canvas, width, height, dpr) => { 133 | // 获取组件的 canvas、width、height 后的回调函数 134 | // 在这里初始化图表 135 | const chart = echarts.init(canvas, null, { 136 | width: width, 137 | height: height, 138 | devicePixelRatio: dpr // new 139 | }); 140 | setOption(chart); 141 | 142 | // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问 143 | this.chart = chart; 144 | 145 | this.setData({ 146 | isLoaded: true, 147 | isDisposed: false 148 | }); 149 | 150 | // 注意这里一定要返回 chart 实例，否则会影响事件处理等 151 | return chart; 152 | }); 153 | }, 154 | 155 | dispose: function () { 156 | if (this.chart) { 157 | this.chart.dispose(); 158 | } 159 | 160 | this.setData({ 161 | isDisposed: true 162 | }); 163 | } 164 | }); 165 | -------------------------------------------------------------------------------- /pages/lazyLoad/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "ec-canvas": "../../ec-canvas/ec-canvas" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /pages/lazyLoad/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /pages/lazyLoad/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | ec-canvas { 3 | position: absolute; 4 | top: 80px; 5 | bottom: 0; 6 | left: 0; 7 | right: 0; 8 | } 9 | 10 | button { 11 | margin: 10px; 12 | } 13 | -------------------------------------------------------------------------------- /pages/line/index.js: -------------------------------------------------------------------------------- 1 | import * as echarts from '../../ec-canvas/echarts'; 2 | 3 | const app = getApp(); 4 | 5 | function initChart(canvas, width, height, dpr) { 6 | const chart = echarts.init(canvas, null, { 7 | width: width, 8 | height: height, 9 | devicePixelRatio: dpr // new 10 | }); 11 | canvas.setChart(chart); 12 | 13 | var option = { 14 | title: { 15 | text: '测试下面legend的红色区域不应被裁剪', 16 | left: 'center' 17 | }, 18 | legend: { 19 | data: ['A', 'B', 'C'], 20 | top: 50, 21 | left: 'center', 22 | backgroundColor: 'red', 23 | z: 100 24 | }, 25 | grid: { 26 | containLabel: true 27 | }, 28 | tooltip: { 29 | show: true, 30 | trigger: 'axis' 31 | }, 32 | xAxis: { 33 | type: 'category', 34 | boundaryGap: false, 35 | data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], 36 | // show: false 37 | }, 38 | yAxis: { 39 | x: 'center', 40 | type: 'value', 41 | splitLine: { 42 | lineStyle: { 43 | type: 'dashed' 44 | } 45 | } 46 | // show: false 47 | }, 48 | series: [{ 49 | name: 'A', 50 | type: 'line', 51 | smooth: true, 52 | data: [18, 36, 65, 30, 78, 40, 33] 53 | }, { 54 | name: 'B', 55 | type: 'line', 56 | smooth: true, 57 | data: [12, 50, 51, 35, 70, 30, 20] 58 | }, { 59 | name: 'C', 60 | type: 'line', 61 | smooth: true, 62 | data: [10, 30, 31, 50, 40, 20, 10] 63 | }] 64 | }; 65 | 66 | chart.setOption(option); 67 | return chart; 68 | } 69 | 70 | Page({ 71 | onShareAppMessage: function (res) { 72 | return { 73 | title: 'ECharts 可以在微信小程序中使用啦！', 74 | path: '/pages/index/index', 75 | success: function () { }, 76 | fail: function () { } 77 | } 78 | }, 79 | data: { 80 | ec: { 81 | onInit: initChart 82 | } 83 | }, 84 | 85 | onReady() { 86 | } 87 | }); 88 | -------------------------------------------------------------------------------- /pages/line/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "ec-canvas": "../../ec-canvas/ec-canvas" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /pages/line/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /pages/line/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | ec-canvas { 3 | width: 100%; 4 | height: 100%; 5 | } 6 | -------------------------------------------------------------------------------- /pages/loadImage/index.js: -------------------------------------------------------------------------------- 1 | import * as echarts from '../../ec-canvas/echarts'; 2 | 3 | const app = getApp(); 4 | 5 | function initChart(canvas, width, height, dpr) { 6 | const chart = echarts.init(canvas, null, { 7 | width: width, 8 | height: height, 9 | devicePixelRatio: dpr // new 10 | }); 11 | canvas.setChart(chart); 12 | 13 | const piePatternSrc = '/img/pie-pattern.jpg'; 14 | const bgPatternSrc = '/img/pie-bg.png'; 15 | 16 | var option = { 17 | backgroundColor: { 18 | image: bgPatternSrc, 19 | repeat: 'repeat' 20 | }, 21 | title: { 22 | text: '加载图片', 23 | textStyle: { 24 | color: '#235894' 25 | } 26 | }, 27 | tooltip: {}, 28 | series: [ 29 | { 30 | name: 'pie', 31 | type: 'pie', 32 | selectedMode: 'single', 33 | selectedOffset: 30, 34 | clockwise: true, 35 | label: { 36 | fontSize: 18, 37 | color: '#235894' 38 | }, 39 | labelLine: { 40 | lineStyle: { 41 | color: '#235894' 42 | } 43 | }, 44 | data: [ 45 | { value: 1048, name: 'Search Engine' }, 46 | { value: 735, name: 'Direct' }, 47 | { value: 580, name: 'Email' }, 48 | { value: 484, name: 'Union Ads' }, 49 | { value: 300, name: 'Video Ads' } 50 | ], 51 | itemStyle: { 52 | opacity: 0.7, 53 | color: { 54 | image: piePatternSrc, 55 | repeat: 'repeat' 56 | }, 57 | borderWidth: 3, 58 | borderColor: '#235894' 59 | } 60 | } 61 | ] 62 | }; 63 | 64 | chart.setOption(option); 65 | return chart; 66 | } 67 | 68 | Page({ 69 | onShareAppMessage: function (res) { 70 | return { 71 | title: 'ECharts 可以在微信小程序中使用啦！', 72 | path: '/pages/index/index', 73 | success: function () { }, 74 | fail: function () { } 75 | } 76 | }, 77 | data: { 78 | ec: { 79 | onInit: initChart 80 | } 81 | }, 82 | 83 | onReady() { 84 | } 85 | }); 86 | -------------------------------------------------------------------------------- /pages/loadImage/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "ec-canvas": "../../ec-canvas/ec-canvas" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /pages/loadImage/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /pages/loadImage/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | ec-canvas { 3 | width: 100%; 4 | height: 100%; 5 | } 6 | -------------------------------------------------------------------------------- /pages/map/index.js: -------------------------------------------------------------------------------- 1 | import * as echarts from '../../ec-canvas/echarts'; 2 | import geoJson from './mapData.js'; 3 | 4 | const app = getApp(); 5 | 6 | function initChart(canvas, width, height, dpr) { 7 | const chart = echarts.init(canvas, null, { 8 | width: width, 9 | height: height, 10 | devicePixelRatio: dpr // new 11 | }); 12 | canvas.setChart(chart); 13 | 14 | echarts.registerMap('henan', geoJson); 15 | 16 | const option = { 17 | tooltip: { 18 | trigger: 'item', 19 | formatter: '{b}: {c}' 20 | }, 21 | 22 | visualMap: { 23 | min: 0, 24 | max: 100, 25 | left: 'left', 26 | top: 'bottom', 27 | text: ['高', '低'], // 文本，默认为数值文本 28 | calculable: true 29 | }, 30 | toolbox: { 31 | show: true, 32 | orient: 'vertical', 33 | left: 'right', 34 | top: 'center', 35 | feature: { 36 | dataView: { readOnly: false }, 37 | restore: {}, 38 | saveAsImage: {} 39 | } 40 | }, 41 | series: [{ 42 | type: 'map', 43 | mapType: 'henan', 44 | label: { 45 | normal: { 46 | show: true 47 | }, 48 | emphasis: { 49 | textStyle: { 50 | color: '#fff' 51 | } 52 | } 53 | }, 54 | itemStyle: { 55 | 56 | normal: { 57 | borderColor: '#389BB7', 58 | areaColor: '#fff', 59 | }, 60 | emphasis: { 61 | areaColor: '#389BB7', 62 | borderWidth: 0 63 | } 64 | }, 65 | animation: false, 66 | 67 | data: [ 68 | { name: '郑州市', value: 100 }, 69 | { name: '洛阳市', value: 10 }, 70 | { name: '开封市', value: 20 }, 71 | { name: '信阳市', value: 30 }, 72 | { name: '驻马店市', value: 40 }, 73 | { name: '南阳市', value: 41 }, 74 | { name: '周口市', value: 15 }, 75 | { name: '许昌市', value: 25 }, 76 | { name: '平顶山市', value: 35 }, 77 | { name: '新乡市', value: 35 }, 78 | { name: '漯河市', value: 35 }, 79 | { name: '商丘市', value: 35 }, 80 | { name: '三门峡市', value: 35 }, 81 | { name: '济源市', value: 35 }, 82 | { name: '焦作市', value: 35 }, 83 | { name: '安阳市', value: 35 }, 84 | { name: '鹤壁市', value: 35 }, 85 | { name: '濮阳市', value: 35 }, 86 | { name: '开封市', value: 45 } 87 | ] 88 | 89 | }], 90 | 91 | }; 92 | 93 | chart.setOption(option); 94 | 95 | return chart; 96 | } 97 | 98 | Page({ 99 | onShareAppMessage: function (res) { 100 | return { 101 | title: 'ECharts 可以在微信小程序中使用啦！', 102 | path: '/pages/index/index', 103 | success: function () { }, 104 | fail: function () { } 105 | } 106 | }, 107 | data: { 108 | ec: { 109 | onInit: initChart 110 | } 111 | }, 112 | 113 | onReady() { 114 | } 115 | }); 116 | -------------------------------------------------------------------------------- /pages/map/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "ec-canvas": "../../ec-canvas/ec-canvas" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /pages/map/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /pages/map/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | ec-canvas { 3 | width: 100%; 4 | height: 100%; 5 | } 6 | -------------------------------------------------------------------------------- /pages/map/mapData.js: -------------------------------------------------------------------------------- 1 | module.exports = { "type": "FeatureCollection", "features": [{ "id": "410100", "type": "Feature", "geometry": { "type": "Polygon", "coordinates": ["@@bEV@JANAZBLA`UJOPGN@‚NPH`DR@ZEHCVST]POLCtE`D|LRHvXPD\\GvATHNJHHDNRVrlFHFFFDJDLATMZO^ALDRAVHVLTDR@PGTMTGZQHAP@^J\\FBCDIJMZM@IAOC[MGUIQCOAAUKGAOB]D_AaEMGAEFIRUxkNMHKAECCMCMGIKIMKGCEFeHIZSDE@GCWFiAEMGECBEHYASHIAEIIAG@EJGGEG@EBANCDO@CCEMAQCU@S_YCEEKKgIwAM@QAESQGCG@IFGJIHYLUNGBW_UMIGBOBARCDCDMAWAAKEICECSAKCM@OFO@KAO@GCCABbCFEBIBAACEEMGCKAE@KDEPCBE@K@COQSCKKOKYDSAIFQBIFG@G@ECEEMAEBCFCDCBCB@BCAYBC@GAACAIDI@SAECYBCIA@I@GBK@MFEFODGFMFICGEGA@CDCCASQGAACeASDEDKBEAEEDC@AMCCGOAEEEADK@CAC[CACJCBCAKGECBGFGDQDGAKIKCCAKBKJKDENGBK@ADGJGJAHCB[NO@[LOBS@ICGGIESDSFIDMHONDLABMNE@IEIAWJG@ECEGGMC@OHI@KJIAABAD[PE@KEWBA@DHABIFFHAB@DHPBFBDGFM@SCGBMFEEE@EBOD@DHN@DOFGFKBGPODMCQ@CC@EACGACEAEHKBCCGKMBGCMHOACKAIBC@KASDICGBAAAOOKe@QDI@WIAE@MGEOQAAIAQBEACIIIAGCC@IIII@BGACECKAGKGEKCEFGBCFG@kKQGOASDQDMVM@EB@BFDEJA@EGEAUAM@GBSRIAABABIPEDS@UGKBuBMHcMK@MBGAICC@OFQBCBCFI@SAGCGBYF_IEHFHBNJDNDBBOHUREHG@K@EBQLE@ICKIGCK@ABAD@R@BIBM@IDGAK@AFALCDEBQEQEE@AHGJDFBP@JABEDIBAHBDDFJBJFAHFNALINDFJFJXDZCLFdAVGLBH\\FHAJ@HDPLBAx_DCBEVALDJCVAXBL@FCLEND`@RBROFAHHXL@BEH@FHXFFCVFH@PDHHDLBPFJ@JCH@\\BJFJJcFQJKBo@ICU@_DM@OLGNCPUTKNAFDF_CEDEHAD@DJRBF@FCPEDE@CFNFBFBHFJCJYVCDLPADGNCRAPDF\\JHBNJJDF@JDNCJA^UPATTJPHBXABBHPFHCBKBmXGJGRDFJFARDJCJCDKFWDGGCAMDqAIBMFIAMGYBEDAHA\\DTDFFDVLVM`AFFT`NFLdDDFBdAZIp_J@XLlVTJFFHPHBPAXERK^YRGXAVDND~FPFHNXBRGTMLQF@JBb\\THRJPLXLJJBFDPRdDP@\\F^HLTLND\\B`CZKZIL@PBJDTLRPVXRPdNfJXCPGDM@M@KjGxEfDhNbDX@REXQVKRQRO"], "encodeOffsets": [[116319, 35773]] }, "properties": { "cp": [113.665412, 34.757975], "name": "郑州市", "childNum": 1 } }, { "id": "410200", "type": "Feature", "geometry": { "type": "Polygon", "coordinates": ["@@LKJCXM”H²CTBPJTN`dJFL@N@NGTIdYPG”U|Q`DXDjNtNVA\\EP@`GJCNANCPAHBNFFDBFHBb]\\C^MJ@JF\\@TDHB\\VHLBFALCJGHIFYV[TCF@JDHDHJJPNTDXRZZNJPJ\\LLEDCvMDBHACCBATA@DCBK@BFGBBFJAHRD@@AB@@JC@@BHACHP@@CNA@GBA@GAECBCOB@@ABA@CVM^EFEFQDEJIFCHDPVRLNFhBXCv@JQFELGFAH@FDLP^HVRXLX@`@RBLFX@JIBMEQFCZCJIFKFCAQNAXJTKbKHLFDNDH@DEBK@KCEA@CBCEGDQcIFAAC@ACA@GULA@CXAAIVCDPP@BBZAVEDCEYQSAEBsFKFCTEPUBK@GCCYSSIQEOAwH]GIEQ[IIKCEBONMJK@QCKEKKGKKIOAO@WF_@m@WCsWI@EBCDEBOE[@GAEEOCKGECECGA[DaTaNYTEDG@EAAMEAyAGAECCKDENC@MJCPAVEBEAGIIGIQKAEXEHCBEBK@SDCHCH@\\PLDbBHATK^IJIBG@ECESGaAMCMGEK@EFELIBE@EIOH[AGGM@GPaDUFM@KBKN_BICeESAEBIFUAEAEQUMKOGIAIEUEMIGGAQK[@OHOJIPOJMDOAG_kEQAOBGBIJCDIJQBUBAJALCJIVSBCF@E]CGCAOBgJmTIBKBCAEGKSEACAyE[EQGGECCGYACIEWGUIA@EBCDGRGFIFQDu@EDKHE@c@IHOPQE[DKLWPEBMB_EUBYRWFMRCF@PKNGBEGC@[@EDEHIREFCBiDqNGOCWCIGGBGDAHCXCNELEBGOMISKIME[AEAACGUGGQ@KEKA]B]FWHGHWXGBu@URI@IAEAGGG]AEYYoAM@MFKAOMCGAUAEEAm@WCAACOCEKAMAMEA@M@@DEBCFCBS@EDCJDH@DADKFADBBHDBDGHIRGDM@@L@@GBG@SICHEBEIEAUFCCAMEAgHY@ABAHKL@LAHGDKEE@@LBFDF@BGDW@ABCJCDC@KAAFFJCD_JWBALABGEE@YAIKCAI@AFAHKDFZADGBBJABQFFD@HADBZADA@ADCDED@JFNDF@F@HEHAJERBJCTLZLPDLRTDPL@F@DAFOLCF@LBHDFNDFBBJAFADEAaDBHDP@LBP@PEJARHR@FDJDLFBBBXCNCDQDABAPJHVNX`HAVMZKJGHIJEH@HDTRBF@RBNJxLhFLDF`Z@TDVBRFNDDP@DCBMFAH@HFIH@FBHJJBFGJBTGZAFFDNHBFEjDX@HCFYTGJEfDFLHJNJLNHNDDDBFGLMNwlQVEJBFFFND\\D`B^CPAHBVLXzDTNŠBZ"], "encodeOffsets": [[116963, 35758]] }, "properties": { "cp": [114.341447, 34.797049], "name": "开封市", "childNum": 1 } }, { "id": "410300", "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [["@@AGE@IAA@AHAB@D@BD@FAH@FC"], ["@@@GGOBABCLED@HFD@PED@hBNDNANCFDJALEXI|MVMHIRUTeJGhG^Q`YJELAJDRXLJNDD@XSPIREVC\\BLC\\ILGTA`KHIDAj@VFV@jEREpUHCHKFATFPCHEFAF@VBDDEBBLOJCFDBD@NIB@ADAD@DFHADIDGRCBK@GAIQA@QDIA@BBFDBDRHLB@JELFDAROFAD@VNL@JDFLLFLTD@BC@OLEDYBEJG„KhA@mHA@KAGIG@C@_DUH@\\GfKRIhEdYzMXDNFNJTDPG\\DJDZEJM[OCECYBUDIHCV@NHJBNEJArBNCDBHHXCLEDCDICIBQIECEHQHInWLADAEGGOAAWBGAIOSSOB]VIBMDICE@ICMIGA[ICEBODQHMBCKODCZUDIEIAGAEMEDEF@FCDO@EAEIQ@CBCFGFC`DCEBELMVSDOHMPKN@`CV@JDp@LARIdEIIIE[AG@IDI@OEKAGCCG@OEGDUEEGW@EFG@AWKGGEBQPQA_@MCKFEDK@WAUBIDKCUBAFCDw`ABOKGCI@GB[EAGHKBUEcDKASIYACIECEJMBKEMBGIEIACEAC@GPCDC@IAOCEHIBGB@H@NFRFFADCBKBEL@HBNCOISQCAI@IDKBI@KEE@eJQ@YQSCQ@WGAFFTSPuG_MEMCEi[SQAKCOaQBIHMdSDOGKOQKMHSNKdqFU@QDIFEbIJGFKI[O_KsBSCMMGQCOGCI@QEI…aKIBGLCT@JCDCHCJIJCECEAMBGAICECAEDEFA@IEIOWA_BIOSSG]GQGAILQZKlIJE@MOWik[@[BUGYSKSmsUI[@aZihGDI@YKwKOIKMQKOCO@KIKEAEHIBCAAEESEGEAG@CFEJEGu@EEESMAA@MBGwEQCYQaMKJAXSNSCQMIUEUU]UQ_MYGOAUGCIBOHMPGFUJK@KIGG@SHOBMEOLYXMDMCSQEUBKBBD@BGD@BBFHBBFCBGBAIAGIsEcE}OaEQ@IBGFEHUT]PWFQ@MC[AUFEDCJ@PBNA\\GZGLUHIBuRSJwVWLSBSCqSWROTirYLYH]@[CUFYHuASLOFOCQQWKU@]XOF_FYHULWPYNQFUAcG[AOFG@GAMEEAI@EBEDORQDSHSAIDEHMVA\\BZAFgbMXCF[L@BBRADCDOFIHBNBDD@DEAEJCFFNDHABDNJBFAHOX@HFNDFPLFBN@TGF@PDNFF@D@BABKDAJAXBBBBHDRFLFFRPHLHF`NNPJHDFGRDPAVCNELMNAF@fDNHHDJBLFNLJLDBBBDQ^]@CDCDKFe@EBGFCFAFDPENEFIDE@E@UMABAB@JAFSAE@IDMHCDCNSPIREBWAGBCDGPALCFEByVMNUN@FFDJBRAHBDBJXBHBJKLAFDRAZDLJJFXM\\QNILCJEVCDIHeDABCF@DFP@NJJ@NDFHHJF^@dHDDBBCTBLRD\\VBDAJDRJXDDJ@dKpKJ@BD@FEZ@F@Df`LHJAFUDEDAHA\\AhBJBXNFANMLARBTRHDhN„`LLlRLJJPFFTRND`BFAHEHANBD@PPTNDHFDP@BCHKJAHBBDBHDD`EVKrMdKTENKHCRAD@BD@DWXGVAHKN@FD@^@LBHFLRDDRHRFPHTF\\GJBDRDDDBH@VAFDHFNRTPJFHDPAFBDDBD@HAL@BBB\\CdBPCHCFEHM^aDANFJAncHCJBFFCNBDLPBRLHJL\\HFFBJRD@BAFGJCLDLDFLHBFBF@DEFADDDVADFBFAFGTAFDFFF\\HFJ@DCHKHMN@HLBPADBDDHR@JCFNBFHDBHACFDJAHAFAFCAEDQHCFAH@DBBLBBDCHIHYPIHEJOFCFAF@FDFLJ@DEDM@]KQAQB@DDLAHOLSLSRSB[BIHEBI@CBADDTCLBDLRNJRHRDNFLNRPPAN@dL\\NDDBB@HCFCBEBQ@GBGFIL@FBBFDND^B@BEFAF\\L@DqR_PWRAHBD`PFH@V@HDBZLDAFCXDbGFBFDNBFC@EFIJELCDEDIAA"]], "encodeOffsets": [[[114719, 35618]], [[114728, 35887]]] }, "properties": { "cp": [112.434468, 34.663041], "name": "洛阳市", "childNum": 2 } }, { "id": "410400", "type": "Feature", "geometry": { "type": "Polygon", "coordinates": ["@@IGCIIOAKACAKAYDGNGfGTKDOGSAIDKRYFAFMXUBGGOFCBC@KLAJIJ@HUHEHCTCV@‚NXKJSP@LFBNANJHNDHAN]BAH@VDBABSDEL@DCVC`UNAHCHKIEKIAIBGHCFGN[J@LDBVFFLBXERBVCLEHIJeBUJMNQA‡CQMGOESOIaGKW_ISDS\\eDGJEDGBE@GGMAWJ[DEF@DAAEGCM@QO@ABATEPIRCFCTGNGNCLFF@NCHCDEDIB[XBxJ^LH@FCNBVHPBHBDDDADGFEDAR@FBLFD@DABOFQFEF@HCBGGKEKBIPKAGEIAWBWLYLOn[JCFEBGEKGGaMICm]AA@EABCACEC@@DGA@EA@AFWGBCBB@AA@@ACAD@BEC@BAB@AAAABIB@@AF@L@BEAC@CE@@CE@@CB@BEG@@DE@B@B@@BC@@ACB@CA@D@ACF@@AHA@AEA@ACB@AG@@AA@@CC@BEGKC[B@@EC@@CAA@CA@@CC@@AC@@IFO@BBIKAGHEHA@C@ECCB@@KBAFE@@EE@AIO@@AC@ABS@A@EH@IDOHCAE@EWiBgAEIEAA@WBCDA^AXINCH@HDFKJGFDBF@HBDDBFBX@NKBMDAJDZ@P@REL@HFHJ\\@JCF@D@JJNBPJJ@PEHJBBXGLBFCFBDABQDCDAG]EIAEEMECECcGOMCIIG@CFG@ECK@aIIOMCEEQGQK{Kg@INuNSBELYDAHDX@HC@EQWISQSECICEB[\\EDCGGCMAY@[JCC@MAEMSCAMHQTSBQRG@MGGEA@OBQCYDKAEBOFMB[G[BIA_MCECEAKGSIDGJAHLNERBFHNAF@DWTGHCDHAH@FDJV@TNhHFHDHH@LEX@REPITMXAHBFXHNDDD@FGFAD@DDDHHBDANGHIFQBIDMD[BqTG@oUE@CDILKDMBMCK@IPABO@ABGLKDOCGRGEC@EBADAFBXYNCFCJIDEJQTAJGJOHQDQCW@[OKAODADABATA@cNQA[FS@aIOGI@CDCJCR@TDRHJJHFH@DGF@JAXGJAHHT@JGHIBADAB@PABKAG@BPGLoREA@CAAIDEFAJCBKDKLGAK@QLIDCHAFGLAHgCI@IB[PKBAIACEAQ@UHAECCUECQ@EBGAGOMEAW@UCGDCFCB]OSEWOEAC@C@IHAD@FABCBSAGFEJ]LIFM@IBCEC@WDO@IH_JGDEDAJGBUEWOaDGDCFAF@NABKHSDC@GCY]QKMKECK@ABCJMIQCEBGJEBDL@HABOJINOLGJKXGBYESDKBEBIHUZIDQRGDKNM@IC_Q_BAAQIK@CBEJEFK@UCG@EBQTMHCDCVGHSFMHQLeAE@IHGHAH@NBBTNFF@FHvIFEF@HBDDDXHFFBBADGJBFDDHBLJP@PDRLLNPJxLZLJ@HCjgbY\\@VJntLTZTVH\\A\\@jlPX@NIFkJYLKRBJRH^HTHPTAJB`PXFJ@JEBCFBFFDJDHBNALDIFIJGDCDIDS@KDAHLJ†bFJ@RDJPHRDNHDNATLtP`J\\ELIHaJEFCJ@REVcrMLGTLNPRHLCPcTGNAJbRDPBLTRj\\DFFN`NvHTOESBEXHR@TDZRR@fIF@LFJ@LAJCJ@DB^XFDJ@H@BC@QBCBAL@XPLBRKFAL@H@FGVQNEBAAAMCICAMEGFG`JZEHAHDTBJ@DEDARAPED@JDHBNAL@dNNGvALAVHT@FCJOBABAJBTQHAN@VBFBFHB@FIEC@AFAN@NU"], "encodeOffsets": [[115797, 35089]] }, "properties": { "cp": [113.307718, 33.735241], "name": "平顶山市", "childNum": 1 } }, { "id": "410500", "type": "Feature", "geometry": { "type": "Polygon", "coordinates": ["@@D@BAEG@APEHDCJBFPDJAHMDCFAPAJJD@DEGI@CX@PEFEFMLBJKJAH@PDLBfIH@DB@DEDKDCF@PDDVFjDLCBCDKTMPe@EFAhJDD@NDHAFBBHDF@XEHBBD@FDD@BGDQ@EHBFBDNFH@NIFKDGAGJGJKHWXGBFEJ@JDFPBBD@DCDKBADBJEDE@CEC@E@CBGTBHHBJA\\OHINEFDBBBFAHBBHDL@JEFK@MCGIKBIB@BDTBNCLJJADCBOFCGGAAEBCCGC@ADCACI@MADCHBBECEDC@AD@DBBCRO@EDGBCNGHAP@BA@ADABBD@BFH@BFABD@@BJEVA@CBDHAJDHCB@@BD@AB@DJCCBBBAB@BF@@@AB@BFAADB@BEDAB@@BJB@CD@@CJC@AB@@CDBHCBCBBDAFAD@@C@@DJD@B@AEJ@JC@CAGCECAB@@AB@AGBCEEABAEB@BB@@@AB@@DBBBAA@DCFBACD@DBD@HJFARA@ADAFBHPABAHDHB@DFAFFJH@BCP@@EPOHOHAJDFDFFDHHDVIFEHCTCNE@CRCDBR@ADBDJDNCDCJ@BPL@TA@ED@@MB@BAFA@AD@@CB@@GB@@E@@@GNEBFHA@GRADANANALDVBHMBMHI\\El@PCLEPULKNIRETA\\@dGROFGJCAADA@@DABB@@@CB@@DTA@EH@@EHA@CF@@AF@@@JA@G@@@GBAF@BCEA@CC@CBCMFAFCFDBABDJA@DB@@BFBFEBBB@@ABJDB@CBB@DH@@CJ@@EFABDHA@BF@@FLB@DB@@JFBBBN@@DLA@BB@@BnA@CH@@DTADPJ@BFH@AETA@AD@AEPABHF@@FDB@BH@JNNA@CNCACDA@AD@ACDACC@AD@ACLC@ALAAEFAAKNABHL@BJH@J@@AH@ACJA@DL@@DD@@CFAAAH@@CL@JC@AJABDDA@FF@BFHABDFA@AD@@DJA@CXABRC@BBA@DNF@H@ABF@BDPABFDA@IF@BDNAB@@@B@BBB@@CB@A@AE^@@BJA@@DAC@KmHEFKRIDGDK@GI]Mm@CbMXINCTAJAbMBA@AD@AME@@CEGEAAMDAAIH@DHAGFFB@ACBCHE@EGM@CLW@I@EGICIEI@KOcBIHOBK@EM]AQMQCSMIMGUACCCE@EBMASDAPAFAFGAOG]QQ[UEMK@CKCAUAGAGGCG@EB]LMPGJKP[@EII@EPSBoEEKACCACAKAAMCQAEAGQOQAIBAFCJIAQBGDEJE\\QJCšILEHMF]BYDMBgCUEEUESKEGCM@E@AHCJAfFJ@BCEIAKAWKUBEBCLETCFCHge_EKYYMFIBMBM@cFUFOAUE[@GBI@SK[WQIOKKEAE@GAEGCqC_DKAIEE@WFU@GAM@MCWACEACBCFCBIEU@QGMKIOGY@[BWJ_BKCUE[OUEmKMKOQEWIOECWI[EQISOEGCQCA[PQDIBUEECIKBAEAE@GDAD@FDHCNSBIJcEECCGEDAB@FBDFBJ@DFBFJF@DEFS@@BBBCJCFANFHBDJDJDFD@BAJCDCJOJ@HBDLBJCB@RVBD@FCHEDQFBJEFDDLCJHJBLDFFAJDHILWNCD@HDNNLFFBF@JENCNALCD@NCBKHCJAFNT\\THHBF@RAHAHSNQTGTOREJ@FHRFJHDFBPJFFFJHFRFNH\\NjNLFHJGPBHHBVADBBB@NKNBHDHFBD@jGFAP@RCP\\H@JCXFL@DBDFVRlJFDFVHFnJNAREN@HDDBFNDXFJJFHLLDRBFJNDN@HDD@HHJNL^T^BHBX@NCFMDaVOFUR[@iKC@IFIHIFmFQFKHONENDJAD]FAFENKLGAOGIBABFH@BCDGAEAGGGOECI@ODgHcFSCM@O@KMCAcDCAGICIOAUDUAODWGmBSB]EKEKIKGICmKOAGCQSU_IUCACFGTQ`Kd[tG\\BJ@DJPFHJFDH@JBFJDZDNDJDLJBDAFSNAFBNHLDTHDRDFDDJAJPFJLFH@F@BGDM@MGECGKG@AJBP@NANC@WCKAQDKDWTSHKJCFAXADEDiLIDELERGNGHIDOBq_[IMKGGASMWBIHGBC@CAAOCOBIKCAGDM@CCEMAEA@C@]LMDQ@I@CA@EBOAK@GDEPEBQZINKPCJCTKDCACOM@kEQCAOAICQMSGeAKKAE@CDELKJSBANEFCAISSEIAKBAD@\\LD@LIDAF@HDLHJBLBNC@C@CIQAMAGIGFOAMKKOOWBUWQGMM_CCAAEE_UGKGKIGCOBG@ILGHQFMBAACECKBECKCECAEAW@MGGBOJGBW@aKOAgGYA]DUJETFTP^BZ@ZIVSLiri€ALCDCBIAG@CBADEDEACCSEEFELHL@BEDEBEBmAk@MZKLGJETXLRA\\ATEZENBNODENBZJHLBhGVGNBPLBFBHINIHIJ\\FHHGJqFSJBPNNNHVFDF@D@DIDADFF@HAJIN@VGHG@CF@BJ@APCHEACBCHCDMH@BFDJ@JBD@@EFAB@DFD@@A@CBATBHAPDDFB@BEB@FFH@BHC@C@CDEA@JADAB@BHHADMBABADEBG@MCAAA@ELBFIBAB[FGFIL@BFBTCBB@FPCpLDBBB@BADURADHDDF@@FEDBDDNCEL@FGLMDOBCAMKA@CDDF@FBDDDJBTHTNDH@JCFAH@FDHBBF@FBBFLBBFAJGTA\\EJHJDBRBDBBJLNJNCNKTBN@NDR"], "encodeOffsets": [[116462, 37237]] }, "properties": { "cp": [114.352482, 36.103442], "name": "安阳市", "childNum": 1 } }, { "id": "410600", "type": "Feature", "geometry": { "type": "Polygon", "coordinates": ["@@FDFR@lPN@D_TODMLYJAROFCF@HBLAP@FDBJ@R@NC^KD@B@BFFNDDN@HCDBJLPAPDBB@DADGHAJNXBTHHNL\\Jr`PAJCLMDGFQFKJCjKFCBCBWDELITGXSLCRCLBXDD@BM@MAOBIH@HLFDNHN@HC@A@EEGIKOEBICIECQCGCCSGKAMBETMBEACKIICMCYCICAE@ICGIEEGIO@CAIH[\\sLcR_HSDEDBJVV`RTHDPBnLJDLHLJLF^FTAnAXHPCVBVCPBDJHJDBdCDBLNP@N@TDdEhGPCJ@FDHPHHFBHBDC@AEGBAJAPHHBLKFMBE^EBCCIFMPMLGREnEJEJGJED@jL\\@VQPEbUNCDE@MAWAGS]K]IMGGC@GCM@MCEIQAKCGKIEEICWEMCAGCM@QFMBmIGEEUECkIUQCECAK@WEIDG@O[QDO@EBiHIACGAGLM@MAACAUBGAAGHOGIKEiM[MMGQEGEEIEEOIEAGCEIGQ@EFIPQFMqgiOIBE@ucK@K@KDIHQPIDQ@GDIFEFAJBFFJAPBBTHFFBJ[@_H‡VSBKJIFOAICG@ODQ@EDUFULOHeZIDuDIDGDEDAXAFEHWREFCJH`@FCN@F@DLLBHGXCTObWNGDUBCF@LEFSFWLE@F`BFDB`DNNRHVXTAFBVVDDBNEPJHBHBNJR@D@DMDKAIAKGGCE@CBKJC@[KC@ABBLFJTTBJEDMFABITKLCF@DBFLLfBTHRNJDN@"], "encodeOffsets": [[116807, 36734]] }, "properties": { "cp": [114.295444, 35.748236], "name": "鹤壁市", "childNum": 1 } }, { "id": "410700", "type": "Feature", "geometry": { "type": "Polygon", "coordinates": ["@@l@nBFAFAFC@AGKFKFETFDDFBFCBCDAH@JBDADCBKjjqTKJU@YAYO]ESFSVI^CZBxJbLX@HAPIHANHX@FBDBDFDLAFDLDFBBNAREHGJKH@NCJFLJLHVHF@XKTEFE@KDEVAHCXMPaDSHWAGKK@C@EDM@EG[@GJKXQFGBEBWFCRGvCJCfYPGVKVEFCR@PCH@JDPBJELITAˆU`G\\@AIEESGAABOEIAEBIFEJEHCR@JCROJGLCL@L@vdF@JAjPrhBERSTMBGBG@QAEGG[SMSBEDILGDA@MDCBKDMFM@IAEEEMKCM@GDCXMJKCGBIEEKCIAIGKDCCFEAIREFCDG@EACQUA@IDKACEBEPIDIDCBG@CECGAKEGKBMDEDIAA@AP@D@FE@CIEAECEK@CCAGHEDHFDdFJITADMCG@EBCHCF@FBABJLFDVFJAPC`OBBDRFHTPRJ\\FXJFDJPFXPRNLnLVF\\PVFLD`AXINAf@FBLFLJHN@RFVAJEDADBDDFXBNDN@HBV@XEF@JFLB`CrDHDBF@HBFLFPLRJ\\XTLJ@HA\\@VFPBdGVCN@XCNERUHSDGDCZEŠ[EgO@GCkiEI[_IOCMEI]EMCEC@mDwACECe@eE]EMEOGKGKKQYAGBIh[XUPSFM@M@GMO_QsKGEKQMYJKVGdADEBGAGEGQMWKKCKFeQSMYYWQSCOMMQCG@IDE\\SZUJEJMDOAEGK[UGA[CS@IEI@]N[Da^GAAEECMEGAOBMDMBID_HO@[FUBsMiMWC_C{R“VOHcZSJMHM@K@IE_cSMOISA±D“GWNIDKLYNINCJAD[E]IO@GBYRSHSNOHQ@SCUKUGQBKC]BYPSNKBICECEEEGqkQUCMGGMISGuB[HOCuWQG{K_CsFKDOPS^UTGDYFQ@_COGMM@OHIP_VKBYAMBIBU@aFDP@ZBNFLT^FFJLDBLFVFNFFH@BABG@KFEFAFBDF@VBDFBBCL@V@DY\\IFCJINK`O^EZGRKVEBOAQGGAIBA@AD@FBFAFGDQBIBGFONAHARIRCPGPAH@^@HNRLDNLBF@FETKTSTET@HAXG@ELA@Q@WCGB@BClAFGDCJDV@FKFOPHFCHCD@JFBNAFDFHCLILIHKNCJ@NGTUfibQHQNKDIJGDCDADA\\GLGFHRDDFDV@ZRDAHENDLKDAJBTHHANHPBNDTFLI^@DH@FSTJPFPCH@LDPNPTPNLFNJ@HDBBALHJDTFBLBDDAFELARKTBJAFBBPHFAFQBCBEDCPBBMBEFE\\ChBLCLBBB@jAJEDADALJHAFORULUFAB@FNHFNAJSbGRANLVHJFV@JINAPKEE@ED@FDFNDFBV@BFCBGBIHOA@B@FFHADGBCD@HFH\\EPBbPLAJKNCRHJHDL"], "encodeOffsets": [[116385, 36697]] }, "properties": { "cp": [113.883991, 35.302616], "name": "新乡市", "childNum": 1 } }, { "id": "410800", "type": "Feature", "geometry": { "type": "Polygon", "coordinates": ["@@HEHKB[BCDCHCJILCRMRGjaVeHS@MDILMJGJKDKEGECMBEA@IDCDGGEPOLE@ECUDIHCBEDk@AHAXDR@B@FKH@BW@GFSTSLSFS@EAEMKKCMQ@G@]BGHODOJQBQBGPMHEJARAHCBEAE@EBCB@JAHBRHPBFALUHQFYP]L_JMDIJEZ[@C@UDKAACEUAE@ACBEFELEH@BA@AEGMEUEKECAIKEES]EKAM@YCOQPQRULWRQFW@aCgMeCwFiH@L@NCNOHWDeIcMQOUWQOSKICOAK@YJYL_D[AMCSKGKE]@[COQcCOAEIIWKOKQISGa[IAE@KRSNQHWAGMOE}EMCUCWBQH]ZQLWFOBGAGOEESIkUWKI@o`YJcBEACCKcMES_EEK@SBUNINYFIC[COHMAEAMIMEWCyNcZgFQJeL[HG@CV@`@DJHBH@LGB@ngBƒLIHAFCZKF@PADC@RXHD^AHBLBJJFDVCjBJFDJFFXCTLDFN`FHVNZLVFJFPRBbPJDFDLDNHL@XTLFFBF@FCTAJDTEFB\\@DCDD`FTAJCHML@JBDJAH@LHFHHPJHBDBFCF@HJFRBNNLFDDDLHD`EN@REHDBABIBAVGb@DFRDRCJA`NBDHFHHHV@DEH@HDFXBHDRHLDD@LGLAFAJDHN@B@JELAFC@ABBJAlDDNJBDGRJF@DBBJ@NGD@TCPFVD`KNELDHGFAPOVEJALFJ@ZKDCH@LFJ@DDBF@BEJ@DPDD@D@APBLCDBDBFF@DAB@BRAFD@DGBBDDCDBDJFBAHB@@CB@BFDDBBFD@BD@BE@DDABAAEGCDEFFBABBDAB@BCBCBDDCFBBBBFC@ELHPEBCBAFF@BCBFD@BGBAF@HJADBEF@DDBBHALBJ@DC@@BBBZ@LCHBLDHDPDHAD@DEJ@DARQRBDC@CBCFAVBNCZKJABBBDEJIJ@JDLHDFH@JFBFGFKRD@HCHYJ]B@DBDbTNCJODCnAFDHNFDN@LBZ^"], "encodeOffsets": [[116105, 36347]] }, "properties": { "cp": [113.238266, 35.23904], "name": "焦作市", "childNum": 1 } }, { "id": "410900", "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [["@@BQA]CEAE@GCGAAAICGAGIK@AAOE@@ABA@EG@@BEBGSB@@CF@@KGB@ECBAAA@BBC@AEGA@EGBAGD@BID@@DBB@ED@B_CS@SIEoIoYEECCAQCECA_BKCCAKcG_FGPKFGBIEm@GEGCUCAAOC@@AWF@CG@AKHA@AB@AANACYC@@@AIE@DEBEGOI_@WAGBCv_DANR`TVLRLDDfzZ\\XRtZRFfV|J`HˆpLDRBRDXC\\AJER@FFFLHFRHVDHFLHDVHJABD@PJfJ^GlFTBH@NF@PXTI@CDBBFFbVbJRCT@D@RKPCL@HDDFHNvVF@^KL@HDZTZJ`JtHHDn\\ZXz‚LDŠJBACADIGA@ADAAABAAOC@ACC@@AA@BOIABGC@BIB@DKI@AGC@AEA@@AV@KGMB@BEB@CB@@GFC@MAEA@AOEKUFOgESCmCMAAGCO@‡N_@wKOBCCA@GC@@QCBHW@EEGECIAWAYECAEID@@IZA@GHMKE@_EB@ECB@IA@@DA@@IAWGAB^E@@GI@CYEC@HeA@MQ@UFCME@@CQB@FM@yLOUAIW@BKe@AKCBGWOBCKD@EOUFCS@OQ@@KFA@[E@@GC@@SyEQC[KOASAAAC@@AW@kACMECmRA@AAEKGCgHI@CCAICAYB[OWQW[Y_Qi[cMG[WCGCQEUCEMIQSGQM@@QYDAUE@@FOFAUE@EEMBBK^GCIIDGUJaFM@OAC¥aUMSQI@MKGC@ADI@C_YgYKCM@SDK@WEOJcBeCaEUE@SEAAOI@@fA@CA@[Q@GDGFCF@DCDEBACCEC@CCBEDGBI@IOSIOCA‘BSEEKCWCc‰\\YFCDCHGTQVZZFLf`GhEDSDKFADAFLV@RDRFJABCBkEIBGD@HDNFHTLVFFFDVAhCNAZE^GNKF™JID[RIFCFAHBRIJEDABBJPRHRFBRBNDBBBLBDDDLBFFApOT@FJJ@FO\\ILOHKNA^@FDHHHHBVBDBDLL@FN\\VRRH^BPEHEBOBCBBTAN@FDFDDVBNHNJDTNRBRN^@FALGPAJPd@LFJDJHJ@F@JKX@DHN@FGFADBDA@EEBHCGG@BJCBBNFBFH@DF@BNC@@BABaNIBSBMDmTXDDLJDFHFBJ@FHDBH@TFNG^ARHˆ„ZTBJETJhCR@FBFX\\FFFBH@|OH@DBBDBTH`DHFFHDJDfANCHCFGAKBAFCVCPDH@BDBADBFBBFD@@DFA@FD@@FDB@BC@@FB@BBFB@E@BBAL@K@FAE@@C@EPBFATKPCVIPIV]HYDGV]FCJE\\EFCBE@IESCG@ILQJIJCLAJATHPED@LFbRHHFLDXDNDBZ@DBFLD@@FBDB@BDA@BDGF@BB@D@BHBDB@DLD@CGDA@CB@@CACFAECCC@CDB@CB@@CF@DAFAJBFDPRFBZAFBBD@XBLFDHBLABABWBCFGREJA"], ["@@GEGAMJCH@FDDHBJFLDDABCDEBCAACCEI"]], "encodeOffsets": [[[118256, 37017]], [[118278, 36761]]] }, "properties": { "cp": [115.041299, 35.768234], "name": "濮阳市", "childNum": 2 } }, { "id": "411000", "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [["@@REBAAIHABCEYLCBGBEJ@DBJLZBF@HFBABKXA`IDCEIBELBD@DCDIBAX@HC@ACEAE@KF@LFHCBG@KLKBGBAZ@hGFBBNDDVEFBFJFADGTJH@HA@@@KN@HCJQHGACGCAABCLEBC@CCGDIFCL@LADEFA@CP@NFXBFHDPFDTBn@FBBFBVDHPNF@FBNEN@pBVIHEJMJU@KEcAY\\›@IEQEIKICEAICCOEACPƒBQBCJ@FCDGH]LeDIDA\\CDCBCCODWCEEA@KHQAEMAEMFwD…DGJIH@BCKQJKCEBEEABC@CACUA@Q@AT@DG@AD@B@@GPABKCC@GDE@ECCKGACEM@YEK[IEGKCM@QHmHEDCBCRCBE@MEWBGBKJKJA@GEA@CFMDECMA@LCBA@@ECCA@EDECI@ACCBEFCHBJHHIPIVGPCDMHILQJMFCDAFDHHJPNBFETBN@DEHBFBJCFEJADG@CFMA@AE@BKE@@FI@BDHA@JJDEHS@KAABEJ@FAFCFIHG@OEKDCBAFBBAJAFHBCFEVMFSH_B[AQGm@_KSCSIaQEEISCE@BG@@HUABCEADEO@IBCJMAKBIG@DE@@BKBBMC@BACAFOC@@CFBBECA@GHBN]WC@YDB@WCKMIKAiFC^B@@DGB@AE@BACI@BG@AAA@@@I@@CBEA@CBCAC@CDCBAEA@MDKCKHWC@ADA@CF@@CH@@CGA@CM@@ED@@EGAAF[A@DUA@AD@BCC@@CE@AC@AF@@CAAC@@AG@@AG@@DAOCCH@HEAI@EDC`KZCBCBcOa@W@EAKEBAKKB@IA@ACEABGEEA@@EB@@EB@@ILBBGNB@AD@AAJA@EF@@EFBBMA@@EE@@IC@@AG@@AG@DCI@E@CAACDIAEQMIAGBENIPC@EAACEMAMCCA@gD]LqGENEBCABMAEGEGAOJIDG@]OATXXu@ABAJFLHLAHGDE@EFERAPCBC@KEEAQ@CBEFCHCBCCGAOAUGMAEDG@]KwIWAA\\CJCFGDMDE@KEMDMHSHEDQDOJSFAB@BRPN@HDBFCBE@CFI\\BXHN@HAFCHIFCH[fCTJTX`HLJbTPPFNHDRBˆMRINAVIfGJKFUDQAWFKAEEAUKCI@M\\EHGDAHBJLJJFGLGDMB_VUDCDK@CFATABUCG@ABM^GBMCIGBMAMKEO@ITWLMU@SDCBKHGVI@IJKB@LADEDHPAHWVENEBQZCLBJHTCPSLeHMHCHBZBLBDBLJPDJFFDB`GF@PBRHLBZHNBDEHAFELDJHFJLBFDBDAHJ@JJ@JDDBHJJDJFBRAJBBBPRHF@NBFXJJ@RCf@PLBPBBHAJDTCLBD@JALBBDGPDNAHLNDHCHCDAHDFLH@FDDDBNANDPCHOLAHEPE@CGM@CPCLAFFNEDAXDN@FABCACAEGO@CBAEGJEBACGB@XALFF@\\OBCBAJBLIJ@PGD@HNFHFDH@XIJBJFF@NMBACKPMNG^INAJ@RLFDN@VA\\KP@`OBGHIHIBCL@HAFMD@TMD@HAJBRNHBRCHCHEF@FDBLADIDBD\\DBD@DCLFBFFPBDHND@BCDFFFBLAFCTCfBBDHBTRDBCD@DHBHFJDNEHEPCFENEL@HAJ@B@DJZAFDTBJ@JC"], ["@@D]]HDJE@BDB@D@@CHB@BA@DJJA"]], "encodeOffsets": [[[116619, 35152]], [[116557, 34704]]] }, "properties": { "cp": [113.826063, 34.022956], "name": "许昌市", "childNum": 2 } }, { "id": "411100", "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [["@@ACF@CI^G`CJALBNJDL@XCA@ZXDM^GA@HDBAFEA@DD@EPDBABD@ANLA@AF@@CJHLANBDIJAP@CFFBADVB@GH@@ADFJTFFbRTJTD`Ln@RH\\B`ATGNEFUDEGABEBIAABEDALCPFH@JGDEBE@EFIBALBT@FGIC@IGBACJ@@EF@ALF@@BPBBEH@HMDEAIAEFG@CAMFSAEOMGICGBEDCNERINMJELSJUJOEECGGDE@MEKAC]DEFEDG@YDGIDI@kEY@AA@IDCHAB@@MFG@MGKQKAC@ICGBSJU@IBOJ@PDJ@@GBMDEEaBEJBH@ZCX@HB@DCJBHJJJFFCHGH@LNJ@FD@BAHBHTRPDTCJLVBZHNFDIAMDEPS@CBaFMBgBGDCTOBCBG@WAAKEMCAE@C\\oDQDCVCBABCASEW@MCGQS@EFOGO@EBEFGBWcUGAW@GAaOKA[F]IAAE]BGCIADi`@DBDPFBB@HCFEDGBYEQJADFJMFGBS@ADAB@FBBAHF@BD@DEHBHMAOGAAQ@ABCD@BBD@DAFNDNBDD@DEHUGBAOCA@AJADIACB[PcHCDGJKDOAIKEAEASBEACUACCAODC@AA@IAGG@AKCEKECIAACAW@AA@GQEI@SQA@SBKFGFMF@DEBWBaAiBK@ICOSUKYAQSKAEGEQGCyBGG¥@E@ACE[G@UDGAAAEQCBCD@PABI@EDKAUHCAGIOFI@OIMAIIC@E@ID[@GIGEK@QFO@Y@ICCBANGFCDMBM@GCCQECIHELGCG@MDUHWBGBCBA\\BBJFBFAhXj@FBFGDCP@JFGB@T@BAD@@BP@BJF@@FF@BELA@@DAFDD@B@FGHGLBAJ@AEP@JD@@BD@@DB@@DBB@DD@@FA@D\\HLAFD@@DB@@BH@@BDA@BFB@BGB@BE@BDC@B@@DDA@BD@@AA@A@F@@CH@AFA@@DF@@DF@@DBDAFK@E@@BA@AJBBBBA@ABD@AFC@DB@BB@@BAAADXHBEB@@FHB@CD@DFDBBA@FBBn^JDbNHHFLAHEFIDm\\KPKZAXBXFJBHMJv@WWBS^PH@JCPIHBHFBFANDBFAFMrH^KhCB@DDBNFNBDFBD@JOFMHAJBJFHHBFCJBDDBF@J@CDH@@BH@@BD@@JF@@FB@ANEA@FE@@FIBBBC@@BMAAHKA@JA@@FA@@FB@FFAHFBBDB@@JLABLFABL@F@XPbAdADYD_LCD@FBJGFG@DDBP@CH@@BH@@BD@BB@DE@@BBDF@@DD@ADC@@BVB@C\\BBEHB@FC@@FN@@DHB@DG@@DE@@DCB@BXDLGLDNCB@BFDADCD@DBDAB@AF@DJ@@@"], ["@@IBABF@@BH@@EA@"], ["@@B@@AGA@BCB@BJ@@A"]], "encodeOffsets": [[[116544, 34700]], [[116557, 34704]], [[116550, 34700]]] }, "properties": { "cp": [114.026405, 33.575855], "name": "漯河市", "childNum": 3 } }, { "id": "411200", "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [["@@YKCA@G@UEG_OACBGXQ`OrQ@C[KBEFE@A]AMCECAA@EJKHEHAR@FADADE@GAACC[McKM@OBQOKMMEQCQGMIKQACDKCSBCDAJ@FAJG\\ATATQTKPKBGCK@CRARB^LN@FC@CKICE@EBEDEPEFIJGZOJGDGACKAAA@CBGDERGFCDBDM@EC@EDQB@EBABGB@JBF@DADEGBCAEGMADE@IGQCCCAOBKA@GNMLGDG@CEI[GEECEBEHSBEAECEUBCCBCFE@CAEAEKGCECKN[ACOAAIEE[GIKKGAQKOACDMEEIAGDmdIBMECB]bGNEFGDODcA[DAA@ABK@GACCCEAOBGCIESOMQGEECUBG@CACCCQIA[HSEOGQEQGCCKQGEKA]@C@@ELMBGHUXW@CACC@QBGDMLSFcLqNUL_FCCAGACGAIBGLADO@ECCGSMOOC@MAGBGFEB_AMCSQEEIOKIkQKKƒ_gMGCSQQAKBMNEBWMIAgA[BGBCBCFEVIBKGe_@C@EFY@EACI@oLcLI@CCIWCQBIAC[UQCAKDSAACCcG]@QMCE@MII@MEO@CDEBAfCJGDCFUDIJKRMN[EWIICKBYCQBELKAIAGIWCAGAQBIAEC@EVMNMzUFADEBKHODCHAXBFAJQTODMDCNGJCF@TBBE@IBABAVNF@F@JCFEFMCOBEDEHEFAf@LEDCDC^@R]ACAAKCKIEMAKCIGGCM@eBENMFKDMBUCOHQCEIGMO_MGEGKQOEEEKCQAGAAWAIBCBALABC@E@MEOCE@SHM@EAOKCEEM@GPWBGAEMIACGBMCEEIDBFCFC@ACAMJGPEDCBCAQ@A\\KDENWhaBEAYB[EBIBUCCBKHC@K@IGIQMICCK[MUAWD[AEBQAGAEEIKGESCOACWEiFECGGM@A@@KBGLOLEHEBEBO@CEGIKSKAEBWU]GKI[CCSEKIMEACCACBSFKAGEGIGEEAYAWEQBWRCLIZOJEHYRKNIJEBGBSCGHOP}PG@MLOBOAKBip]JIHGLALEFIFEL@FLRALHHBFADIFIPGNAH@\\ADQHGRENAFQBCBGJBLCDCLOBQCIBMFICMB_TCRADIHKVABGBSBKBMBMNMDGLI@GAQKIAQFE@IEEFGBQDAFBP@NYFAHCHOJCFFXDDRFTHV@LBBDAFGLFJDBJBNLVJ^BHBDDLR@BGJAJ@H@DeFGDBRAZW\\AF@FEHGBEFBFFB@BIJCHIDGACEDE@EGC_@G@GACDDHBT@BKDCBPDCFFB@FIBJF@FCB@DDBDHBABABB@PCbEPBJFFFBPFRJJVHBJJBD@BEFADTNJLDJBJCDGLCBQFGJ[AG@OFQA@HFNAB]DMAIFK@ADEHBDALCJCDIBGDO@UFQGE@CBMLMJIHcFGF[FQBKDCD@BJP@BADMNANCDKFDXJFPARDJFDFJNJDBBDHFJBD@FDFRGF@X@DBBFAHFNAVEJSJEFAPAFEPGHANEJ@HDRBFABEBK@GEIGEAWFYJkXAD@DBHMHBDEDDBCD@FDHEFAFGD@FCF@JMJELEDAFCFBD@BC@BBCBABCB@BGBAD@JCFCP@DELBH@JFLFHHDBHDFH@TL\\JFB@DANIEWAUBKDGD@FHLHXJZzURCRBJFPN`dLDNBPA^MZOj[VKPCNDVHŠ`bH˜B‚EjAFBpzPLJLBJFDJDN@fIdYPMNIZBZNTFpBZL`h\\pJZ@`CTBFFHJBV@VINKX[DCJ@JD–tdR^L`J¬JHFDDJfNXNTLLNLJDH@HCTQJCXBRALAHEJKDCFAJ@RDFDTjFHLFF@NE\\QPEJDXNTHNBLFTPJBJADAFIJENCN@HATCHCDBHARFLLLHF@HARFFDBDFHBBXCDAZQH@LAJ@NFV@JBJLBHNBPNJFLBPDN@LAJC@EDCLEHBHHNHDD@DHFDHBLD\\DHXNN@FBDDHX@N@FFBFAJRLJNPPDNAH@\\PHF@FCHCH@NCHEHON@FDDFBdBPTD@P@NJHBFAnBBF@HLJPBXCLFHH@LFDF@VENBNJFNDRCZ@DFFLF˜LFDhMFBTPJBDARKJCLJFHDFJBfAPCNENO"], ["@@AICBBHD@"]], "encodeOffsets": [[[114661, 35912]], [[114721, 35618]]] }, "properties": { "cp": [111.194099, 34.777338], "name": "三门峡市", "childNum": 2 } }, { "id": "411300", "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [["@@ACABANDBFECG"], ["@@CACCG@ACGAIBBDNJDFFBBFFDHCBCCE@ACE"], ["@@CAI@CBCHPDB@@CFEAA"], ["@@CAGKI@CDCNCBE@OIKHGBQEOJEC@CJI@AGEC@CBCFK@EKII@IEKACEGICMI@_AEECIAKDGHGDGBIAAA@CBGVEDE@EYBGCGLEAGDBKHMKCCCC@G@IDEACIIGGCBEBCHAFMDSECICEAEHATFZG@GCC@EFOBIECGOI]K[QMIICGDCAIKKC{gKCE@INKDWBCFCNMLWHUGUBMF]d[FCHBH`T@FCFMHKF]DKFEL@PCFIBSNKL[LmbEFGPCNCBKBIHGDE@KCaQ[@IEQO@GBKG[@MKGKDIAiCGJEXGNS@UCKEE@gVELKNEFWBIFEBEACEMEGAWAKKKUF_@KGKUEMDS\\KFM@‰FQC[YSCCJB\\CHKBSCs]]GaIgWGGIBGMBEIGICQBKBMJMFBLCRIASGKQY@OHMBIDAB@FADEBGBiAMD]XSDQJW@sFCBCFMFCDGCQLGBECACFGAGIOOMQLC@QEI@QECEE@EBOLIAEKEGUC[UAC@EDIHG@AA@KBQJ_LEDCHCF]LODCKACQDUDOCCACOKMYCOOAECKBQAAGBKNGC]NCHKFEHMHIDCBKBADKHK@CDENABODCDKDGFCJ@FCBC@QDUJWCCAE@QGOA@FD@BFF@BDADCBBDG@CB@BBB@JDD@BCCC@AB@DIDCCCAADEAEDG@GE@AC@@ADABEDAFAHD@CFBFCCIDCCAAAE@DJA@A@CEDEKE@ERDBDJEGKGCSJGHCFGBCDEJCLC@ACECSFKFGLKJKFQBGF@BBFJJ@FCDE@MBCDIDABAFFRBPGLCNICGAMFIEIAIMOGOMGCIBCAADCHEFUCCDBBC@@BHFBF_HCBAL@DGFAJCNILAHEFCJEBADCBQBSCaOaEQAQFQLUhOHWCa@mTe\\QLQDSJSPOZe\\OFQ@ULoPMCIGGKQEGLALDTCNMB_O]cMIgWIB[NojKNIfDNQTIVCDKHQHSPMFCDAJQL@DHDBJADIACBAHEBOAYBIDUP@BBDF@JCDELIBBD@ADEFAD@FH@BAHGFCJEFABBFJLN@FALBJJFDFAFILGJCDC@AC@GDEAACCGAGBIAACBE@AGGKAQDGCCBEFMFER@FMNDH@FGHGNCBETIPETINKDOHOFwHUJIJ[LE@KFEDAFDXCNBRIRKHGAECEEIMSOK@EH@RHRARM`BNDNPXRHLHLRI`SfWTMHCNFLAJEFIFQB“FK@aKOCIF@NFHNJXNZDVJBNEPKNOP@LFLAFULE@EFG@MFUNSP@PEH@BFF@FQIAFGDKBIFQZGFKDO@OCUKMMSSIAEHjnCTIPcPABCJIJMDGJCLCDKDQHW`LAHGDHKNORBDNFBBAH@BHDFJ@FAPDFL@HDANE@IFCLFJFBXBVJHL@FGJEJ@LHVATEJKJIRAJ@RIRCFObFHlVLfAXDXCZM`EHYPAFDLAH@FLTBDPMHCFATBPDR@NDHFHJHFLBTEDADBBDNFLJTFDDJ\\HLV^AXBFTLJLFH@DAPAFGFKFKPAH@LB@N@HHFDjERDHFDPFTLHFJBFBHARBFC\\BXNVL\\DDNJJRDDFDL@D@LGDAVDJAFANUFGFCJ@NBTGRCPQFCFAJ@FBNFHBH@PE\\BdHVBREZMXOVKZG`EPE^WV@XLRRPDPETKvBZGVE\\D^@ZGZKjqPSXQrTTDTAXKxUTIvQJAVGHKHYB[AM@ODIFCVE\\BNDR@XE^OVSFGHEJAR@bF~PdFtFHJJBABAHEDAAEGAAC@AHC@AAALFVTRNDNCZWPKNFPATGH@JH@LILEVOHGNAPDJVHPBZH`NVRV^FVJVRNTDTMBWLIbNZRRDxFHGJGF@fBRKNGTEHGDUDCNGRSFAH@VDL@FEFIDAL@RJBB`A`RJDN@LMHCRQJCVYJGFALATCZFHALWHIPKJMPIBA@GCKFAHIFARDNJDIBAL@FDNLRLZ^HDD@TCLGBA@MBEDEHCbCXPVFHABIFCHC`IJGP@XCD@DFJAN@JE^KFIHETBDABA@EBCJGD@D@FBXPTF^PDADEHCVDX@FBPNBHAH@FDRVFDDBFVGR@FBBDBJLA\\OJAJ@hDBGHKBEDGJCRKL@HBLKLCDABIFEJCBB@DFBpQHKAOH@LBBA@OBABCJAHG@IGSBGHIBW@IHE@CEGIGGICQ@SDQDIDCJ@PHbJT@\\ERBdMB@BSBABCPCLB\\PX@RDRCPGHIBIRSFIJCDIDEZMAOBMBCFAD@HFHQPDLCHKBAP@BAJOL@NDNALCJKDCF@pVH@rS\\ANCJCRAFADCHI@OGGCC@CBCHE@C@CCAMCQCECAEBGNWJSFO@QFW@KGGGCGEMg@SIUECG@GBDCHGXS@CBEGMAEFQKMBGHIJC@GAICKCIKEKCSQECECWCWEOMUGIBSFuBQFK@C@MKCAW@cWYLQ@ICGECMEGIEUCEACCACAMYUMU]MIKCEI]M[IaKSBCDAFCL@DMHCrEHDDPBBRIFIFGZEPGXAJBLCHCGQAG@KEO@AJGMOIC@CDCQIS]EAEAEECKAEDEBANCHGBGLEBAAEOWBCLGBCCKBGCEMOBEnqDI@MAAMIAA@IAI@ID@LFJAFC@ODEHGLAX@LEHMAIECAA@CJAJBPANENUDKACIKG@IRCHGBIDKJCJMHMDCASIGIAMGMGGMCEECKBCFGDIRADAAiGGCKHKBG@OACAA@CLIAGBAFAbBNBTJFDL^DDPAFBF@LCTFJG`IDAJODBLRD@F@LUXIHIJHJDLAPELNNV\\bJLHFFBFALGLADADCFIHARSJEJCPDD@BUBATHF@NC\\QR@PDHD@PX^F@PGNAPHPLNHJVDVLHPPFJBTD@HAFBBDADILXJ\\BBFE^BNKFCF@B@FJVDDD@FKDAHCPBNENLDAJMRGHGJBNCLFHBL@NI^MNSJIfO\\QHALHHALCDEDGDAJA@CKUBGDCVIBILKFKJEQEGEAGUIOiIIOCIKAE@CDGDELCBCKECEACAIIYBOFSBI@SCSECMGEBEHIGCUCAA@@JCFCBCCAYIWKOQKPI"]], "encodeOffsets": [[[113686, 34275]], [[113699, 33975]], [[115440, 33134]], [[116448, 33196]]] }, "properties": { "cp": [112.540918, 32.999082], "name": "南阳市", "childNum": 4 } }, { "id": "411400", "type": "Feature", "geometry": { "type": "Polygon", "coordinates": ["@@BGACBC@IASGOAQPW@CJE@UIEQQWABWECEMCCG@ACBEAEIKFIVSH]XKPKNELKJKBI@EOK@EHIXIVEH@`DNAPC^OJKFQRQZKLATKfK`MFEDGJ_EKOYBEBGPEBDHHbH@CLB@EB@@HJBBED@BD@@@CB@@CD@@DBGD@BCB@@D@CBB@BB@BA@@@BB@@ALF@CHDBCB@CPDFBADBA@DB@D@AB@@BBB@BPFH@DCGKNMBITDHFHHJFJJLJ\\LZ@lINEPA^EDAHELEBAFC@G@IEAAESUQEEIECQ@CCDGAGFGACECAGBK@EHIGEHGAIHEBGFCL@BOJI@GOIYGMKEG@EMaAU@IFQFCFC`CLEJIJOBKAGFI@BD@@AF@BCBA@AFB@CE@ACJK@GJGBIRKJYFG@GAGE@@ADACBBAAADAAAFAAAHAAI@AbWAEB@@CPAACD@@AF@AGPBDADEFAHUCEIIIKDQFEBMCGGGCI@MJ[@ICCKCO@_N]RUHIB]AE@CCGGAQCID@@ADAAE@CWBAKICAB@ACBAD@LGBACC@ACG@AKEGQFMAGOKBUHEGOIQBACG@COCCEAAC_ABE@IGWAWHWAECCCEKDGCEFIJKDEKCBGOKKBAAEU@AEEAMBECIBGEQBEDSCQECOKBKHCAAGKQGC_GOEQQCIMIcAGDM@mGGAGBGAICMGGGOKEAYAKBKNGPCH@FCHBHGFELEHqNIJCJENFF@DAFa@MCEBEF@FFH@DQF@B@FUJBHF@DFBF@BEBAJYB@BBJDDH@@GRCDD@LBLDPABOHABDHBPEBE@GBAFKNG@GC@NKFIBUB@VABCFUDOAI@IRBLHXDFH\\FHHZBJCJGJafURSJQAmDMFOCMBGDCFCRCJOHI@KG@OBcKBKAQBGAEBCDELBbADYPGHIFOPGLcFEHMFGHEBCCMGKASBUJMHEAOISGAEQGAB@FIDE@EAQBIAOMICEBKHIAEDELARAFGJOFM@KGKAQFO@K@MCKBMDyAC@@AHSFwAKCGKKKSECEAa@EACAICODM@GAUMUCAAEaAEAAc@KBUFiHOFQLUH[TKFMAQGCCGK[CEACCCKkBEBAHBFLV@FABK@aA[EIE@EB]@QCEKIKEMAG@kXIFGHECAEBEHCFIBG@CCCKIMMIEI@GIYCMBO@EDGNCB_HI@ICGIGM@ABM@GACA@eEcFQFK@EDCD@NDFHDBBDRLHBD@FGJBFFJHJ\\Z@DCFORADDHDBNBtCZFFFHPPRHJ@F@FCDWPIJEj@NJHFFAFCJ@HGH@B@DJJBFD`LNBJC\\UVCHAFBJJNDPEBG@OEC@WRIFKD[D]@MDEDCFENCNAFOBiLI@SEK@GBCDINAFCBCBKEIAGB_RQTCBC@O@Y@IDQBCDUTIJKDGBCBCZITKHCRBPFR`lBHCPINWXIR@FBNJXBRHHNJVFJFJBPHNLNRDDDLEVAJBFFTDfAJM`AL@LENCVOb@HHNBHG\\JP@FAFKJEF@FFLNHNDbBTHDF@FAHIJ]JSLGBaAKC[OG@GDCD@TALAFGDWFBFRLHJJJBHAFUFOBID@NMDCFDLFDHB`BRANDBNFBH@FCZSbMbS\\CHBFDFDLHPDFFHB\\@PFFADCFAJ@tXXDn@`@XEP@PBLJHLLLLFRDL@NIPMFALDJJR\\JF^HxGbHTJ^X@HALOVFDJJFDPBVEH@bPP@FAZOjMNMHCVCHGHANFP@^KDCAGDCFCDEEC@EFCVADEDMHIBKBOFSDE@EHQCMIMI[FIJIFIDK@KEU@SBGJSRQFU@ODALBHANGJOBODENQ^]LONGTG`E@CBAN@NHL@RCH@NBLBPAT@NFH@^GDAD@AB@BJGLENCFEREX@HCDBBFHDNP@L@hBJJBPANOLCV@L@RAZA^IRAVEFC@AFExSLTšJŠBŒTjBPHBbLX`Djk\\QdDxZfCbaNaTYLCFEHCTBdTZJRL"], "encodeOffsets": [[118985, 35405]] }, "properties": { "cp": [115.650497, 34.437054], "name": "商丘市", "childNum": 1 } }, { "id": "411500", "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [["@@@BB@@ADDEC"], ["@@KLIFEA@CFOBIQGIJAH@DJPjTAc"], ["@@@IDGB@HB@DED@DJ@FB@H@DCDBdHBBD@DADIFCNADKFKLAJ@FBLJTZNBFAHCHGBGAGQEAEBOR@J@BLBBFFJAHADE@CFK@EFAD@PCJKDSHQLRLLPJX@VBFDBDADE@IB@DBDVJHFGFANHFDDT@TAJETAPJZBJBDDFLFADKDCFCH@DBFJLPDJJPjVJBHHFRFFAFBBTANDFJDTCPDNIRDJHHBHC\\_FAHAjFJCHWLUJIPE@OEYPYDE@QLGBYPQFCH@PBJATBNDDFFAHARTfDJFLAJ@HD@VDLDDDBD@BEHE@SJKBG@GCIL]BALEHI@GEAI@A@@EDmDEFATBD@NGJ@H@TJ^TB@PC\\CJD@BATFN@NBD\\JVBDADADGBgFCHBHDD@@KAGQIAA@CBEFELAH@HBHDFNRBPHF@BCHMCCDCBKEE@GDCFB@AACBEDCJEBEFEAKN@HDJD@D@FRDD@AGGIGMBQDCB@DODQCE@EJKFARHL@DBDFFBPGPCL@LEDCDMDQ@UBMAIBCJAFEDAB@NEDCDOCGFKDCFAjBJAVOJIFADDHLFFJBHCPOD@D@FBVRNHF@VQHCFF@XBDFBH@XA^ETWLAHB\\THTDBXFNAMPBFFBXBDBDJNDLR@N@FBDDBZF@FEP@FBDDDXDLDJFDT[ZSNiXSHcFEFGLDJFHPFDJBJAHEDQJEFBNHV@DAFGF@VBFZLlANGF@dRXPLDPBNADAFEHMFC\\ATDDBDFBJERBFDDRJNDFABEF[FQBANA^NJ@DCDKZONARBJJBJCHMDADAFGLDNFHFFNHJ@RNBF@F@HCNKPABMAEBCTAP@JDHDDFBVGNBDD@JDFFDF@rATCFHFBNANILCTBBDHRJLBHCP@FLHF@H@LGHAL@lRJF~@vMJCZCjQTSFAD@VH^HHAHEBCAQBEZWJCPDXIHC@IEU@CFEL@TVXPLJDBHBZELIDKB@R@B@DGDAH@FFP@DCAEKGBCDAHBDJNHDHFBJAJFJCDCBCCCK@@CRKFCZLFDBDEFBBRABC@IFEHDBBBJD@FCBEEIIC@EHARCBAICIBIK@APOJCF@XFBDGL@BB@B@NE¶TFAAGB@D@DLNDHHH@FE@GBE@OCGCMDAFBFHFALCNDDE@EBADBDDD@DCBEAGACGA@CBCJCJEbOJ@FDHABCAIBCDAJBDA@AEGBCBAHB@CAEBCPIJSPeFKBKBCNCDAAKBALCJ@F@HELWDA\\AJAFACKIEGAKDCA@EBAFAPGDBj`LFZHD@DADKTOHKDAhZPXDBDA@CC]@EFCJ@FDJNF^LRDJANM\\DBjBFDDDADQP@HBJRLFARKLEbMLED@\\HJHJR@XBBDBDARQJMBGBKAGKQDAD@HF`b^TJND@VEJB@BCX@PBHBFJHLFTFDDpzHRFBJBbCJELKFAOCIFG@CAUUmYCA@C@QEKgSKMEIBCBANFZBPABMNEDKCK@UG@GCQOCCDCZ@JCBA@WA@AADGA@CBAABCAC@EJCJKAKBIFK@CHQFI@OAU@UBEAOBMLID[CKDQ@CMIAEBARCBADM@QHGLOAGCEGSC_@UNcHM@WDGLGFGP]GW@CDI@CGcGQ@MAEECCCLiVMBEGQCEYKAABAEKF@ACAADCAAFEAABC@AC@BCC@@AE@BCC@@CACHE@ABCB@@DFAACBACCBA@AHCCABCCBAIFCAED@BAD@@CA@BAEGGDEACGACDG@CCKIII]EEAQBGPMAIBEDEDIEUM]MWKE@ABMEIAEBCA_AMAC@IBAFCNAFGNKBO@GCGAMAICAKBICCEGEEIEEQCQDUEEFCLAHC@KGCIGGC@EHC@IKGCMOIDEFADBB@FICODOPE@OFQHIIO@MAKBAACKK@ACBGEABCJA@CAAK@UFEBKHGAGCE@EBIFCJC@MDE@EC]__EOEIMYSUIOCMMQGAIEGMCSAOMAGEGI@SFMBQIEEIOeQAACKEIIC@SCCMG@ABEHGR[@IEMEEEASCQKGE]IIGCQIGIS@EHIEIAKKYIOSMUIGIGEWGKO@GFIAGFQBGZg@CECCG@SAM@KQSCIMAMEMC_HA@GIIO[OMAKDMVQHGBGAICOOCAEASJ@DRXBH@FORQDOFEBQCGBGTGHCLBRHNDBBJ@HAVIP@FLRBF@FAPBDJNHTFJALBHJNABCBMCUAEBADCJADA@KAQBADBHADIBONCL@\\CDCBQF_A[CSEAEHUAMYKOIEGAG@GBCFAHAIM@E@CDELIBCOOICQC@CBCJACGACCBEACBAAG@ABE@AB[@CFACOFEACD@DA@MAGBOJ@LABK@AAEMQ]AAOEAEROBCACOEAMCICCGBGJGBEDEJAPADCBGBG@GAIIKEIGMGCEAIACEBSREBI@EEEA_ESIC@OBAPKBeECCOWCCECM@EPEHURODKASBMHAFDH@DQNAD@XJJ@DO@QDIHQEOHUIOECBABAJEDUEGAGBAF@HJRAJCBSES@G@GFU\\EDALEHEDK@@HCH]FICKDIMEAGAO@C@CQIMWACA@GAAYNADKlAVEVAH@JAVFDDL@DGRJJFL\\JH€DBPANT@BADABOBCF@DFDEP@JDFFHEN@HDNHJBBCNCDKBIEA@CJKESHG@CEDMAIMADKCCKEIACBETGNERABO@EAAEIUBELI@ECCcIC@QJMBGCGIGCEBIHC@A@AQEAIBGBMJC@EGG@EDCLAFYJG@GGEAEAIBWF_LIHEB]A[BMGSFMEG@CDCJEHSRGJCNMHET[\\@FADMPGJALBJ@HC@AAKOCAI@GFQNOFOLYFSAECGI@IMCM@OHG@G@KKAC@M@EIMASACAAC@IBIEWUAIIGAEaFMACCAKACECG@MBG@EAEEC@ODYAKGaWCEEAE@MFGHEL@RGL@HADCDOFEDCFAHDTANINAF@FJPJLBF@REHk\\@D@BDH@B@DGDGAMAKCOQUgCCC@MAOGCAEAMJIGE@GDONIDGJ@FBTEFEDAJH\\CJDR@HCLADCBMBOFGHGBEFDdJRHHBF@DABG@QJIDS@WNMCGFGHEBCF@HDNBFNPFLDBH@FBJPJHDFBDCHCHKJ_JCDa^ENMDSJ@bKrBBJAREFQF@PHTVJNBHCpZfNLCVEF@LADABCAOGCBKLMLAHE^EHGFABCZBDTFDBARAFRH"]], "encodeOffsets": [[[118283, 33248]], [[116499, 33059]], [[116489, 33052]]] }, "properties": { "cp": [114.075031, 32.123274], "name": "信阳市", "childNum": 3 } }, { "id": "411600", "type": "Feature", "geometry": { "type": "Polygon", "coordinates": ["@@NAJCZ@P@D@DARS`QHAJBLFDADABEJMDCHAL@TFJ@jKPABEDMFMDEFCNC^@\\CLCJEXQD@PFH@FACOIMAIBEDGVUD[AIKMC_AEII@C@AHG@GDIBEEEIG@MFiJIXODC@E@EGIOQGOEEYEsDMACACGBCPQDE@C[YGIEIAEHI@EACKGCQAAGCCE@MFEPAREdEfFB@BD@HAN@BHNHJJDJ@`GDAHMFCP@NAZDHJJ@JFNNLJDD@DAHEJGDAFBFFDHGJElWH@NBLFLJDF@RA^@FJF\\FbBL@BA@EKUAEBGFAlADLDDFB\\DHLDDRHNBLE\\SVGRKPEjGVELAd@BBBFFbBBVDVNHBN@PCJDDBFBb@FBFDLTLLDHBLExGV~BNCLANDL@P@RELBLHN@PEHIBEBQFKFC@MKMDSOG]@KECBADGBMEKIAEFEFKAE[CI[EAAABINECECMQEC]DOAAKAEEBYIECECO@CBAA@BAAAAB@AJEHCAEACO@CACCAEJE@EACEEKDC@CWBEVBB@BIJ@PJPBJEFGHC\\CLJN@DHBBDCB@DEH@HG@CCAFYDEBMAASIA[OCCCBCNICCAGBSEQCMEI_LODOJC@ICAECCMAEQNM@GFMJGLELQLKDKHMBEKS@KHKDABEHEOAAI@GBEFKAWR]PUPO^‘mEaG‰CAQAEGEC@KHQ@MEM@KGIACAIGEBIJCJABMCQGUCCBCBIPC@G@IIC@M@oIKKEYCCGAACBIACIEHMEOKMCB@FABGDAE@B@@@FSLM@@HKHAC@@GIUOGICCBEB@@ABA@KFAAEA@AGEB@CA@@CJC@OCM@[AAUCKNIFCGDCAEIAEB@CFC@C@GEO@KBI@CNQJKBGACCEMMMU@EBCDCtBFCJmAOHCTBDABAKs@EDEBG@ACCK@IDKBICACCBC[FCHUBQACKIIK@GDSACCCGIMECE@E@AVE@A@EECOACCYCEEC@AGCOD@@CDA@CEM@GDIHMCQDA@CFACOAACAEFE@AOAEE@GF[FEICAI@SHG@A@GMCCEAY@GCOMEGAFGDGBGDCA_MMKEIAG@MAGAA[EaAc@OAaBQD_BMEGACBCPABE@OICAeHYP[DIDAB@FB`IBGFCHCBM@ED@B@FAJEBBBCBDA@HEDGCAD@BsH@EDACGCCC@CIaEEEIG@E@ADADI@EEUKQAG@YSCYAUCK@@QEWCCI@KBQJKBS@WEG@CBCNEHG@]AIDCD@b@BGDCJCRGD]ACNOBCNUJAF@LEDBLAFEDQB@F@LAHOBCBEJEDOBbvBXBBLLXNDPHLBRJLDV@LEVDJ@FAHMLAHBDSBM@SEMCGBCDADBLDF@FIBIAA@CECAE@ABADDDDJABKDCDADAPAFKNCBGBIAOEOAODCBOTEHEDYFEFARCBOBCD@DFJBF@DKLBVCFMRAJQHE@CEC@K@GDWME@…C@JDZAFQLEBGAMKEACBCD@H@TEDMHCHCBMBkGUAEAEEQCU@EAIKGCCBCLCDEAMEE@ED@JAF_PKJePIBGG]KAXEHAF@FHPEP@FRTDH@NFXBTADABUDCDCR[p@DBFNDLFBB@XAHADSPCDAHAhENAb@DOTCFBNCJMEYGUAIKSDOCSQAGBG@AECI@KMG@GHEDIEIIAKDECEC@W@YDG@IAAFFbCFAN@HI@OCI@AP@JIVATDH@LDDPJDFDJ@JEH@NA@GBCDBLZ@lFJ@JCCH@ZCHEFCFD\\@DL@JFJ@HC@CDGFEDABDJ@FDFCB@DD@FB@DA@KNBFDNCDEB@HFB@LILIHAXANFF@DADQDAFCnGRGHALDLJ\\JFL@ZFNBDLHDD@FCF@HDFAJOB@HA@C@@BCHS@@B@RVBBD@DADFBAFDFILLRADG@IJCHC†ExFNNBBFGR@LFBDFCXDPADCD[DCBCJKfG^CHEDI@ADARO„BDPFDDBJDFLJFJFR@P[–BZFd@LIVINGFUJ\\`H^HHFBJBJ@VQv@HAXWHGXG^E^ALBLFR@HHHVBDFB\\BNFLJJTPNAHKFMFWDGDCBAHHHDJDXFNDBpMjCDAFEJQFGFC\\@D@FHHALM@ODENQXEZQVA`FNAFAXOLK\\CRFPOJGd@F@LGFCv@RCJEHEHQDCFAB@VJXHJFBDHZDDHFRH\\FzFDBFBLTFHDBLAJAnSxKDBDHF^"], "encodeOffsets": [[117660, 35108]] }, "properties": { "cp": [114.649653, 33.620357], "name": "周口市", "childNum": 1 } }, { "id": "411700", "type": "Feature", "geometry": { "type": "Polygon", "coordinates": ["@@^LHHJAfOLI`OBE@IFCF@NFFBDCDKDAHDJLFBV@RDFFFBVBlHNADADGNGFC@S@GDCDAFBNLHBFARKBECY@I†DF@XNHCL@D@DFF@RGBINQDEAULK@CAEEI@CDCPADABQFEZEFCFGPSDAPCPBPFJBHADALMBEBOBCDCLCBACICCBCBAF@DBDFB@JBJA@ECEAKBCDCHANDTFN@TAACBGNKBG@ECIFU@KCUIKAQGKCOWMKKAAAWauPAFCFIDAPABG@K@ERAFCBEAKFC@KBEVIDMPADM^BHCDQDIHC@A@aDCJC^BH@FGDMDAH@XFT@LARIFAJ@F@DDFX@RL@VDZBNBFB@LRBFEJCFGBIBABGEIACACPW@QBGDABAFABCHAFGGAEACGC@AEA@QAoHAERUDI@AaOCC@MFIHIHAJCd@LUDCNCJGL]DEDAL@RLD@bBf@XApSLQ@ECCUGAEDCFAbANA\\CdBVOFAFAHBJFLDrCFEBCCK@EHELAFEBEAOBCHENETEH@VDHADADCFOBGCAU@AA@KNK@CGKCK@IJKDCTIDEHKAEI@QBOHIAECAKBEBCHEDABI@ECEKgEEAOBKHEBEAOEKAIHMAE@EGI@AJABCBCCWFAFDH@FDBDAFKJCDBDF@TKHG@WCK@CLBDB@HD@LAEKCAKC@ABOJ@@CKEGDCDBHADKACE@UDAFFDABA@MCEAETK@A@AICAEEDE@GEA@AA@AQDO@OKWOSUK@EF@DFV@JGDWJOCIDYXAFBRADGFGB]GUGC@EBSTiRYDIDuNy@yWK@GBKHEBGAKG@EDKAKIKGQACEAM@KDIHKBI@GGSDqBE@ECCE@IACEAI@OHG@GECGBYBMBEBAD@HBF@BALODM@G@EAEQMI@MGEEEGCMHKBEBCNCDGAIIIQAMBYPCLCDI@]MMBABERE\\AFEBMCQICCAEFQAICECASC[BEDGNEFCBMBOAKCWOcQE@MHkBYMAYHEBE@CGUAMFERIFCBGAICIOEEGCIHKFEdETGjWTMZUBEAE@ICESEWCCCAC@EFO@EYECAAC@E@MKQMCCICAWAEAAENOMBWECAGSQMMGKBC@SX]FWBG@EAAC@WEEGDURE@MGUQEAC@C@OPGDIAEEGKCCEBIJUPIBiAEBCDELDHCPCDMFA@CBEFIBADBJAN@VCRCNCDKFK@ODOHEACECAK@QGEBIL@FDFCRCPA@CDARHNHJBHC@QC@E@CICGCM@BLEFAFIFCDAFBD@BEACD@HFFALCDDDGNADE@OGQAEMGCGAG@KBEFAF@DBBRJBH@LC@GCGAEDAhCHCBCBUA[IAC@MEMBS@AIC[DODA@]SSIG@I@MHC@SAEBCFCn@FB@J@FB@HGJKFABK^DJ@HAHIL@TGFAFC@CACCCK@UGCI@KBIEeCQSGBEBCEMCSAIBOAG@EDORAZKH@RCFOZFZ@POFIJKVEVCDGBiEGBEB[`GDGAIGQCMJOCSDICCE@_ACIBIFELKLAJUJCDAHLVBBCDG@CBCHCFSFKGGB[RePIJMT]NMJK@GAKEMDIAGHQHINCBMKMFOAGDCBELC@CCIU@E@ADELEAMF]AE[AWIJKBCACEAGBC@ASEIOOKGCUIUMGOKOGMBOHE@W]@OGCOCMAGDWPMDE@SGABAVC@OCIDIFQTGBEJCDCBKBKHEBEAGEIK[aMUKMOFKBICIGGJWJKVE@C@KQCAIPCB_JIHSEKDE@EAOBCCK]ECSIMAaAEBABBHKJ@DBBBD@PAHGLDLHHBjCBQBCJEHADDLFFNDHHHNBNHJTJDBNCNGDILIJCHADGJQH@JLBDCLMVMFOBIAIB@DBBFDBJGNKFW@KBGHCF@PEDIBKEC@@JBJ@JBBNJBB@NCJmrAFNPDFAHDLADKHADPXBFABKFAHGHMDABCFBFDLFFFBFBT^RJCD@DJDNPIH@BFP@LBHHRGDKDIAWBOHYFEHEJQJAACOGCqFGDCNK@IFADLTJbN\\J^NR^NNVZVBNFH\\FDBJHHTPHR@ZKdXX@DBNLD@L@REvATEJAVHPNXFXDLHTRLDLFDJFV@HHTBLDFDF`NJB\\ARFRBFAPEFALBZCRDPAB@HFNHH@RQTARSNGDBNTBF@NDD\\IZ@NBHDDHFC\\[BAHBLFRTJTRX@FGDS@MACDK\\MTCPIjLnL|HRHVXTDF@bDL@FEH@DJHDJPNdHJFHPBFFJNpDD\\CH@F\\BDNBžAHHzAHDFRFHLBRTZBVLPTJDL@jAbBXAFA@CNEHELETAB@TRJ@PFB@@HBBX@DBBBDJLFDFBLH@BH@JBBD@PCDBBDDVFBTAFBFBJLHBH@HADAHIDCdG\\ODAJBBCBIB@PDABVHFG@CCCMAMCBE@CAC@ADCBAR@BBPHNBAGFG@CACE@BGAA@EBABCT@HANEEIBCRIZFHAFCDE@GAAOEAC@Cj_BCDJAHF^BB^J\\ELBbPHBX@HBdV"], "encodeOffsets": [[117028, 34276]] }, "properties": { "cp": [114.024736, 32.980169], "name": "驻马店市", "childNum": 1 } }, { "id": "419001", "type": "Feature", "geometry": { "type": "Polygon", "coordinates": ["@@DFJFJLJDD@BAAQDOD@HXDBF@HABCF[JADCRGDET@BE@GXQFAR@BEIIAON]F@FTJTLFHBL@RIFAJADBH@AC@INKDGBIESC_DC@CA[FECSBIDS@EAEEESK@WGKCMCKCEOIAaOQIEUEYKUMEGM_CEKGGCWDEECIIEiAUDECIIKAGAWBI@U[IQECGCEKEAOAUMC@EBQPCBKEIFA@GKCQCAAE@AJBRCB@JRHBL@DAHQJCBCEG@CBCBCA@MJC@CADEPIAKFACC]AIFQFQEC@EDEJGDeR[JiFU@UEi@CBGJ_LSBKH[JKD[AUDQFOJWTC@MCKIQWICKBIF_Z]RgHIHSfQVGJUN{NWJKFIBECMDMBMCgAC@OFC@GEC@KFADABHP@HNBHEHBRXBHAPBP@FMVAHBJVŽ@DI@CFBDJJ@LELUdUZAH@HDFLHVDRPVJFD@FCHBVAHQhEFYL@DFFBHPCRAXFNAVGVC@CIA@ADCBADADABBLDVHnI`CdOTC\\@FAHMACEE@CDALAdENFXFlBFDRRDBJ@FCCKUgCECEBEB@J@ZHH@TCTDJCL@dDRARH^^JFL@VEXA„WDBJHH@HALELEJJDBJENCVMD@HDRDTBF@RKTIRABNBBJDR@hD`EfLDDGVWDIDADAN"], "encodeOffsets": [[115320, 36098]] }, "properties": { "cp": [112.590047, 35.090378], "name": "济源市", "childNum": 1 } }], "UTF8Encoding": true }; 2 | -------------------------------------------------------------------------------- /pages/measureText/index.js: -------------------------------------------------------------------------------- 1 | const app = getApp(); 2 | 3 | Page({ 4 | data: { 5 | value: null 6 | }, 7 | 8 | onReady() { 9 | var ctx = wx.createCanvasContext('measure'); 10 | var value = ctx.measureText('国国国国', '12px san-serif'); 11 | this.setData({ 12 | value: value.width 13 | }); 14 | } 15 | }); 16 | -------------------------------------------------------------------------------- /pages/measureText/index.json: -------------------------------------------------------------------------------- 1 | { 2 | } 3 | -------------------------------------------------------------------------------- /pages/measureText/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | measureText: {{ value }} 4 | 5 | 6 | -------------------------------------------------------------------------------- /pages/measureText/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | #measure { 3 | width: 100%; 4 | height: 500px; 5 | } 6 | -------------------------------------------------------------------------------- /pages/move/index.js: -------------------------------------------------------------------------------- 1 | import * as echarts from '../../ec-canvas/echarts'; 2 | 3 | Page({ 4 | onShareAppMessage: function (res) { 5 | return { 6 | title: 'ECharts 可以在微信小程序中使用啦！', 7 | path: '/pages/index/index', 8 | success: function () { }, 9 | fail: function () { } 10 | } 11 | }, 12 | data: { 13 | ecBar: { 14 | // 如果想要禁止触屏事件，以保证在图表区域内触摸移动仍能滚动页面， 15 | // 就将 disableTouch 设为 true 16 | // disableTouch: true, 17 | 18 | onInit: function (canvas, width, height, dpr) { 19 | const barChart = echarts.init(canvas, null, { 20 | width: width, 21 | height: height, 22 | devicePixelRatio: dpr // new 23 | }); 24 | canvas.setChart(barChart); 25 | barChart.setOption(getBarOption()); 26 | 27 | return barChart; 28 | } 29 | } 30 | }, 31 | 32 | onReady() { 33 | } 34 | }); 35 | 36 | function getBarOption() { 37 | return { 38 | tooltip: { 39 | trigger: 'axis', 40 | axisPointer: { // 坐标轴指示器，坐标轴触发有效 41 | type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' 42 | } 43 | }, 44 | legend: { 45 | data: ['热度', '正面', '负面'] 46 | }, 47 | grid: { 48 | left: 20, 49 | right: 20, 50 | bottom: 15, 51 | top: 40, 52 | containLabel: true 53 | }, 54 | xAxis: [ 55 | { 56 | type: 'value', 57 | axisLine: { 58 | lineStyle: { 59 | color: '#999' 60 | } 61 | }, 62 | axisLabel: { 63 | color: '#666' 64 | } 65 | } 66 | ], 67 | yAxis: [ 68 | { 69 | type: 'category', 70 | axisTick: { show: false }, 71 | data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'], 72 | axisLine: { 73 | lineStyle: { 74 | color: '#999' 75 | } 76 | }, 77 | axisLabel: { 78 | color: '#666' 79 | } 80 | } 81 | ], 82 | series: [ 83 | { 84 | name: '热度', 85 | type: 'bar', 86 | label: { 87 | normal: { 88 | show: true, 89 | position: 'inside' 90 | } 91 | }, 92 | data: [300, 270, 340, 344, 300, 320, 310] 93 | }, 94 | { 95 | name: '正面', 96 | type: 'bar', 97 | stack: '总量', 98 | label: { 99 | normal: { 100 | show: true 101 | } 102 | }, 103 | data: [120, 102, 141, 174, 190, 250, 220] 104 | }, 105 | { 106 | name: '负面', 107 | type: 'bar', 108 | stack: '总量', 109 | label: { 110 | normal: { 111 | show: true, 112 | position: 'left' 113 | } 114 | }, 115 | data: [-20, -32, -21, -34, -90, -130, -110] 116 | } 117 | ] 118 | }; 119 | } 120 | -------------------------------------------------------------------------------- /pages/move/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "ec-canvas": "../../ec-canvas/ec-canvas" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /pages/move/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 这是一个展示页面不被图表阻塞的例子 6 | 在图表区域（红色边框）之外可以滚动 7 | 8 | 9 | 这是一个展示页面不被图表阻塞的例子 10 | 在图表区域（红色边框）之外可以滚动 11 | 12 | 13 | 这是一个展示页面不被图表阻塞的例子 14 | 在图表区域（红色边框）之外可以滚动 15 | 16 | 17 | 这是一个展示页面不被图表阻塞的例子 18 | 在图表区域（红色边框）之外可以滚动 19 | 20 | 21 | 这是一个展示页面不被图表阻塞的例子 22 | 在图表区域（红色边框）之外可以滚动 23 | 24 | 25 | 这是一个展示页面不被图表阻塞的例子 26 | 在图表区域（红色边框）之外可以滚动 27 | 28 | 29 | 这是一个展示页面不被图表阻塞的例子 30 | 在图表区域（红色边框）之外可以滚动 31 | 32 | 33 | -------------------------------------------------------------------------------- /pages/move/index.wxss: -------------------------------------------------------------------------------- 1 | .move-container { 2 | width: 100%; 3 | min-height: 500px; 4 | } 5 | 6 | #mychart-dom-move-bar { 7 | width: 70%; 8 | height: 300px; 9 | margin: 20px 15%; 10 | border: 1px solid red; 11 | display: block; 12 | } 13 | 14 | .move-container .text { 15 | margin-bottom: 20px; 16 | } 17 | 18 | .move-container text { 19 | margin: 10px; 20 | display: block; 21 | } 22 | -------------------------------------------------------------------------------- /pages/multiCharts/index.js: -------------------------------------------------------------------------------- 1 | import * as echarts from '../../ec-canvas/echarts'; 2 | 3 | Page({ 4 | onShareAppMessage: function (res) { 5 | return { 6 | title: 'ECharts 可以在微信小程序中使用啦！', 7 | path: '/pages/index/index', 8 | success: function () { }, 9 | fail: function () { } 10 | } 11 | }, 12 | data: { 13 | ecBar: { 14 | onInit: function (canvas, width, height, dpr) { 15 | const barChart = echarts.init(canvas, null, { 16 | width: width, 17 | height: height, 18 | devicePixelRatio: dpr // new 19 | }); 20 | canvas.setChart(barChart); 21 | barChart.setOption(getBarOption()); 22 | 23 | return barChart; 24 | } 25 | }, 26 | 27 | ecScatter: { 28 | onInit: function (canvas, width, height, dpr) { 29 | const scatterChart = echarts.init(canvas, null, { 30 | width: width, 31 | height: height, 32 | devicePixelRatio: dpr // new 33 | }); 34 | canvas.setChart(scatterChart); 35 | scatterChart.setOption(getScatterOption()); 36 | 37 | return scatterChart; 38 | } 39 | } 40 | }, 41 | 42 | onReady() { 43 | } 44 | }); 45 | 46 | 47 | function getBarOption() { 48 | return { 49 | tooltip: { 50 | trigger: 'axis', 51 | axisPointer: { // 坐标轴指示器，坐标轴触发有效 52 | type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' 53 | } 54 | }, 55 | legend: { 56 | data: ['热度', '正面', '负面'] 57 | }, 58 | grid: { 59 | left: 20, 60 | right: 20, 61 | bottom: 15, 62 | top: 40, 63 | containLabel: true 64 | }, 65 | xAxis: [ 66 | { 67 | type: 'value', 68 | axisLine: { 69 | lineStyle: { 70 | color: '#999' 71 | } 72 | }, 73 | axisLabel: { 74 | color: '#666' 75 | } 76 | } 77 | ], 78 | yAxis: [ 79 | { 80 | type: 'category', 81 | axisTick: { show: false }, 82 | data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'], 83 | axisLine: { 84 | lineStyle: { 85 | color: '#999' 86 | } 87 | }, 88 | axisLabel: { 89 | color: '#666' 90 | } 91 | } 92 | ], 93 | series: [ 94 | { 95 | name: '热度', 96 | type: 'bar', 97 | label: { 98 | normal: { 99 | show: true, 100 | position: 'inside' 101 | } 102 | }, 103 | data: [300, 270, 340, 344, 300, 320, 310] 104 | }, 105 | { 106 | name: '正面', 107 | type: 'bar', 108 | stack: '总量', 109 | label: { 110 | normal: { 111 | show: true 112 | } 113 | }, 114 | data: [120, 102, 141, 174, 190, 250, 220] 115 | }, 116 | { 117 | name: '负面', 118 | type: 'bar', 119 | stack: '总量', 120 | label: { 121 | normal: { 122 | show: true, 123 | position: 'left' 124 | } 125 | }, 126 | data: [-20, -32, -21, -34, -90, -130, -110] 127 | } 128 | ] 129 | }; 130 | } 131 | 132 | function getScatterOption() { 133 | 134 | var data = []; 135 | var data2 = []; 136 | 137 | for (var i = 0; i < 10; i++) { 138 | data.push( 139 | [ 140 | Math.round(Math.random() * 100), 141 | Math.round(Math.random() * 100), 142 | Math.round(Math.random() * 40) 143 | ] 144 | ); 145 | data2.push( 146 | [ 147 | Math.round(Math.random() * 100), 148 | Math.round(Math.random() * 100), 149 | Math.round(Math.random() * 100) 150 | ] 151 | ); 152 | } 153 | 154 | var axisCommon = { 155 | axisLabel: { 156 | textStyle: { 157 | color: '#C8C8C8' 158 | } 159 | }, 160 | axisTick: { 161 | lineStyle: { 162 | color: '#fff' 163 | } 164 | }, 165 | axisLine: { 166 | lineStyle: { 167 | color: '#C8C8C8' 168 | } 169 | }, 170 | splitLine: { 171 | lineStyle: { 172 | color: '#C8C8C8', 173 | type: 'solid' 174 | } 175 | } 176 | }; 177 | 178 | return { 179 | backgroundColor: '#eee', 180 | xAxis: axisCommon, 181 | yAxis: axisCommon, 182 | legend: { 183 | data: ['aaaa', 'bbbb'] 184 | }, 185 | visualMap: { 186 | show: false, 187 | max: 100, 188 | inRange: { 189 | symbolSize: [20, 70] 190 | } 191 | }, 192 | series: [{ 193 | type: 'scatter', 194 | name: 'aaaa', 195 | data: data 196 | }, 197 | { 198 | name: 'bbbb', 199 | type: 'scatter', 200 | data: data2 201 | } 202 | ], 203 | animationDelay: function (idx) { 204 | return idx * 50; 205 | }, 206 | animationEasing: 'elasticOut' 207 | }; 208 | } 209 | -------------------------------------------------------------------------------- /pages/multiCharts/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "ec-canvas": "../../ec-canvas/ec-canvas" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /pages/multiCharts/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /pages/multiCharts/index.wxss: -------------------------------------------------------------------------------- 1 | #mychart-dom-multi-bar { 2 | position: absolute; 3 | top: 0; 4 | bottom: 50%; 5 | left: 0; 6 | right: 0; 7 | } 8 | 9 | #mychart-dom-multi-scatter { 10 | position: absolute; 11 | top: 50%; 12 | bottom: 0; 13 | left: 0; 14 | right: 0; 15 | } 16 | -------------------------------------------------------------------------------- /pages/parallel/index.js: -------------------------------------------------------------------------------- 1 | import * as echarts from '../../ec-canvas/echarts'; 2 | 3 | const app = getApp(); 4 | 5 | function initChart(canvas, width, height, dpr) { 6 | const chart = echarts.init(canvas, null, { 7 | width: width, 8 | height: height, 9 | devicePixelRatio: dpr // new 10 | }); 11 | canvas.setChart(chart); 12 | 13 | var option = { 14 | parallelAxis: [ 15 | { dim: 0, name: 'Price' }, 16 | { dim: 1, name: 'Net Weight' }, 17 | { dim: 2, name: 'Amount' }, 18 | { 19 | dim: 3, 20 | name: 'Score', 21 | type: 'category', 22 | data: ['Excellent', 'Good', 'OK', 'Bad'] 23 | } 24 | ], 25 | parallel: { 26 | left: 40, 27 | right: 80, 28 | top: 50, 29 | bottom: 20, 30 | parallelAxisDefault: { 31 | axisLine: { 32 | lineStyle: { 33 | color: '#999' 34 | } 35 | }, 36 | axisLabel: { 37 | color: '#666' 38 | }, 39 | nameTextStyle: { 40 | color: '#666' 41 | } 42 | } 43 | }, 44 | series: { 45 | type: 'parallel', 46 | lineStyle: { 47 | width: 4 48 | }, 49 | data: [ 50 | [12.99, 100, 82, 'Good'], 51 | [9.99, 80, 77, 'OK'], 52 | [20, 120, 60, 'Excellent'], 53 | [3.2, 40, 70, 'OK'] 54 | ] 55 | } 56 | }; 57 | 58 | chart.setOption(option); 59 | return chart; 60 | } 61 | 62 | Page({ 63 | onShareAppMessage: function (res) { 64 | return { 65 | title: 'ECharts 可以在微信小程序中使用啦！', 66 | path: '/pages/index/index', 67 | success: function () { }, 68 | fail: function () { } 69 | } 70 | }, 71 | data: { 72 | ec: { 73 | onInit: initChart 74 | } 75 | }, 76 | 77 | onReady() { 78 | } 79 | }); 80 | -------------------------------------------------------------------------------- /pages/parallel/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "ec-canvas": "../../ec-canvas/ec-canvas" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /pages/parallel/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /pages/parallel/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | ec-canvas { 3 | width: 100%; 4 | height: 100%; 5 | } 6 | -------------------------------------------------------------------------------- /pages/pie/index.js: -------------------------------------------------------------------------------- 1 | import * as echarts from '../../ec-canvas/echarts'; 2 | 3 | const app = getApp(); 4 | 5 | function initChart(canvas, width, height, dpr) { 6 | const chart = echarts.init(canvas, null, { 7 | width: width, 8 | height: height, 9 | devicePixelRatio: dpr // new 10 | }); 11 | canvas.setChart(chart); 12 | 13 | var option = { 14 | backgroundColor: "#ffffff", 15 | series: [{ 16 | label: { 17 | normal: { 18 | fontSize: 14 19 | } 20 | }, 21 | type: 'pie', 22 | center: ['50%', '50%'], 23 | radius: ['20%', '40%'], 24 | data: [{ 25 | value: 55, 26 | name: '北京' 27 | }, { 28 | value: 20, 29 | name: '武汉' 30 | }, { 31 | value: 10, 32 | name: '杭州' 33 | }, { 34 | value: 20, 35 | name: '广州' 36 | }, { 37 | value: 38, 38 | name: '上海' 39 | }] 40 | }] 41 | }; 42 | 43 | chart.setOption(option); 44 | return chart; 45 | } 46 | 47 | Page({ 48 | onShareAppMessage: function (res) { 49 | return { 50 | title: 'ECharts 可以在微信小程序中使用啦！', 51 | path: '/pages/index/index', 52 | success: function () { }, 53 | fail: function () { } 54 | } 55 | }, 56 | data: { 57 | ec: { 58 | onInit: initChart 59 | } 60 | }, 61 | 62 | onReady() { 63 | } 64 | }); 65 | -------------------------------------------------------------------------------- /pages/pie/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "ec-canvas": "../../ec-canvas/ec-canvas" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /pages/pie/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /pages/pie/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | ec-canvas { 3 | width: 100%; 4 | height: 100%; 5 | } 6 | -------------------------------------------------------------------------------- /pages/radar/index.js: -------------------------------------------------------------------------------- 1 | import * as echarts from '../../ec-canvas/echarts'; 2 | 3 | const app = getApp(); 4 | 5 | function initChart(canvas, width, height, dpr) { 6 | const chart = echarts.init(canvas, null, { 7 | width: width, 8 | height: height, 9 | devicePixelRatio: dpr // new 10 | }); 11 | canvas.setChart(chart); 12 | 13 | var option = { 14 | backgroundColor: "#ffffff", 15 | xAxis: { 16 | show: false 17 | }, 18 | yAxis: { 19 | show: false 20 | }, 21 | radar: { 22 | // shape: 'circle', 23 | indicator: [{ 24 | name: '食品', 25 | max: 500 26 | }, 27 | { 28 | name: '玩具', 29 | max: 500 30 | }, 31 | { 32 | name: '服饰', 33 | max: 500 34 | }, 35 | { 36 | name: '绘本', 37 | max: 500 38 | }, 39 | { 40 | name: '医疗', 41 | max: 500 42 | }, 43 | { 44 | name: '门票', 45 | max: 500 46 | } 47 | ] 48 | }, 49 | series: [{ 50 | name: '预算 vs 开销', 51 | type: 'radar', 52 | data: [{ 53 | value: [430, 340, 500, 300, 490, 400], 54 | name: '预算' 55 | }, 56 | { 57 | value: [300, 430, 150, 300, 420, 250], 58 | name: '开销' 59 | } 60 | ] 61 | }] 62 | }; 63 | 64 | chart.setOption(option); 65 | return chart; 66 | } 67 | 68 | Page({ 69 | onShareAppMessage: function (res) { 70 | return { 71 | title: 'ECharts 可以在微信小程序中使用啦！', 72 | path: '/pages/index/index', 73 | success: function () { }, 74 | fail: function () { } 75 | } 76 | }, 77 | data: { 78 | ec: { 79 | onInit: initChart 80 | } 81 | }, 82 | 83 | onReady() { 84 | } 85 | }); 86 | -------------------------------------------------------------------------------- /pages/radar/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "ec-canvas": "../../ec-canvas/ec-canvas" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /pages/radar/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /pages/radar/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | ec-canvas { 3 | width: 100%; 4 | height: 100%; 5 | } 6 | -------------------------------------------------------------------------------- /pages/sankey/index.js: -------------------------------------------------------------------------------- 1 | import * as echarts from '../../ec-canvas/echarts'; 2 | 3 | const app = getApp(); 4 | 5 | function initChart(canvas, width, height, dpr) { 6 | const chart = echarts.init(canvas, null, { 7 | width: width, 8 | height: height, 9 | devicePixelRatio: dpr // new 10 | }); 11 | canvas.setChart(chart); 12 | 13 | var option = { 14 | series: { 15 | type: 'sankey', 16 | layout: 'none', 17 | data: [{ 18 | name: 'a' 19 | }, { 20 | name: 'b' 21 | }, { 22 | name: 'a1' 23 | }, { 24 | name: 'a2' 25 | }, { 26 | name: 'b1' 27 | }, { 28 | name: 'c' 29 | }, { 30 | name: 'd' 31 | }, { 32 | name: 'd1' 33 | }, { 34 | name: 'd2' 35 | }, { 36 | name: 'd3' 37 | }], 38 | links: [{ 39 | source: 'a', 40 | target: 'a1', 41 | value: 5 42 | }, { 43 | source: 'a', 44 | target: 'a2', 45 | value: 3 46 | }, { 47 | source: 'b', 48 | target: 'b1', 49 | value: 8 50 | }, { 51 | source: 'a', 52 | target: 'b1', 53 | value: 3 54 | }, { 55 | source: 'b1', 56 | target: 'a1', 57 | value: 1 58 | }, { 59 | source: 'd', 60 | target: 'a2', 61 | value: 1 62 | }, { 63 | source: 'd', 64 | target: 'c', 65 | value: 1 66 | }, { 67 | source: 'd1', 68 | target: 'c', 69 | value: 2 70 | }, { 71 | source: 'd2', 72 | target: 'c', 73 | value: 2 74 | }, { 75 | source: 'd', 76 | target: 'd3', 77 | value: 4 78 | }, { 79 | source: 'd2', 80 | target: 'd3', 81 | value: 1 82 | }] 83 | } 84 | }; 85 | 86 | chart.setOption(option); 87 | return chart; 88 | } 89 | 90 | Page({ 91 | onShareAppMessage: function (res) { 92 | return { 93 | title: 'ECharts 可以在微信小程序中使用啦！', 94 | path: '/pages/index/index', 95 | success: function () { }, 96 | fail: function () { } 97 | } 98 | }, 99 | data: { 100 | ec: { 101 | onInit: initChart 102 | } 103 | }, 104 | 105 | onReady() { 106 | } 107 | }); 108 | -------------------------------------------------------------------------------- /pages/sankey/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "ec-canvas": "../../ec-canvas/ec-canvas" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /pages/sankey/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /pages/sankey/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | ec-canvas { 3 | width: 100%; 4 | height: 100%; 5 | } 6 | -------------------------------------------------------------------------------- /pages/saveCanvas/index.js: -------------------------------------------------------------------------------- 1 | import * as echarts from '../../ec-canvas/echarts'; 2 | 3 | let chart = null; 4 | 5 | function initChart(canvas, width, height, dpr) { 6 | chart = echarts.init(canvas, null, { 7 | width: width, 8 | height: height, 9 | devicePixelRatio: dpr // new 10 | }); 11 | canvas.setChart(chart); 12 | 13 | var option = { 14 | tooltip: { 15 | trigger: 'axis', 16 | axisPointer: { // 坐标轴指示器，坐标轴触发有效 17 | type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' 18 | } 19 | }, 20 | legend: { 21 | data: ['热度', '正面', '负面'] 22 | }, 23 | grid: { 24 | left: 20, 25 | right: 20, 26 | bottom: 15, 27 | top: 40, 28 | containLabel: true 29 | }, 30 | xAxis: [ 31 | { 32 | type: 'value', 33 | axisLine: { 34 | lineStyle: { 35 | color: '#999' 36 | } 37 | }, 38 | axisLabel: { 39 | color: '#666' 40 | } 41 | } 42 | ], 43 | yAxis: [ 44 | { 45 | type: 'category', 46 | axisTick: { show: false }, 47 | data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'], 48 | axisLine: { 49 | lineStyle: { 50 | color: '#999' 51 | } 52 | }, 53 | axisLabel: { 54 | color: '#666' 55 | } 56 | } 57 | ], 58 | series: [ 59 | { 60 | name: '热度', 61 | type: 'bar', 62 | label: { 63 | normal: { 64 | show: true, 65 | position: 'inside' 66 | } 67 | }, 68 | data: [300, 270, 340, 344, 300, 320, 310], 69 | itemStyle: { 70 | // emphasis: { 71 | // color: '#37a2da' 72 | // } 73 | } 74 | }, 75 | { 76 | name: '正面', 77 | type: 'bar', 78 | stack: '总量', 79 | label: { 80 | normal: { 81 | show: true 82 | } 83 | }, 84 | data: [120, 102, 141, 174, 190, 250, 220], 85 | itemStyle: { 86 | // emphasis: { 87 | // color: '#32c5e9' 88 | // } 89 | } 90 | }, 91 | { 92 | name: '负面', 93 | type: 'bar', 94 | stack: '总量', 95 | label: { 96 | normal: { 97 | show: true, 98 | position: 'left' 99 | } 100 | }, 101 | data: [-20, -32, -21, -34, -90, -130, -110], 102 | itemStyle: { 103 | // emphasis: { 104 | // color: '#67e0e3' 105 | // } 106 | } 107 | } 108 | ] 109 | }; 110 | 111 | chart.setOption(option); 112 | return chart; 113 | } 114 | 115 | Page({ 116 | onShareAppMessage: function (res) { 117 | return { 118 | title: 'ECharts 可以在微信小程序中使用啦！', 119 | path: '/pages/index/index', 120 | success: function () { }, 121 | fail: function () { } 122 | } 123 | }, 124 | data: { 125 | ec: { 126 | onInit: initChart 127 | } 128 | }, 129 | 130 | onReady() { 131 | // tips:正常逻辑不建议这么写，需要保证initChart之后再执行下载 132 | setTimeout(() => { 133 | this.save(); 134 | }, 1000); 135 | }, 136 | 137 | save() { 138 | const ecComponent = this.selectComponent('#mychart-dom-save'); 139 | 140 | // 先保存图片到临时的本地文件，然后存入系统相册 141 | ecComponent.canvasToTempFilePath({ 142 | success: res => { 143 | console.log("tempFilePath:", res.tempFilePath) 144 | 145 | // 存入系统相册 146 | wx.saveImageToPhotosAlbum({ 147 | filePath: res.tempFilePath || '', 148 | success: res => { 149 | console.log("success", res) 150 | }, 151 | fail: res => { 152 | console.log("fail", res) 153 | } 154 | }) 155 | }, 156 | fail: res => console.log(res) 157 | }); 158 | } 159 | }); 160 | -------------------------------------------------------------------------------- /pages/saveCanvas/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "ec-canvas": "../../ec-canvas/ec-canvas" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /pages/saveCanvas/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /pages/saveCanvas/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | ec-canvas { 3 | width: 100%; 4 | height: 100%; 5 | } 6 | -------------------------------------------------------------------------------- /pages/scatter/index.js: -------------------------------------------------------------------------------- 1 | import * as echarts from '../../ec-canvas/echarts'; 2 | 3 | const app = getApp(); 4 | 5 | function initChart(canvas, width, height, dpr) { 6 | const chart = echarts.init(canvas, null, { 7 | width: width, 8 | height: height, 9 | devicePixelRatio: dpr // new 10 | }); 11 | canvas.setChart(chart); 12 | 13 | var data = []; 14 | var data2 = []; 15 | 16 | for (var i = 0; i < 10; i++) { 17 | data.push( 18 | [ 19 | Math.round(Math.random() * 100), 20 | Math.round(Math.random() * 100), 21 | Math.round(Math.random() * 40) 22 | ] 23 | ); 24 | data2.push( 25 | [ 26 | Math.round(Math.random() * 100), 27 | Math.round(Math.random() * 100), 28 | Math.round(Math.random() * 100) 29 | ] 30 | ); 31 | } 32 | 33 | var axisCommon = { 34 | axisLabel: { 35 | textStyle: { 36 | color: '#C8C8C8' 37 | } 38 | }, 39 | axisTick: { 40 | lineStyle: { 41 | color: '#fff' 42 | } 43 | }, 44 | axisLine: { 45 | lineStyle: { 46 | color: '#C8C8C8' 47 | } 48 | }, 49 | splitLine: { 50 | lineStyle: { 51 | color: '#C8C8C8', 52 | type: 'solid' 53 | } 54 | } 55 | }; 56 | 57 | var option = { 58 | backgroundColor: '#eee', 59 | xAxis: axisCommon, 60 | yAxis: axisCommon, 61 | legend: { 62 | data: ['aaaa', 'bbbb'] 63 | }, 64 | visualMap: { 65 | show: false, 66 | max: 100, 67 | inRange: { 68 | symbolSize: [20, 70] 69 | } 70 | }, 71 | series: [{ 72 | type: 'scatter', 73 | name: 'aaaa', 74 | data: data 75 | }, 76 | { 77 | name: 'bbbb', 78 | type: 'scatter', 79 | data: data2 80 | } 81 | ], 82 | animationDelay: function (idx) { 83 | return idx * 50; 84 | }, 85 | animationEasing: 'elasticOut' 86 | }; 87 | 88 | 89 | chart.setOption(option); 90 | return chart; 91 | } 92 | 93 | Page({ 94 | onShareAppMessage: function (res) { 95 | return { 96 | title: 'ECharts 可以在微信小程序中使用啦！', 97 | path: '/pages/index/index', 98 | success: function () { }, 99 | fail: function () { } 100 | } 101 | }, 102 | data: { 103 | ec: { 104 | onInit: initChart 105 | } 106 | }, 107 | 108 | onReady() { 109 | } 110 | }); 111 | -------------------------------------------------------------------------------- /pages/scatter/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "ec-canvas": "../../ec-canvas/ec-canvas" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /pages/scatter/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /pages/scatter/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | ec-canvas { 3 | width: 100%; 4 | height: 100%; 5 | } 6 | -------------------------------------------------------------------------------- /pages/sunburst/index.js: -------------------------------------------------------------------------------- 1 | import * as echarts from '../../ec-canvas/echarts'; 2 | 3 | const app = getApp(); 4 | 5 | function initChart(canvas, width, height, dpr) { 6 | const chart = echarts.init(canvas, null, { 7 | width: width, 8 | height: height, 9 | devicePixelRatio: dpr // new 10 | }); 11 | canvas.setChart(chart); 12 | var item1 = { 13 | color: '#F54F4A' 14 | }; 15 | var item2 = { 16 | color: '#FF8C75' 17 | }; 18 | var item3 = { 19 | color: '#FFB499' 20 | }; 21 | 22 | var data = [{ 23 | children: [{ 24 | value: 5, 25 | children: [{ 26 | value: 1, 27 | itemStyle: item1 28 | }, { 29 | value: 2 30 | }, { 31 | value: 1 32 | }], 33 | itemStyle: item1 34 | }, { 35 | value: 10, 36 | children: [{ 37 | value: 6, 38 | itemStyle: item3 39 | }, { 40 | value: 2, 41 | itemStyle: item3 42 | }, { 43 | value: 1 44 | }], 45 | itemStyle: item1 46 | }], 47 | itemStyle: item1 48 | }, { 49 | value: 9, 50 | children: [{ 51 | value: 4, 52 | children: [{ 53 | value: 2, 54 | itemStyle: item2 55 | }], 56 | itemStyle: item1 57 | }, { 58 | children: [{ 59 | value: 3 60 | }], 61 | itemStyle: item3 62 | }], 63 | itemStyle: item2 64 | }, { 65 | value: 7, 66 | children: [{ 67 | children: [{ 68 | value: 1, 69 | itemStyle: item3 70 | }, { 71 | value: 3, 72 | itemStyle: item2 73 | }, { 74 | value: 2, 75 | itemStyle: item1 76 | }], 77 | itemStyle: item3 78 | }], 79 | itemStyle: item1 80 | }, { 81 | children: [{ 82 | value: 6, 83 | children: [{ 84 | value: 1, 85 | itemStyle: item2 86 | }, { 87 | value: 2, 88 | itemStyle: item1 89 | }, { 90 | value: 1, 91 | itemStyle: item3 92 | }], 93 | itemStyle: item3 94 | }, { 95 | value: 3, 96 | children: [{ 97 | value: 1, 98 | }, { 99 | value: 1, 100 | itemStyle: item2 101 | }, { 102 | value: 1 103 | }], 104 | itemStyle: item3 105 | }], 106 | itemStyle: item1 107 | }]; 108 | 109 | var option = { 110 | series: { 111 | radius: ['15%', '80%'], 112 | type: 'sunburst', 113 | sort: null, 114 | highlightPolicy: 'ancestor', 115 | data: data, 116 | label: { 117 | rotate: 'radial' 118 | }, 119 | levels: [], 120 | itemStyle: { 121 | color: '#ddd', 122 | borderWidth: 2 123 | } 124 | } 125 | }; 126 | 127 | 128 | chart.setOption(option); 129 | return chart; 130 | } 131 | 132 | Page({ 133 | onShareAppMessage: function (res) { 134 | return { 135 | title: 'ECharts 可以在微信小程序中使用啦！', 136 | path: '/pages/index/index', 137 | success: function () { }, 138 | fail: function () { } 139 | } 140 | }, 141 | data: { 142 | ec: { 143 | onInit: initChart 144 | } 145 | }, 146 | 147 | onReady() { 148 | } 149 | }); 150 | -------------------------------------------------------------------------------- /pages/sunburst/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "ec-canvas": "../../ec-canvas/ec-canvas" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /pages/sunburst/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /pages/sunburst/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | ec-canvas { 3 | width: 100%; 4 | height: 100%; 5 | } 6 | -------------------------------------------------------------------------------- /pages/themeRiver/index.js: -------------------------------------------------------------------------------- 1 | import * as echarts from '../../ec-canvas/echarts'; 2 | 3 | const app = getApp(); 4 | 5 | function initChart(canvas, width, height, dpr) { 6 | const chart = echarts.init(canvas, null, { 7 | width: width, 8 | height: height, 9 | devicePixelRatio: dpr // new 10 | }); 11 | canvas.setChart(chart); 12 | 13 | var option = { 14 | tooltip: { 15 | trigger: 'axis', 16 | axisPointer: { 17 | type: 'line', 18 | lineStyle: { 19 | color: 'rgba(0,0,0,0.2)', 20 | width: 1, 21 | type: 'solid' 22 | } 23 | } 24 | }, 25 | 26 | legend: { 27 | data: ['DQ', 'TY', 'SS', 'QG', 'SY', 'DD'] 28 | }, 29 | 30 | singleAxis: { 31 | top: 50, 32 | bottom: 50, 33 | axisTick: {}, 34 | axisLabel: {}, 35 | type: 'time', 36 | axisPointer: { 37 | animation: true, 38 | label: { 39 | show: true 40 | } 41 | }, 42 | splitLine: { 43 | show: true, 44 | lineStyle: { 45 | type: 'dashed', 46 | opacity: 0.2 47 | } 48 | } 49 | }, 50 | 51 | series: [ 52 | { 53 | type: 'themeRiver', 54 | itemStyle: { 55 | emphasis: { 56 | shadowBlur: 20, 57 | shadowColor: 'rgba(0, 0, 0, 0.8)' 58 | } 59 | }, 60 | data: [['2015/11/08', 10, 'DQ'], ['2015/11/09', 15, 'DQ'], ['2015/11/10', 35, 'DQ'], 61 | // ['2015/11/11',38,'DQ'],['2015/11/12',22,'DQ'],['2015/11/13',16,'DQ'], 62 | ['2015/11/14', 7, 'DQ'], ['2015/11/15', 2, 'DQ'], ['2015/11/16', 17, 'DQ'], 63 | ['2015/11/17', 33, 'DQ'], ['2015/11/18', 40, 'DQ'], ['2015/11/19', 32, 'DQ'], 64 | ['2015/11/20', 26, 'DQ'], ['2015/11/21', 35, 'DQ'], ['2015/11/22', 40, 'DQ'], 65 | ['2015/11/23', 32, 'DQ'], ['2015/11/24', 26, 'DQ'], ['2015/11/25', 22, 'DQ'], 66 | // ['2015/11/26',16,'DQ'],['2015/11/27',22,'DQ'],['2015/11/28',10,'DQ'], 67 | ['2015/11/08', 35, 'TY'], ['2015/11/09', 36, 'TY'], ['2015/11/10', 37, 'TY'], 68 | ['2015/11/11', 22, 'TY'], ['2015/11/12', 24, 'TY'], ['2015/11/13', 26, 'TY'], 69 | ['2015/11/14', 34, 'TY'], ['2015/11/15', 21, 'TY'], ['2015/11/16', 18, 'TY'], 70 | ['2015/11/17', 45, 'TY'], ['2015/11/18', 32, 'TY'], ['2015/11/19', 35, 'TY'], 71 | ['2015/11/20', 30, 'TY'], ['2015/11/21', 28, 'TY'], ['2015/11/22', 27, 'TY'], 72 | ['2015/11/23', 26, 'TY'], ['2015/11/24', 15, 'TY'], ['2015/11/25', 30, 'TY'], 73 | ['2015/11/26', 35, 'TY'], ['2015/11/27', 42, 'TY'], ['2015/11/28', 42, 'TY'], 74 | ['2015/11/08', 21, 'SS'], ['2015/11/09', 25, 'SS'], ['2015/11/10', 27, 'SS'], 75 | ['2015/11/11', 23, 'SS'], ['2015/11/12', 24, 'SS'], ['2015/11/13', 21, 'SS'], 76 | ['2015/11/14', 35, 'SS'], ['2015/11/15', 39, 'SS'], ['2015/11/16', 40, 'SS'], 77 | ['2015/11/17', 36, 'SS'], ['2015/11/18', 33, 'SS'], ['2015/11/19', 43, 'SS'], 78 | ['2015/11/20', 40, 'SS'], ['2015/11/21', 34, 'SS'], ['2015/11/22', 28, 'SS'], 79 | // ['2015/11/23',26,'SS'],['2015/11/24',37,'SS'],['2015/11/25',41,'SS'], 80 | // ['2015/11/26',46,'SS'],['2015/11/27',47,'SS'],['2015/11/28',41,'SS'], 81 | // ['2015/11/08',10,'QG'],['2015/11/09',15,'QG'],['2015/11/10',35,'QG'], 82 | // ['2015/11/11',38,'QG'],['2015/11/12',22,'QG'],['2015/11/13',16,'QG'], 83 | ['2015/11/14', 7, 'QG'], ['2015/11/15', 2, 'QG'], ['2015/11/16', 17, 'QG'], 84 | ['2015/11/17', 33, 'QG'], ['2015/11/18', 40, 'QG'], ['2015/11/19', 32, 'QG'], 85 | ['2015/11/20', 26, 'QG'], ['2015/11/21', 35, 'QG'], ['2015/11/22', 40, 'QG'], 86 | ['2015/11/23', 32, 'QG'], ['2015/11/24', 26, 'QG'], ['2015/11/25', 22, 'QG'], 87 | ['2015/11/26', 16, 'QG'], ['2015/11/27', 22, 'QG'], ['2015/11/28', 10, 'QG'], 88 | ['2015/11/08', 10, 'SY'], ['2015/11/09', 15, 'SY'], ['2015/11/10', 35, 'SY'], 89 | ['2015/11/11', 38, 'SY'], ['2015/11/12', 22, 'SY'], ['2015/11/13', 16, 'SY'], 90 | ['2015/11/14', 7, 'SY'], ['2015/11/15', 2, 'SY'], ['2015/11/16', 17, 'SY'], 91 | ['2015/11/17', 33, 'SY'], ['2015/11/18', 40, 'SY'], ['2015/11/19', 32, 'SY'], 92 | ['2015/11/20', 26, 'SY'], ['2015/11/21', 35, 'SY'], ['2015/11/22', 4, 'SY'], 93 | ['2015/11/23', 32, 'SY'], ['2015/11/24', 26, 'SY'], ['2015/11/25', 22, 'SY'], 94 | ['2015/11/26', 16, 'SY'], ['2015/11/27', 22, 'SY'], ['2015/11/28', 10, 'SY'], 95 | ['2015/11/08', 10, 'DD'], ['2015/11/09', 15, 'DD'], ['2015/11/10', 35, 'DD'], 96 | ['2015/11/11', 38, 'DD'], ['2015/11/12', 22, 'DD'], ['2015/11/13', 16, 'DD'], 97 | ['2015/11/14', 7, 'DD'], ['2015/11/15', 2, 'DD'], ['2015/11/16', 17, 'DD'], 98 | ['2015/11/17', 33, 'DD'], ['2015/11/18', 4, 'DD'], ['2015/11/19', 32, 'DD'], 99 | ['2015/11/20', 26, 'DD'], ['2015/11/21', 35, 'DD'], ['2015/11/22', 40, 'DD'], 100 | ['2015/11/23', 32, 'DD'], ['2015/11/24', 26, 'DD'], ['2015/11/25', 22, 'DD'], 101 | ['2015/11/26', 16, 'DD'], ['2015/11/27', 22, 'DD'], ['2015/11/28', 10, 'DD']] 102 | } 103 | ] 104 | }; 105 | 106 | chart.setOption(option); 107 | return chart; 108 | } 109 | 110 | Page({ 111 | onShareAppMessage: function (res) { 112 | return { 113 | title: 'ECharts 可以在微信小程序中使用啦！', 114 | path: '/pages/index/index', 115 | success: function () { }, 116 | fail: function () { } 117 | } 118 | }, 119 | data: { 120 | ec: { 121 | onInit: initChart 122 | } 123 | }, 124 | 125 | onReady() { 126 | } 127 | }); 128 | -------------------------------------------------------------------------------- /pages/themeRiver/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "ec-canvas": "../../ec-canvas/ec-canvas" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /pages/themeRiver/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /pages/themeRiver/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | ec-canvas { 3 | width: 100%; 4 | height: 100%; 5 | } 6 | -------------------------------------------------------------------------------- /pages/tree/index.js: -------------------------------------------------------------------------------- 1 | import * as echarts from '../../ec-canvas/echarts'; 2 | 3 | const app = getApp(); 4 | 5 | function initChart(canvas, width, height, dpr) { 6 | const chart = echarts.init(canvas, null, { 7 | width: width, 8 | height: height, 9 | devicePixelRatio: dpr // new 10 | }); 11 | canvas.setChart(chart); 12 | var data1 = { 13 | "name": "root", 14 | "children": [{ 15 | "name": "a", 16 | "children": [{ 17 | "name": "a1" 18 | }, { 19 | "name": "a2" 20 | }, { 21 | "name": "a3" 22 | }, { 23 | "name": "a4" 24 | }] 25 | }, { 26 | "name": "b", 27 | "children": [{ 28 | "name": "b1" 29 | }, { 30 | "name": "b2" 31 | }, { 32 | "name": "b3" 33 | }, { 34 | "name": "b4" 35 | }] 36 | }, { 37 | "name": "c", 38 | "children": [{ 39 | "name": "c1" 40 | }] 41 | }, { 42 | "name": "d", 43 | "children": [{ 44 | "name": "d1" 45 | }] 46 | }] 47 | }; 48 | 49 | var option = { 50 | series: [{ 51 | type: 'tree', 52 | 53 | initialTreeDepth: -1, 54 | 55 | name: 'tree1', 56 | 57 | data: [data1], 58 | 59 | top: '5%', 60 | left: '20%', 61 | bottom: '2%', 62 | right: '15%', 63 | 64 | symbolSize: 10, 65 | symbol: 'circle', 66 | 67 | label: { 68 | normal: { 69 | position: 'left', 70 | verticalAlign: 'middle', 71 | align: 'right', 72 | color: 'black' 73 | } 74 | } 75 | 76 | }] 77 | }; 78 | 79 | chart.setOption(option); 80 | return chart; 81 | } 82 | 83 | Page({ 84 | onShareAppMessage: function (res) { 85 | return { 86 | title: 'ECharts 可以在微信小程序中使用啦！', 87 | path: '/pages/index/index', 88 | success: function () { }, 89 | fail: function () { } 90 | } 91 | }, 92 | data: { 93 | ec: { 94 | onInit: initChart 95 | } 96 | }, 97 | 98 | onReady() { 99 | } 100 | }); 101 | -------------------------------------------------------------------------------- /pages/tree/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "ec-canvas": "../../ec-canvas/ec-canvas" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /pages/tree/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /pages/tree/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | ec-canvas { 3 | width: 100%; 4 | height: 100%; 5 | } 6 | -------------------------------------------------------------------------------- /pages/treemap/index.js: -------------------------------------------------------------------------------- 1 | import * as echarts from '../../ec-canvas/echarts'; 2 | 3 | const app = getApp(); 4 | 5 | function initChart(canvas, width, height, dpr) { 6 | const chart = echarts.init(canvas, null, { 7 | width: width, 8 | height: height, 9 | devicePixelRatio: dpr // new 10 | }); 11 | canvas.setChart(chart); 12 | var data = []; 13 | 14 | for (var i = 0; i <= 360; i++) { 15 | var t = i / 180 * Math.PI; 16 | var r = Math.sin(2 * t) * Math.cos(2 * t); 17 | data.push([r, i]); 18 | } 19 | 20 | var option = { 21 | title: { 22 | text: '2014年中国耕地质量', 23 | left: 'center', 24 | textStyle: { 25 | 26 | color: '#1a1b4e', 27 | 28 | fontStyle: 'normal', 29 | 30 | fontSize: 24 31 | }, 32 | subtext: '数据来源：国土资源部' 33 | }, 34 | tooltip: { 35 | formatter: '{b}:
耕地面积： {c}万公顷' 36 | }, 37 | series: [{ 38 | name: '耕地等级', 39 | type: 'treemap', 40 | visibleMin: 100, 41 | itemStyle: { 42 | normal: { 43 | label: { 44 | show: true, 45 | formatter: "{b}" 46 | }, 47 | borderWidth: 2 48 | }, 49 | emphasis: { 50 | label: { 51 | show: true 52 | } 53 | } 54 | }, 55 | label: { 56 | normal: { 57 | fontSize: 14 58 | } 59 | }, 60 | data: [ // 注意，最外层是一个数组，而非从某个根节点开始。 61 | { 62 | value: 13509.74, 63 | children: [{ 64 | value: 2389.25, // value字段的值，对应到面积大小。 65 | // 也可以是数组，如 [2323, 43, 55]，则数组第一项对应到面积大小。 66 | // 数组其他项可以用于额外的视觉映射，详情参见 series-treemp.levels。 67 | id: 'someid-1', // id 不是必须设置的。 68 | // 但是如果想使用 API 来改变某个节点，需要用 id 来定位。 69 | name: '低等地 17.69%', // 显示在矩形中的描述文字。 70 | children: [{ 71 | value: 1125.5, 72 | id: 'someid-31', 73 | name: '13等地', 74 | }, { 75 | value: 765.63, 76 | id: 'someid-32', 77 | name: '14等地', 78 | }, { 79 | value: 498.12, 80 | id: 'someid-33', 81 | name: '15等地', 82 | },], 83 | label: { // 此节点特殊的 label 定义（如果需要的话）。 84 | // ... // label的格式参见 series-treemap.label。 85 | }, 86 | itemStyle: { // 此节点特殊的 itemStyle 定义（如果需要的话）。 87 | // ... // label的格式参见 series-treemap.itemStyle。 88 | } 89 | }, { 90 | value: 7138.52, 91 | id: 'someid-2', 92 | name: '中等地 52.84%', 93 | children: [{ 94 | value: 1410.69, 95 | id: 'someid-31', 96 | name: '9等地', 97 | }, { 98 | value: 1790.55, 99 | id: 'someid-32', 100 | name: '10等地', 101 | }, { 102 | value: 2045.43, 103 | id: 'someid-33', 104 | name: '11等地', 105 | }, { 106 | value: 1891.85, 107 | id: 'someid-34', 108 | name: '12等地', 109 | },], 110 | 111 | }, { 112 | value: 3584.6, 113 | id: 'someid-3', 114 | name: '高等地 26.53%', 115 | children: [{ 116 | value: 366.48, 117 | id: 'someid-31', 118 | name: '5等地', 119 | }, { 120 | value: 886.22, 121 | id: 'someid-32', 122 | name: '6等地', 123 | }, { 124 | value: 1143.89, 125 | id: 'someid-33', 126 | name: '7等地', 127 | }, { 128 | value: 1188.01, 129 | id: 'someid-34', 130 | name: '8等地', 131 | },], 132 | 133 | }, { 134 | value: 397.38, 135 | id: 'someid-4', 136 | name: '优等地 2.94%', 137 | children: [{ 138 | value: 48.84, 139 | id: 'someid-31', 140 | name: '1等地', 141 | }, { 142 | value: 59.93, 143 | id: 'someid-32', 144 | name: '2等地', 145 | }, { 146 | value: 115.85, 147 | id: 'someid-33', 148 | name: '3等地', 149 | }, { 150 | value: 172.76, 151 | id: 'someid-34', 152 | name: '4等地', 153 | },], 154 | 155 | }] 156 | }, 157 | ], 158 | leafDepth: 2 159 | }] 160 | }; 161 | 162 | chart.setOption(option); 163 | return chart; 164 | } 165 | 166 | Page({ 167 | onShareAppMessage: function (res) { 168 | return { 169 | title: 'ECharts 可以在微信小程序中使用啦！', 170 | path: '/pages/index/index', 171 | success: function () { }, 172 | fail: function () { } 173 | } 174 | }, 175 | data: { 176 | ec: { 177 | onInit: initChart 178 | } 179 | }, 180 | 181 | onReady() { } 182 | }); -------------------------------------------------------------------------------- /pages/treemap/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "ec-canvas": "../../ec-canvas/ec-canvas" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /pages/treemap/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /pages/treemap/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | ec-canvas { 3 | width: 100%; 4 | height: 100%; 5 | } 6 | -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件，详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html", 3 | "setting": { 4 | "urlCheck": true, 5 | "es6": true, 6 | "enhance": false, 7 | "postcss": false, 8 | "preloadBackgroundData": false, 9 | "minified": false, 10 | "newFeature": true, 11 | "coverView": true, 12 | "nodeModules": false, 13 | "autoAudits": false, 14 | "showShadowRootInWxmlPanel": true, 15 | "scopeDataCheck": false, 16 | "uglifyFileName": false, 17 | "checkInvalidKey": true, 18 | "checkSiteMap": true, 19 | "uploadWithSourceMap": true, 20 | "compileHotReLoad": false, 21 | "useMultiFrameRuntime": true, 22 | "useApiHook": true, 23 | "useApiHostProcess": false, 24 | "babelSetting": { 25 | "ignore": [], 26 | "disablePlugins": [], 27 | "outputPath": "" 28 | }, 29 | "enableEngineNative": false, 30 | "bundle": false, 31 | "useIsolateContext": true, 32 | "useCompilerModule": true, 33 | "userConfirmedUseCompilerModuleSwitch": false, 34 | "userConfirmedBundleSwitch": false, 35 | "packNpmManually": false, 36 | "packNpmRelationList": [], 37 | "minifyWXSS": true, 38 | "lazyloadPlaceholderEnable": false, 39 | "useStaticServer": true, 40 | "showES6CompileOption": false, 41 | "disableUseStrict": false, 42 | "useCompilerPlugins": false, 43 | "minifyWXML": true 44 | }, 45 | "compileType": "miniprogram", 46 | "libVersion": "2.10.2", 47 | "appid": "wxee40007e9b62f5d0", 48 | "projectname": "ECharts%20Demo", 49 | "simulatorType": "wechat", 50 | "simulatorPluginLibVersion": {}, 51 | "condition": {}, 52 | "packOptions": { 53 | "ignore": [], 54 | "include": [] 55 | }, 56 | "editorSetting": { 57 | "tabIndent": "insertSpaces", 58 | "tabSize": 2 59 | } 60 | } -------------------------------------------------------------------------------- /sitemap.json: -------------------------------------------------------------------------------- 1 | { 2 | "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", 3 | "rules": [{ 4 | "action": "allow", 5 | "page": "*" 6 | }] 7 | } --------------------------------------------------------------------------------