Repository: F-loat/mpvue-echarts
Branch: master
Commit: 741695be05dd
Files: 42
Total size: 105.0 KB
Directory structure:
gitextract_ijdyodk9/
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── README.md
├── examples/
│ ├── .babelrc
│ ├── .editorconfig
│ ├── .eslintrc.js
│ ├── .postcssrc.js
│ ├── README.md
│ ├── package.json
│ ├── project.config.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── app.json
│ │ ├── main.js
│ │ └── pages/
│ │ ├── demos/
│ │ │ ├── bar.vue
│ │ │ ├── boxplot.vue
│ │ │ ├── funnel.vue
│ │ │ ├── gauge.vue
│ │ │ ├── graph.vue
│ │ │ ├── heatmap.vue
│ │ │ ├── k.vue
│ │ │ ├── lazyLoad.vue
│ │ │ ├── line.vue
│ │ │ ├── map/
│ │ │ │ ├── index.vue
│ │ │ │ └── mapData.js
│ │ │ ├── multiCharts.vue
│ │ │ ├── parallel.vue
│ │ │ ├── pie.vue
│ │ │ ├── radar.vue
│ │ │ ├── sankey.vue
│ │ │ ├── scatter.vue
│ │ │ ├── sunburst.vue
│ │ │ ├── themeRiver.vue
│ │ │ ├── tree.vue
│ │ │ └── treemap.vue
│ │ └── index.vue
│ └── static/
│ └── .gitkeep
├── package.json
├── src/
│ ├── echarts.vue
│ └── wx-canvas.js
└── types/
├── echarts.d.ts
└── index.d.ts
================================================
FILE CONTENTS
================================================
================================================
FILE: .editorconfig
================================================
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
================================================
FILE: .eslintrc.js
================================================
module.exports = {
root: true,
extends: 'airbnb-base',
parser: 'babel-eslint',
env: {
'browser': false,
},
plugins: [
'html',
],
parserOptions: {
sourceType: 'module',
allowImportExportEverywhere: true,
},
rules: {
'no-console': 0,
'prefer-rest-params': 0,
'class-methods-use-this': 0,
'no-underscore-dangle': 0,
'no-plusplus': 0
},
globals: {
wx: true,
},
};
================================================
FILE: .gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Typescript v1 declaration files
typings/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
#editor
.idea
.vscode
#others
dist/
package-lock.json
================================================
FILE: README.md
================================================
# 在微信小程序中使用 ECharts
> 本项目是 ECharts 的 Mpvue 小程序版本。开发者可以通过熟悉的 ECharts 配置方式及 Vue 语法，快速开发图表，满足各种可视化需求。
[](https://npmjs.org/package/mpvue-echarts)
[](https://npmjs.org/package/mpvue-echarts)
## 扫码体验
## 安装
``` bash
npm i mpvue-echarts
```
## 使用
``` vue
<template>
<div class="echarts-wrap">
<mpvue-echarts :echarts="echarts" :onInit="onInit" canvasId="demo-canvas" />
</div>
</template>
<script>
import echarts from 'echarts'
import mpvueEcharts from 'mpvue-echarts'
let chart = null;
function initChart(canvas, width, height) {
chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {}; // ECharts 配置项
chart.setOption(option);
return chart; // 返回 chart 后可以自动绑定触摸操作
}
export default {
components: {
mpvueEcharts
},
data () {
return {
echarts,
onInit: initChart
}
}
}
</script>
<style scoped>
.echarts-wrap {
width: 100%;
height: 300px;
}
</style>
```
这对于所有 ECharts 图表都是通用的，用户只需要修改上面 `option` 的内容，即可改变图表。`option` 的使用方法参见 [ECharts 配置项文档](http://echarts.baidu.com/option.html)。对于不熟悉 ECharts 的用户，可以参见 [5 分钟上手 ECharts](http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts) 教程。
## 属性
| 名称 | 类型 | 默认值 | 描述 |
| -------------|--------------- | ------------- | ------------- |
| echarts | Object | null | echarts 对象 |
| canvasId | String | ec-canvas | canvasId |
| onInit | Function | null | 初始化函数 |
| lazyLoad | Boolean | false | 懒加载 |
| disableTouch | Boolean | false | 禁用触摸事件 |
## FAQ
### [重要] 不要把 chart 实例赋值到 this（vue 实例） 上
### 如何获取图表实例？
`echarts.init` 返回的即为图表实例。
### 打包结果超过小程序大小限制？
使用自定义版 echarts，[官网定制](http://echarts.baidu.com/builder.html)
### 如何延迟加载图表？
参见 [examples/lazyLoad](./examples/src/pages/demos/lazyLoad.vue) 的例子，可以在获取数据后再初始化数据。
### 如何在一个页面中加载多个图表？
参见 [examples/multiCharts](./examples/src/pages/demos/multiCharts.vue) 的例子。
### 图表变空白？
尝试设置 `throttleTouch` 属性为 `true`。
### 如何使用 Tooltip？
目前，本项目已支持 ECharts Tooltip，但是由于 ECharts 相关功能尚未发版，因此当前需要使用原项目中 `ec-canvas/echarts.js`，这个文件包含了可以在微信中使用 Tooltip 的相关代码。目前在 ECharts 官网下载的 `echarts.js` 还不能直接替换使用，等 ECharts 正式发版后即可。
具体使用方法和 ECharts 相同，例子参见 `pages/line/index.js`。
### 文件太大怎么办？
本项目默认提供的 ECharts 文件是最新版本的包含所有组件文件，为了便于开发，提供的是未压缩的版本。远程调试或预览可以下载 [echarts.min.js](https://github.com/apache/incubator-echarts/blob/master/dist/echarts.min.js) 压缩版本。
发布时，如果对文件大小要求更高，可以在 [ECharts 在线定制](http://echarts.baidu.com/builder.html)网页下载仅包含必要组件的包，并且选择压缩。
### 打包时出错 `ERROR in static/js/vendor.js from UglifyJs`
参照以下配置使 babel 处理 mpvue-echarts
``` js
// webpack.base.conf.js
{
test: /\.js$/,
include: [
resolve('src'),
resolve('node_modules/mpvue-echarts')
],
use: [
'babel-loader',
{
loader: 'mpvue-loader',
options: {
checkMPEntry: true
}
}
]
}
```
## 微信版本要求
支持微信版本 >= 6.6.3，对应基础库版本 >= 1.9.91。尽可能使用更高版本的基础库版本。
调试的时候，需要在微信开发者工具中，将“详情”下的“调试基础库”设为 1.9.91 及以上版本。
发布前，需要在 [https://mp.weixin.qq.com](https://mp.weixin.qq.com) 的“设置”页面，将“基础库最低版本设置”设为 1.9.91。当用户微信版本过低的时候，会提示用户更新。
## 暂不支持的功能
ECharts 中的绝大部分功能都支持小程序版本，因此这里仅说明不支持的功能，以及存在的问题。
以下功能尚不支持，如果有相关需求请在 [issue](https://github.com/ecomfe/echarts-for-weixin/issues) 中向我们反馈，对于反馈人数多的需求将优先支持：
- 图片
- 多个 zlevel 分层
此外，目前还有一些 bug 尚未修复，部分需要小程序团队配合上线支持，但不影响基本的使用。已知的 bug 包括：
- 安卓平台：transform 的问题（会影响关系图边两端的标记位置、旭日图文字位置等）
- iOS 平台：半透明略有变深的问题
- iOS 平台：渐变色出现在定义区域之外的地方
如有其它问题，也欢迎在 [issue](https://github.com/ecomfe/echarts-for-weixin/issues) 中向我们反馈，谢谢！
================================================
FILE: examples/.babelrc
================================================
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-runtime"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["istanbul"]
}
}
}
================================================
FILE: examples/.editorconfig
================================================
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
================================================
FILE: examples/.eslintrc.js
================================================
// http://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
env: {
browser: false,
node: true,
es6: true
},
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
extends: 'standard',
// required to lint *.vue files
plugins: [
'html'
],
// add your custom rules here
'rules': {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
},
globals: {
App: true,
Page: true,
wx: true,
getApp: true,
getPage: true
}
}
================================================
FILE: examples/.postcssrc.js
================================================
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
"plugins": {
"postcss-mpvue-wxss": {}
}
}
================================================
FILE: examples/README.md
================================================
# mpvue-echart-example
> mpvue-echarts 使用示例
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build -- --analyze
```
示例使用 mpvue-packager 进行构建，具体配置请查阅[相关文档](https://github.com/F-loat/mpvue-packager)
================================================
FILE: examples/package.json
================================================
{
"name": "mpvue-echarts-example",
"version": "1.0.0",
"description": "mpvue-echarts 使用示例",
"author": "F-loat <945852046@qq.com>",
"private": true,
"scripts": {
"start": "npm run dev",
"dev": "mpvue dev",
"build": "mpvue build",
"lint": "eslint --fix --ext .js,.vue src"
},
"dependencies": {
"echarts": "^4.0.4",
"mpvue": "^1.0.0",
"mpvue-echarts": "^0.2.3"
},
"devDependencies": {
"mpvue-packager": "^0.2.0",
"mpvue-packager-eslint-standard": "^0.2.0",
"mpvue-packager-mp-plugin": "^0.2.0",
"mpvue-template-compiler": "^1.0.0"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
================================================
FILE: examples/project.config.json
================================================
{
"description": "项目配置文件。",
"setting": {
"urlCheck": true,
"es6": true,
"postcss": true,
"minified": true,
"newFeature": true
},
"miniprogramRoot": "dist/",
"compileType": "miniprogram",
"appid": "touristappid",
"projectname": "mpvue-echart-example",
"condition": {
"search": {
"current": -1,
"list": []
},
"conversation": {
"current": -1,
"list": []
},
"game": {
"currentL": -1,
"list": []
},
"miniprogram": {
"current": -1,
"list": []
}
}
}
================================================
FILE: examples/src/App.vue
================================================
<script>
export default {
mpType: 'app'
}
</script>
<style>
.container {
height: 100vh;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10rpx 0;
box-sizing: border-box;
flex-wrap: wrap;
background-color: #fff;
}
</style>
================================================
FILE: examples/src/app.json
================================================
{
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"pages": [
{
"path": "/pages/index",
"config": {
"navigationBarTitleText": "MpvueEcharts示例"
}
},
{
"path": "/pages/demos/bar",
"config": {
"navigationBarTitleText": "柱状图"
}
},
{
"path": "/pages/demos/scatter",
"config": {
"navigationBarTitleText": "散点图"
}
},
{
"path": "/pages/demos/pie",
"config": {
"navigationBarTitleText": "饼图"
}
},
{
"path": "/pages/demos/line",
"config": {
"navigationBarTitleText": "折线图"
}
},
{
"path": "/pages/demos/funnel",
"config": {
"navigationBarTitleText": "漏斗图"
}
},
{
"path": "/pages/demos/gauge",
"config": {
"navigationBarTitleText": "仪表盘"
}
},
{
"path": "/pages/demos/k",
"config": {
"navigationBarTitleText": "线图"
}
},
{
"path": "/pages/demos/radar",
"config": {
"navigationBarTitleText": "雷达图"
}
},
{
"path": "/pages/demos/heatmap",
"config": {
"navigationBarTitleText": "热力图"
}
},
{
"path": "/pages/demos/tree",
"config": {
"navigationBarTitleText": "树图"
}
},
{
"path": "/pages/demos/treemap",
"config": {
"navigationBarTitleText": "矩形树图"
}
},
{
"path": "/pages/demos/sunburst",
"config": {
"navigationBarTitleText": "旭日图"
}
},
{
"path": "/pages/demos/map",
"config": {
"navigationBarTitleText": "地图"
}
},
{
"path": "/pages/demos/graph",
"config": {
"navigationBarTitleText": "关系图"
}
},
{
"path": "/pages/demos/boxplot",
"config": {
"navigationBarTitleText": "箱型图"
}
},
{
"path": "/pages/demos/parallel",
"config": {
"navigationBarTitleText": "平行坐标图"
}
},
{
"path": "/pages/demos/sankey",
"config": {
"navigationBarTitleText": "桑基图"
}
},
{
"path": "/pages/demos/themeRiver",
"config": {
"navigationBarTitleText": "主题河流图"
}
},
{
"path": "/pages/demos/lazyLoad",
"config": {
"navigationBarTitleText": "延迟加载图表"
}
},
{
"path": "/pages/demos/multiCharts",
"config": {
"navigationBarTitleText": "一个页面中多个图表"
}
}
]
}
================================================
FILE: examples/src/main.js
================================================
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
const app = new Vue(App)
app.$mount()
================================================
FILE: examples/src/pages/demos/bar.vue
================================================
<template>
<div class="container">
<div class="wrap">
<mpvue-echarts :echarts="echarts" :onInit="onInit" />
</div>
</div>
</template>
<script>
import * as echarts from 'echarts/dist/echarts.simple.min'
import mpvueEcharts from 'mpvue-echarts'
let chart = null
function initChart (canvas, width, height) {
chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart)
var option = {
color: ['#37a2da', '#32c5e9', '#67e0e3'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
confine: true
},
legend: {
data: ['热度', '正面', '负面']
},
grid: {
left: 20,
right: 20,
bottom: 15,
top: 40,
containLabel: true
},
xAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: '#999'
}
},
axisLabel: {
color: '#666'
}
}
],
yAxis: [
{
type: 'category',
axisTick: { show: false },
data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
axisLine: {
lineStyle: {
color: '#999'
}
},
axisLabel: {
color: '#666'
}
}
],
series: [
{
name: '热度',
type: 'bar',
label: {
normal: {
show: true,
position: 'inside'
}
},
data: [300, 270, 340, 344, 300, 320, 310],
itemStyle: {
emphasis: {
color: '#37a2da'
}
}
},
{
name: '正面',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true
}
},
data: [120, 102, 141, 174, 190, 250, 220],
itemStyle: {
emphasis: {
color: '#32c5e9'
}
}
},
{
name: '负面',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'left'
}
},
data: [-20, -32, -21, -34, -90, -130, -110],
itemStyle: {
emphasis: {
color: '#67e0e3'
}
}
}
]
}
chart.setOption(option)
return chart
}
export default {
data () {
return {
echarts,
onInit: initChart
}
},
components: {
mpvueEcharts
},
onShareAppMessage () {}
}
</script>
<style scoped>
.wrap {
width: 100%;
height: 300px;
}
</style>
================================================
FILE: examples/src/pages/demos/boxplot.vue
================================================
<template>
<div class="container">
<div class="wrap">
<mpvue-echarts :echarts="echarts" :onInit="onInit" />
</div>
</div>
</template>
<script>
import * as echarts from 'echarts/dist/echarts.min'
import mpvueEcharts from 'mpvue-echarts'
function initChart (canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart)
var option = {
title: {
text: 'Dispersion of house price\naccording to the number of bedrooms',
x: 'center',
y: 10,
textStyle: {
color: '#3259B8',
fontSize: 16,
fontWeight: 'normal'
}
},
tooltip: {
trigger: 'item',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '15%',
right: '10%'
},
xAxis: {
type: 'category',
data: ['1 bedroom', '2 bedrooms', '3 bedrooms', '4 bedrooms', '5 bedrooms', '6 bedrooms'],
nameTextStyle: {
color: '#3259B8',
fontSize: 14
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#3259B8'
}
},
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
nameTextStyle: {
color: '#3259B8',
fontSize: 14
},
axisLabel: {
formatter: '{value}\nCNY/㎡'
},
axisLine: {
lineStyle: {
color: '#3259B8'
}
},
splitLine: {
lineStyle: {
color: '#A7BAFA'
}
}
},
series: [{
name: 'boxplot',
type: 'boxplot',
data: [
[30645,
53490,
66640.5,
89123,
159949
],
[19464,
46454,
59139,
83479,
179440
],
[16704,
46041,
60155,
86818,
159980
],
[21543,
41619.75,
58819.5,
87540,
159978
],
[15202,
35757,
44721,
59916.5,
159825
],
[22158,
34754.5,
49718,
71637,
139972
]
],
itemStyle: {
normal: {
borderColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#F02FC2' // 0% 处的颜色
}, {
offset: 1,
color: '#3EACE5' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
borderWidth: 2,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(240,47,194,0.7)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(62,172,299,0.7)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
},
tooltip: {
formatter: function (param) {
return [
'Upper: ' + param.data[5] + ' CNY/㎡',
'Q3: ' + param.data[4] + ' CNY/㎡',
'Median: ' + param.data[3] + ' CNY/㎡',
'Q1: ' + param.data[2] + ' CNY/㎡',
'Lower: ' + param.data[1] + ' CNY/㎡'
].join('<br/>')
}
}
}
]
}
chart.setOption(option)
return chart
}
export default {
data () {
return {
echarts,
onInit: initChart
}
},
components: {
mpvueEcharts
},
onShareAppMessage () {}
}
</script>
<style scoped>
.wrap {
width: 100%;
height: 300px;
}
</style>
================================================
FILE: examples/src/pages/demos/funnel.vue
================================================
<template>
<div class="container">
<div class="wrap">
<mpvue-echarts :echarts="echarts" :onInit="onInit" />
</div>
</div>
</template>
<script>
import * as echarts from 'echarts/dist/echarts.min'
import mpvueEcharts from 'mpvue-echarts'
function initChart (canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart)
var option = {
backgroundColor: '#ffffff',
color: ['#37A2DA', '#32C5E9', '#67E0E3', '#91F2DE', '#FFDB5C', '#FF9F7F'],
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}%'
},
legend: {
orient: 'vertical',
left: 10,
data: ['展现', '点击', '访问', '咨询', '订单']
},
calculable: true,
series: [
{
name: '漏斗图',
type: 'funnel',
width: '40%',
height: '45%',
left: '5%',
top: '50%',
data: [{ value: 100, name: '展现' },
{ value: 80, name: '点击' },
{ value: 60, name: '访问' },
{ value: 30, name: '咨询' },
{ value: 10, name: '订单' }
]
},
{
name: '金字塔',
type: 'funnel',
width: '40%',
height: '45%',
left: '5%',
top: '5%',
sort: 'ascending',
data: [
{ value: 60, name: '访问' },
{ value: 30, name: '咨询' },
{ value: 10, name: '订单' },
{ value: 80, name: '点击' },
{ value: 100, name: '展现' }
]
},
{
name: '漏斗图',
type: 'funnel',
width: '40%',
height: '45%',
left: '55%',
top: '5%',
label: {
normal: {
position: 'left'
}
},
data: [
{ value: 60, name: '访问' },
{ value: 30, name: '咨询' },
{ value: 10, name: '订单' },
{ value: 80, name: '点击' },
{ value: 100, name: '展现' }
]
},
{
name: '金字塔',
type: 'funnel',
width: '40%',
height: '45%',
left: '55%',
top: '50%',
sort: 'ascending',
label: {
normal: {
position: 'left'
}
},
data: [
{ value: 60, name: '访问' },
{ value: 30, name: '咨询' },
{ value: 10, name: '订单' },
{ value: 80, name: '点击' },
{ value: 100, name: '展现' }
]
}
]
}
chart.setOption(option)
return chart
}
export default {
data () {
return {
echarts,
onInit: initChart
}
},
components: {
mpvueEcharts
},
onShareAppMessage () {}
}
</script>
<style scoped>
.wrap {
width: 100%;
height: 300px;
}
</style>
================================================
FILE: examples/src/pages/demos/gauge.vue
================================================
<template>
<div class="container">
<div class="wrap">
<mpvue-echarts :echarts="echarts" :onInit="onInit" />
</div>
</div>
</template>
<script>
import * as echarts from 'echarts/dist/echarts.min'
import mpvueEcharts from 'mpvue-echarts'
function initChart (canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart)
var option = {
backgroundColor: '#ffffff',
color: ['#37A2DA', '#32C5E9', '#67E0E3'],
series: [{
name: '业务指标',
type: 'gauge',
detail: {
formatter: '{value}%'
},
axisLine: {
show: true,
lineStyle: {
width: 30,
shadowBlur: 0,
color: [
[0.3, '#67e0e3'],
[0.7, '#37a2da'],
[1, '#fd666d']
]
}
},
data: [{
value: 40,
name: '完成率'
}]
}]
}
chart.setOption(option, true)
return chart
}
export default {
data () {
return {
echarts,
onInit: initChart
}
},
components: {
mpvueEcharts
},
onShareAppMessage () {}
}
</script>
<style scoped>
.wrap {
width: 100%;
height: 300px;
}
</style>
================================================
FILE: examples/src/pages/demos/graph.vue
================================================
<template>
<div class="container">
<div class="wrap">
<mpvue-echarts :echarts="echarts" :onInit="onInit" />
</div>
</div>
</template>
<script>
import * as echarts from 'echarts/dist/echarts.min'
import mpvueEcharts from 'mpvue-echarts'
function initChart (canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart)
var option = {
color: ['#37A2DA', '#32C5E9', '#67E0E3', '#91F2DE', '#FFDB5C', '#FF9F7F'],
title: {
text: 'Graph 简单示例'
},
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series: [
{
type: 'graph',
layout: 'none',
symbolSize: 50,
roam: true,
label: {
normal: {
show: true
}
},
// edgeSymbol: ['circle', 'arrow'],
// edgeSymbolSize: [4, 10],
edgeLabel: {
normal: {
textStyle: {
fontSize: 20
}
}
},
data: [{
name: '节点1',
x: 300,
y: 300,
itemStyle: {
color: '#37A2DA'
}
}, {
name: '节点2',
x: 800,
y: 300,
itemStyle: {
color: '#32C5E9'
}
}, {
name: '节点3',
x: 550,
y: 100,
itemStyle: {
color: '#9FE6B8'
}
}, {
name: '节点4',
x: 550,
y: 500,
itemStyle: {
color: '#FF9F7F'
}
}],
// links: [],
links: [{
source: 0,
target: 1,
symbolSize: [5, 20],
label: {
normal: {
show: true
}
},
lineStyle: {
normal: {
width: 4,
curveness: 0.2
}
}
}, {
source: '节点2',
target: '节点1',
label: {
normal: {
show: true
}
},
lineStyle: {
normal: { curveness: 0.2 }
}
}, {
source: '节点1',
target: '节点3'
}, {
source: '节点2',
target: '节点3'
}, {
source: '节点2',
target: '节点4'
}, {
source: '节点1',
target: '节点4'
}],
lineStyle: {
normal: {
opacity: 0.9,
width: 2,
curveness: 0
}
}
}
]
}
chart.setOption(option)
return chart
}
export default {
data () {
return {
echarts,
onInit: initChart
}
},
components: {
mpvueEcharts
},
onShareAppMessage () {}
}
</script>
<style scoped>
.wrap {
width: 100%;
height: 300px;
}
</style>
================================================
FILE: examples/src/pages/demos/heatmap.vue
================================================
<template>
<div class="container">
<div class="wrap">
<mpvue-echarts :echarts="echarts" :onInit="onInit" />
</div>
</div>
</template>
<script>
import * as echarts from 'echarts/dist/echarts.min'
import mpvueEcharts from 'mpvue-echarts'
function initChart (canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart)
const model = {
yCates: ['Saturday', 'Friday', 'Thursday',
'Wednesday', 'Tuesday', 'Monday',
'Sunday'],
xCates: ['1', '2', '3', '4', '5'],
data: [
// [yCateIndex, xCateIndex, value]
[0, 0, 5], [0, 1, 7], [0, 2, 3], [0, 3, 5], [0, 4, 2],
[1, 0, 1], [1, 1, 2], [1, 2, 4], [1, 3, 8], [1, 4, 2],
[2, 0, 2], [2, 1, 3], [2, 2, 8], [2, 3, 6], [2, 4, 7],
[3, 0, 3], [3, 1, 7], [3, 2, 5], [3, 3, 1], [3, 4, 6],
[4, 0, 3], [4, 1, 2], [4, 2, 7], [4, 3, 8], [4, 4, 9],
[5, 0, 2], [5, 1, 2], [5, 2, 3], [5, 3, 4], [5, 4, 7],
[6, 0, 6], [6, 1, 5], [6, 2, 3], [6, 3, 1], [6, 4, 2]
]
}
const data = model.data.map(function (item) {
return [item[1], item[0], item[2] || '-']
})
const option = {
tooltip: {
position: 'top'
},
animation: false,
grid: {
bottom: 60,
top: 10,
left: 80
},
xAxis: {
type: 'category',
data: model.xCates
},
yAxis: {
type: 'category',
data: model.yCates
},
visualMap: {
min: 1,
max: 10,
show: false,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: 10,
inRange: {
color: ['#37A2DA', '#32C5E9', '#67E0E3', '#91F2DE', '#FFDB5C', '#FF9F7F']
}
},
series: [{
name: 'Punch Card',
type: 'heatmap',
data: data,
label: {
normal: {
show: true
}
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
}
chart.setOption(option)
return chart
}
export default {
data () {
return {
echarts,
onInit: initChart
}
},
components: {
mpvueEcharts
},
onShareAppMessage () {}
}
</script>
<style scoped>
.wrap {
width: 100%;
height: 300px;
}
</style>
================================================
FILE: examples/src/pages/demos/k.vue
================================================
<template>
<div class="container">
<div class="wrap">
<mpvue-echarts :echarts="echarts" :onInit="onInit" />
</div>
</div>
</template>
<script>
import * as echarts from 'echarts/dist/echarts.min'
import mpvueEcharts from 'mpvue-echarts'
function initChart (canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart)
var option = {
title: {
text: 'K 线图'
},
xAxis: {
data: ['10:00', '10:30', '11:00', '11:30', '13:00', '13:30', '14:00']
},
yAxis: {},
series: [{
type: 'k',
data: [
[100, 200, 40, 250],
[80, 90, 66, 100],
[90, 40, 33, 110],
[50, 60, 40, 80],
[200, 180, 160, 200],
[100, 200, 40, 250],
[80, 90, 66, 100]
],
itemStyle: {
normal: {
color: '#ff0000',
color0: '#00ff00',
borderWidth: 1,
opacity: 1
}
}
}]
}
chart.setOption(option)
return chart
}
export default {
data () {
return {
echarts,
onInit: initChart
}
},
components: {
mpvueEcharts
},
onShareAppMessage () {}
}
</script>
<style scoped>
.wrap {
width: 100%;
height: 300px;
}
</style>
================================================
FILE: examples/src/pages/demos/lazyLoad.vue
================================================
<template>
<div class="container">
<button @click="initChart">初始化</button>
<div class="wrap">
<mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleInit" ref="echarts" />
</div>
</div>
</template>
<script>
import * as echarts from 'echarts/dist/echarts.simple.min'
import mpvueEcharts from 'mpvue-echarts'
let chart = null
export default {
data () {
return {
option: null,
echarts
}
},
components: {
mpvueEcharts
},
methods: {
initChart () {
this.option = {
color: ['#37a2da', '#32c5e9', '#67e0e3'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data: ['热度', '正面', '负面']
},
grid: {
left: 20,
right: 20,
bottom: 15,
top: 40,
containLabel: true
},
xAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: '#999'
}
},
axisLabel: {
color: '#666'
}
}
],
yAxis: [
{
type: 'category',
axisTick: { show: false },
data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
axisLine: {
lineStyle: {
color: '#999'
}
},
axisLabel: {
color: '#666'
}
}
],
series: [
{
name: '热度',
type: 'bar',
label: {
normal: {
show: true,
position: 'inside'
}
},
data: [300, 270, 340, 344, 300, 320, 310],
itemStyle: {
emphasis: {
color: '#37a2da'
}
}
},
{
name: '正面',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true
}
},
data: [120, 102, 141, 174, 190, 250, 220],
itemStyle: {
emphasis: {
color: '#32c5e9'
}
}
},
{
name: '负面',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'left'
}
},
data: [-20, -32, -21, -34, -90, -130, -110],
itemStyle: {
emphasis: {
color: '#67e0e3'
}
}
}
]
}
this.$refs.echarts.init()
},
handleInit (canvas, width, height) {
chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart)
chart.setOption(this.option)
return chart
}
},
onShareAppMessage () {}
}
</script>
<style scoped>
.wrap {
width: 100%;
height: 300px;
}
</style>
================================================
FILE: examples/src/pages/demos/line.vue
================================================
<template>
<div class="container">
<div class="wrap">
<mpvue-echarts :echarts="echarts" :onInit="onInit" />
</div>
</div>
</template>
<script>
import * as echarts from 'echarts/dist/echarts.simple.min'
import mpvueEcharts from 'mpvue-echarts'
function initChart (canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart)
var option = {
backgroundColor: '#fff',
color: ['#37A2DA', '#67E0E3', '#9FE6B8'],
tooltip: {
show: true,
trigger: 'axis'
},
title: {
text: '测试下面legend的红色区域不应被裁剪',
left: 'center'
},
legend: {
data: ['A', 'B', 'C'],
top: 50,
left: 'center',
backgroundColor: 'red',
z: 100
},
grid: {
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// show: false
},
yAxis: {
x: 'center',
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
}
// show: false
},
series: [{
name: 'A',
type: 'line',
smooth: true,
data: [18, 36, 65, 30, 78, 40, 33]
}, {
name: 'B',
type: 'line',
smooth: true,
data: [12, 50, 51, 35, 70, 30, 20]
}, {
name: 'C',
type: 'line',
smooth: true,
data: [10, 30, 31, 50, 40, 20, 10]
}]
}
chart.setOption(option)
return chart
}
export default {
data () {
return {
echarts,
onInit: initChart
}
},
components: {
mpvueEcharts
},
onShareAppMessage () {}
}
</script>
<style scoped>
.wrap {
width: 100%;
height: 300px;
}
</style>
================================================
FILE: examples/src/pages/demos/map/index.vue
================================================
<template>
<div class="container">
<div class="wrap">
<mpvue-echarts :echarts="echarts" :onInit="onInit" />
</div>
</div>
</template>
<script>
import * as echarts from 'echarts/dist/echarts.min'
import mpvueEcharts from 'mpvue-echarts'
import geoJson from './mapData.js'
function initChart (canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart)
echarts.registerMap('henan', geoJson)
const option = {
tooltip: {
trigger: 'item'
},
visualMap: {
min: 0,
max: 100,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本，默认为数值文本
calculable: true
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
},
series: [{
type: 'map',
mapType: 'henan',
label: {
normal: {
show: true
},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
itemStyle: {
normal: {
borderColor: '#389BB7',
areaColor: '#fff'
},
emphasis: {
areaColor: '#389BB7',
borderWidth: 0
}
},
animation: false,
data: [
{ name: '郑州市', value: 100 },
{ name: '洛阳市', value: 10 },
{ name: '开封市', value: 20 },
{ name: '信阳市', value: 30 },
{ name: '驻马店市', value: 40 },
{ name: '南阳市', value: 41 },
{ name: '周口市', value: 15 },
{ name: '许昌市', value: 25 },
{ name: '平顶山市', value: 35 },
{ name: '新乡市', value: 35 },
{ name: '漯河市', value: 35 },
{ name: '商丘市', value: 35 },
{ name: '三门峡市', value: 35 },
{ name: '济源市', value: 35 },
{ name: '焦作市', value: 35 },
{ name: '安阳市', value: 35 },
{ name: '鹤壁市', value: 35 },
{ name: '濮阳市', value: 35 },
{ name: '开封市', value: 45 }
]
}]
}
chart.setOption(option)
return chart
}
export default {
data () {
return {
echarts,
onInit: initChart
}
},
components: {
mpvueEcharts
},
onShareAppMessage () {}
}
</script>
<style scoped>
.wrap {
width: 100%;
height: 300px;
}
</style>
================================================
FILE: examples/src/pages/demos/map/mapData.js
================================================
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[MGUIQCOAAUKGAOB]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': ['@@LKJCXMH²CTBPJTN`dJFL@N@NGTIdYPGU|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^CPAHBVLXzDTNBZ'], '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@OLEDYBEJGKhA@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@LDBVFFLBXERBVCLEHIJeBUJMNQACQMGOESOIaGKW_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@KDAHLJbFJ@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\\QJCILEHMF]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@ZIVSLiriALCDCBIAG@CBADEDEACCSEEFELHL@BEDEBEBmAk@MZKLGJETXLRA\\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[@_HVSBKJIFOAICG@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@JDPBJELITAU`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{RVOHcZSJMHM@K@IE_cSMOISA±DGWNIDKLYNINCJAD[E]IO@GBYRSHSNOHQ@SCUKUGQBKC]BYPSNKBICECEEEGqkQUCMGGMISGuB[HOCuWQG{K_CsFKDOPS^UTGDYFQ@_COGMM@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@ngBLIHAFCZKF@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`HpLDRBRDXC\\AJER@FFFLHFRHVDHFLHDVHJABD@PJfJ^GlFTBH@NF@PXTI@CDBBFFbVbJRCT@D@RKPCL@HDDFHNvVF@^KL@HDZTZJ`JtHHDn\\ZXzLDJBACADIGA@ADAAABAAOC@ACC@@AA@BOIABGC@BIB@DKI@AGC@AEA@@AV@KGMB@BEB@CB@@GFC@MAEA@AOEKUFOgESCmCMAAGCO@N_@wKOBCCA@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@IOSIOCABSEEKCWCc\\YFCDCHGTQVZZFLf`GhEDSDKFADAFLV@RDRFJABCBkEIBGD@HDNFHTLVFFFDVAhCNAZE^GNKFJID[RIFCFAHBRIJEDABBJPRHRFBRBNDBBBLBDDDLBFFApOT@FJJ@FO\\ILOHKNA^@FDHHHHBVBDBDLL@FN\\VRRH^BPEHEBOBCBBTAN@FDFDDVBNHNJDTNRBRN^@FALGPAJPd@LFJDJHJ@F@JKX@DHN@FGFADBDA@EEBHCGG@BJCBBNFBFH@DF@BNC@@BABaNIBSBMDmTXDDLJDFHFBJ@FHDBH@TFNG^ARHZTBJETJhCR@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\\@IEQEIKICEAICCOEACPBQBCJ@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`HLJbTPPFNHDRBMRINAVIfGJKFUDQAWFKAEEAUKCI@M\\EHGDAHBJLJJFGLGDMB_VUDCDK@CFATABUCG@ABM^GBMCIGBMAMKEO@ITWLMU@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`bHBEjAFBpzPLJLBJFDJDN@fIdYPMNIZBZNTFpBZL`h\\pJZ@`CTBFFHJBV@VINKX[DCJ@JDtdR^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@DFFLFLFDhMFBTPJBDARKJCLJFHDFJBfAPCNENO'], ['@@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`SfWTMHCNFLAJEFIFQBFK@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@AFExSLTJBTjBPHBbLX`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\\JHDBPANT@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^mEaGCAQAEGEC@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@IJCHCExFNNBBFGR@LFBDFCXDPADCD[DCBCJKfG^CHEDI@ADAROBDPFDDBJDFLJFJFR@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@IDF@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\\BDNBAHHzAHDFRFHLBRTZBVLPTJDL@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@VEXAWDBJHH@HALELEJJDBJENCVMD@HDRDTBF@RKTIRABNBBJDR@hD`EfLDDGVWDIDADAN'], 'encodeOffsets': [[115320, 36098]] }, 'properties': { 'cp': [112.590047, 35.090378], 'name': '济源市', 'childNum': 1 } }], 'UTF8Encoding': true }
================================================
FILE: examples/src/pages/demos/multiCharts.vue
================================================
<template>
<div class="wrap">
<mpvue-echarts :echarts="echarts" :onInit="ecBarInit" canvasId="bar" />
<mpvue-echarts :echarts="echarts" :onInit="ecScatterInit" canvasId="scatter" />
</div>
</template>
<script>
import * as echarts from 'echarts/dist/echarts.min'
import mpvueEcharts from 'mpvue-echarts'
let barChart, scatterChart
function getBarOption () {
return {
color: ['#37a2da', '#32c5e9', '#67e0e3'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data: ['热度', '正面', '负面']
},
grid: {
left: 20,
right: 20,
bottom: 15,
top: 40,
containLabel: true
},
xAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: '#999'
}
},
axisLabel: {
color: '#666'
}
}
],
yAxis: [
{
type: 'category',
axisTick: { show: false },
data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
axisLine: {
lineStyle: {
color: '#999'
}
},
axisLabel: {
color: '#666'
}
}
],
series: [
{
name: '热度',
type: 'bar',
label: {
normal: {
show: true,
position: 'inside'
}
},
data: [300, 270, 340, 344, 300, 320, 310]
},
{
name: '正面',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true
}
},
data: [120, 102, 141, 174, 190, 250, 220]
},
{
name: '负面',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'left'
}
},
data: [-20, -32, -21, -34, -90, -130, -110]
}
]
}
}
function getScatterOption () {
var data = []
var data2 = []
for (var i = 0; i < 10; i++) {
data.push(
[
Math.round(Math.random() * 100),
Math.round(Math.random() * 100),
Math.round(Math.random() * 40)
]
)
data2.push(
[
Math.round(Math.random() * 100),
Math.round(Math.random() * 100),
Math.round(Math.random() * 100)
]
)
}
var axisCommon = {
axisLabel: {
textStyle: {
color: '#C8C8C8'
}
},
axisTick: {
lineStyle: {
color: '#fff'
}
},
axisLine: {
lineStyle: {
color: '#C8C8C8'
}
},
splitLine: {
lineStyle: {
color: '#C8C8C8',
type: 'solid'
}
}
}
return {
color: ['#FF7070', '#60B6E3'],
backgroundColor: '#eee',
xAxis: axisCommon,
yAxis: axisCommon,
legend: {
data: ['aaaa', 'bbbb']
},
visualMap: {
show: false,
max: 100,
inRange: {
symbolSize: [20, 70]
}
},
series: [{
type: 'scatter',
name: 'aaaa',
data: data
},
{
name: 'bbbb',
type: 'scatter',
data: data2
}
],
animationDelay: function (idx) {
return idx * 50
},
animationEasing: 'elasticOut'
}
}
export default {
data () {
return {
echarts,
ecBarInit: function (canvas, width, height) {
barChart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(barChart)
barChart.setOption(getBarOption())
return barChart
},
ecScatterInit: function (canvas, width, height) {
scatterChart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(scatterChart)
scatterChart.setOption(getScatterOption())
return scatterChart
}
}
},
components: {
mpvueEcharts
},
onShareAppMessage () {}
}
</script>
<style scoped>
.wrap {
width: 100%;
height: 400px;
}
</style>
================================================
FILE: examples/src/pages/demos/parallel.vue
================================================
<template>
<div class="container">
<div class="wrap">
<mpvue-echarts :echarts="echarts" :onInit="onInit" />
</div>
</div>
</template>
<script>
import * as echarts from 'echarts/dist/echarts.min'
import mpvueEcharts from 'mpvue-echarts'
function initChart (canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart)
var option = {
color: ['#37a2da'],
parallelAxis: [
{ dim: 0, name: 'Price' },
{ dim: 1, name: 'Net Weight' },
{ dim: 2, name: 'Amount' },
{
dim: 3,
name: 'Score',
type: 'category',
data: ['Excellent', 'Good', 'OK', 'Bad']
}
],
parallel: {
left: 40,
right: 80,
top: 50,
bottom: 20,
parallelAxisDefault: {
axisLine: {
lineStyle: {
color: '#999'
}
},
axisLabel: {
color: '#666'
},
nameTextStyle: {
color: '#666'
}
}
},
series: {
type: 'parallel',
lineStyle: {
width: 4
},
data: [
[12.99, 100, 82, 'Good'],
[9.99, 80, 77, 'OK'],
[20, 120, 60, 'Excellent'],
[3.2, 40, 70, 'OK']
]
}
}
chart.setOption(option)
return chart
}
export default {
data () {
return {
echarts,
onInit: initChart
}
},
components: {
mpvueEcharts
},
onShareAppMessage () {}
}
</script>
<style scoped>
.wrap {
width: 100%;
height: 300px;
}
</style>
================================================
FILE: examples/src/pages/demos/pie.vue
================================================
<template>
<div class="container">
<div class="wrap">
<mpvue-echarts :echarts="echarts" :onInit="echartInit" />
</div>
</div>
</template>
<script>
import * as echarts from 'echarts/dist/echarts.simple.min'
import mpvueEcharts from 'mpvue-echarts'
function initChart (canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart)
var option = {
backgroundColor: '#ffffff',
color: ['#37A2DA', '#32C5E9', '#67E0E3', '#91F2DE', '#FFDB5C', '#FF9F7F'],
series: [{
label: {
normal: {
fontSize: 14
}
},
type: 'pie',
center: ['50%', '50%'],
radius: [0, '60%'],
data: [{
value: 55,
name: '北京'
}, {
value: 20,
name: '武汉'
}, {
value: 10,
name: '杭州'
}, {
value: 20,
name: '广州'
}, {
value: 38,
name: '上海'
}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 2, 2, 0.3)'
}
}
}]
}
chart.setOption(option)
return chart
}
export default {
data () {
return {
echarts
}
},
components: {
mpvueEcharts
},
methods: {
echartInit (canvas, width, height) {
return initChart(canvas, width, height)
}
},
onShareAppMessage () {}
}
</script>
<style scoped>
.wrap {
width: 100%;
height: 300px;
}
</style>
================================================
FILE: examples/src/pages/demos/radar.vue
================================================
<template>
<div class="container">
<div class="wrap">
<mpvue-echarts :echarts="echarts" :onInit="onInit" />
</div>
</div>
</template>
<script>
import * as echarts from 'echarts/dist/echarts.min'
import mpvueEcharts from 'mpvue-echarts'
function initChart (canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart)
var option = {
backgroundColor: '#ffffff',
color: ['#37A2DA', '#FF9F7F'],
tooltip: {},
xAxis: {
show: false
},
yAxis: {
show: false
},
radar: {
// shape: 'circle',
indicator: [{
name: '食品',
max: 500
},
{
name: '玩具',
max: 500
},
{
name: '服饰',
max: 500
},
{
name: '绘本',
max: 500
},
{
name: '医疗',
max: 500
},
{
name: '门票',
max: 500
}
]
},
series: [{
name: '预算 vs 开销',
type: 'radar',
data: [{
value: [430, 340, 500, 300, 490, 400],
name: '预算'
},
{
value: [300, 430, 150, 300, 420, 250],
name: '开销'
}
]
}]
}
chart.setOption(option)
return chart
}
export default {
data () {
return {
echarts,
onInit: initChart
}
},
components: {
mpvueEcharts
},
onShareAppMessage () {}
}
</script>
<style scoped>
.wrap {
width: 100%;
height: 300px;
}
</style>
================================================
FILE: examples/src/pages/demos/sankey.vue
================================================
<template>
<div class="container">
<div class="wrap">
<mpvue-echarts :echarts="echarts" :onInit="onInit" />
</div>
</div>
</template>
<script>
import * as echarts from 'echarts/dist/echarts.min'
import mpvueEcharts from 'mpvue-echarts'
function initChart (canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart)
var option = {
color: ['#37A2DA', '#32C5E9', '#67E0E3', '#91F2DE', '#92CEFF', '#6084E0'],
series: {
type: 'sankey',
layout: 'none',
data: [{
name: 'a'
}, {
name: 'b'
}, {
name: 'a1'
}, {
name: 'a2'
}, {
name: 'b1'
}, {
name: 'c'
}, {
name: 'd'
}, {
name: 'd1'
}, {
name: 'd2'
}, {
name: 'd3'
}],
links: [{
source: 'a',
target: 'a1',
value: 5
}, {
source: 'a',
target: 'a2',
value: 3
}, {
source: 'b',
target: 'b1',
value: 8
}, {
source: 'a',
target: 'b1',
value: 3
}, {
source: 'b1',
target: 'a1',
value: 1
}, {
source: 'd',
target: 'a2',
value: 1
}, {
source: 'd',
target: 'c',
value: 1
}, {
source: 'd1',
target: 'c',
value: 2
}, {
source: 'd2',
target: 'c',
value: 2
}, {
source: 'd',
target: 'd3',
value: 4
}, {
source: 'd2',
target: 'd3',
value: 1
}]
}
}
chart.setOption(option)
return chart
}
export default {
data () {
return {
echarts,
onInit: initChart
}
},
components: {
mpvueEcharts
},
onShareAppMessage () {}
}
</script>
<style scoped>
.wrap {
width: 100%;
height: 300px;
}
</style>
================================================
FILE: examples/src/pages/demos/scatter.vue
================================================
<template>
<div class="container">
<div class="wrap">
<mpvue-echarts :echarts="echarts" :onInit="onInit" />
</div>
</div>
</template>
<script>
import * as echarts from 'echarts/dist/echarts.min'
import mpvueEcharts from 'mpvue-echarts'
function initChart (canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart)
var data = []
var data2 = []
for (var i = 0; i < 10; i++) {
data.push(
[
Math.round(Math.random() * 100),
Math.round(Math.random() * 100),
Math.round(Math.random() * 40)
]
)
data2.push(
[
Math.round(Math.random() * 100),
Math.round(Math.random() * 100),
Math.round(Math.random() * 100)
]
)
}
var axisCommon = {
axisLabel: {
textStyle: {
color: '#C8C8C8'
}
},
axisTick: {
lineStyle: {
color: '#fff'
}
},
axisLine: {
lineStyle: {
color: '#C8C8C8'
}
},
splitLine: {
lineStyle: {
color: '#C8C8C8',
type: 'solid'
}
}
}
var option = {
color: ['#FF7070', '#60B6E3'],
backgroundColor: '#eee',
xAxis: axisCommon,
yAxis: axisCommon,
legend: {
data: ['aaaa', 'bbbb']
},
visualMap: {
show: false,
max: 100,
inRange: {
symbolSize: [20, 70]
}
},
series: [{
type: 'scatter',
name: 'aaaa',
data: data
},
{
name: 'bbbb',
type: 'scatter',
data: data2
}
],
animationDelay: function (idx) {
return idx * 50
},
animationEasing: 'elasticOut'
}
chart.setOption(option)
return chart
}
export default {
data () {
return {
echarts,
onInit: initChart
}
},
components: {
mpvueEcharts
},
onShareAppMessage () {}
}
</script>
<style scoped>
.wrap {
width: 100%;
height: 300px;
}
</style>
================================================
FILE: examples/src/pages/demos/sunburst.vue
================================================
<template>
<div class="container">
<div class="wrap">
<mpvue-echarts :echarts="echarts" :onInit="onInit" />
</div>
</div>
</template>
<script>
import * as echarts from 'echarts/dist/echarts.min'
import mpvueEcharts from 'mpvue-echarts'
function initChart (canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart)
var item1 = {
color: '#F54F4A'
}
var item2 = {
color: '#FF8C75'
}
var item3 = {
color: '#FFB499'
}
var data = [{
children: [{
value: 5,
children: [{
value: 1,
itemStyle: item1
}, {
value: 2
}, {
value: 1
}],
itemStyle: item1
}, {
value: 10,
children: [{
value: 6,
itemStyle: item3
}, {
value: 2,
itemStyle: item3
}, {
value: 1
}],
itemStyle: item1
}],
itemStyle: item1
}, {
value: 9,
children: [{
value: 4,
children: [{
value: 2,
itemStyle: item2
}],
itemStyle: item1
}, {
children: [{
value: 3
}],
itemStyle: item3
}],
itemStyle: item2
}, {
value: 7,
children: [{
children: [{
value: 1,
itemStyle: item3
}, {
value: 3,
itemStyle: item2
}, {
value: 2,
itemStyle: item1
}],
itemStyle: item3
}],
itemStyle: item1
}, {
children: [{
value: 6,
children: [{
value: 1,
itemStyle: item2
}, {
value: 2,
itemStyle: item1
}, {
value: 1,
itemStyle: item3
}],
itemStyle: item3
}, {
value: 3,
children: [{
value: 1
}, {
value: 1,
itemStyle: item2
}, {
value: 1
}],
itemStyle: item3
}],
itemStyle: item1
}]
var option = {
series: {
radius: ['15%', '80%'],
type: 'sunburst',
sort: null,
highlightPolicy: 'ancestor',
data: data,
label: {
rotate: 'radial'
},
levels: [],
itemStyle: {
color: '#ddd',
borderWidth: 2
}
},
silent: true
}
chart.setOption(option)
return chart
}
export default {
data () {
return {
echarts,
onInit: initChart
}
},
components: {
mpvueEcharts
},
onShareAppMessage () {}
}
</script>
<style scoped>
.wrap {
width: 100%;
height: 300px;
}
</style>
================================================
FILE: examples/src/pages/demos/themeRiver.vue
================================================
<template>
<div class="container">
<div class="wrap">
<mpvue-echarts :echarts="echarts" :onInit="onInit" />
</div>
</div>
</template>
<script>
import * as echarts from 'echarts/dist/echarts.min'
import mpvueEcharts from 'mpvue-echarts'
function initChart (canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart)
var option = {
color: ['#37A2DA', '#32C5E9', '#67E0E3', '#91F2DE', '#FFDB5C', '#FF9F7F'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: 'rgba(0,0,0,0.2)',
width: 1,
type: 'solid'
}
}
},
legend: {
data: ['DQ', 'TY', 'SS', 'QG', 'SY', 'DD']
},
singleAxis: {
top: 50,
bottom: 50,
axisTick: {},
axisLabel: {},
type: 'time',
axisPointer: {
animation: true,
label: {
show: true
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
opacity: 0.2
}
}
},
series: [
{
type: 'themeRiver',
itemStyle: {
emphasis: {
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.8)'
}
},
data: [['2015/11/08', 10, 'DQ'], ['2015/11/09', 15, 'DQ'], ['2015/11/10', 35, 'DQ'],
// ['2015/11/11',38,'DQ'],['2015/11/12',22,'DQ'],['2015/11/13',16,'DQ'],
['2015/11/14', 7, 'DQ'], ['2015/11/15', 2, 'DQ'], ['2015/11/16', 17, 'DQ'],
['2015/11/17', 33, 'DQ'], ['2015/11/18', 40, 'DQ'], ['2015/11/19', 32, 'DQ'],
['2015/11/20', 26, 'DQ'], ['2015/11/21', 35, 'DQ'], ['2015/11/22', 40, 'DQ'],
['2015/11/23', 32, 'DQ'], ['2015/11/24', 26, 'DQ'], ['2015/11/25', 22, 'DQ'],
// ['2015/11/26',16,'DQ'],['2015/11/27',22,'DQ'],['2015/11/28',10,'DQ'],
['2015/11/08', 35, 'TY'], ['2015/11/09', 36, 'TY'], ['2015/11/10', 37, 'TY'],
['2015/11/11', 22, 'TY'], ['2015/11/12', 24, 'TY'], ['2015/11/13', 26, 'TY'],
['2015/11/14', 34, 'TY'], ['2015/11/15', 21, 'TY'], ['2015/11/16', 18, 'TY'],
['2015/11/17', 45, 'TY'], ['2015/11/18', 32, 'TY'], ['2015/11/19', 35, 'TY'],
['2015/11/20', 30, 'TY'], ['2015/11/21', 28, 'TY'], ['2015/11/22', 27, 'TY'],
['2015/11/23', 26, 'TY'], ['2015/11/24', 15, 'TY'], ['2015/11/25', 30, 'TY'],
['2015/11/26', 35, 'TY'], ['2015/11/27', 42, 'TY'], ['2015/11/28', 42, 'TY'],
['2015/11/08', 21, 'SS'], ['2015/11/09', 25, 'SS'], ['2015/11/10', 27, 'SS'],
['2015/11/11', 23, 'SS'], ['2015/11/12', 24, 'SS'], ['2015/11/13', 21, 'SS'],
['2015/11/14', 35, 'SS'], ['2015/11/15', 39, 'SS'], ['2015/11/16', 40, 'SS'],
['2015/11/17', 36, 'SS'], ['2015/11/18', 33, 'SS'], ['2015/11/19', 43, 'SS'],
['2015/11/20', 40, 'SS'], ['2015/11/21', 34, 'SS'], ['2015/11/22', 28, 'SS'],
// ['2015/11/23',26,'SS'],['2015/11/24',37,'SS'],['2015/11/25',41,'SS'],
// ['2015/11/26',46,'SS'],['2015/11/27',47,'SS'],['2015/11/28',41,'SS'],
// ['2015/11/08',10,'QG'],['2015/11/09',15,'QG'],['2015/11/10',35,'QG'],
// ['2015/11/11',38,'QG'],['2015/11/12',22,'QG'],['2015/11/13',16,'QG'],
['2015/11/14', 7, 'QG'], ['2015/11/15', 2, 'QG'], ['2015/11/16', 17, 'QG'],
['2015/11/17', 33, 'QG'], ['2015/11/18', 40, 'QG'], ['2015/11/19', 32, 'QG'],
['2015/11/20', 26, 'QG'], ['2015/11/21', 35, 'QG'], ['2015/11/22', 40, 'QG'],
['2015/11/23', 32, 'QG'], ['2015/11/24', 26, 'QG'], ['2015/11/25', 22, 'QG'],
['2015/11/26', 16, 'QG'], ['2015/11/27', 22, 'QG'], ['2015/11/28', 10, 'QG'],
['2015/11/08', 10, 'SY'], ['2015/11/09', 15, 'SY'], ['2015/11/10', 35, 'SY'],
['2015/11/11', 38, 'SY'], ['2015/11/12', 22, 'SY'], ['2015/11/13', 16, 'SY'],
['2015/11/14', 7, 'SY'], ['2015/11/15', 2, 'SY'], ['2015/11/16', 17, 'SY'],
['2015/11/17', 33, 'SY'], ['2015/11/18', 40, 'SY'], ['2015/11/19', 32, 'SY'],
['2015/11/20', 26, 'SY'], ['2015/11/21', 35, 'SY'], ['2015/11/22', 4, 'SY'],
['2015/11/23', 32, 'SY'], ['2015/11/24', 26, 'SY'], ['2015/11/25', 22, 'SY'],
['2015/11/26', 16, 'SY'], ['2015/11/27', 22, 'SY'], ['2015/11/28', 10, 'SY'],
['2015/11/08', 10, 'DD'], ['2015/11/09', 15, 'DD'], ['2015/11/10', 35, 'DD'],
['2015/11/11', 38, 'DD'], ['2015/11/12', 22, 'DD'], ['2015/11/13', 16, 'DD'],
['2015/11/14', 7, 'DD'], ['2015/11/15', 2, 'DD'], ['2015/11/16', 17, 'DD'],
['2015/11/17', 33, 'DD'], ['2015/11/18', 4, 'DD'], ['2015/11/19', 32, 'DD'],
['2015/11/20', 26, 'DD'], ['2015/11/21', 35, 'DD'], ['2015/11/22', 40, 'DD'],
['2015/11/23', 32, 'DD'], ['2015/11/24', 26, 'DD'], ['2015/11/25', 22, 'DD'],
['2015/11/26', 16, 'DD'], ['2015/11/27', 22, 'DD'], ['2015/11/28', 10, 'DD']]
}
]
}
chart.setOption(option)
return chart
}
export default {
data () {
return {
echarts,
onInit: initChart
}
},
components: {
mpvueEcharts
},
onShareAppMessage () {}
}
</script>
<style scoped>
.wrap {
width: 100%;
height: 300px;
}
</style>
================================================
FILE: examples/src/pages/demos/tree.vue
================================================
<template>
<div class="container">
<div class="wrap">
<mpvue-echarts :echarts="echarts" :onInit="onInit" />
</div>
</div>
</template>
<script>
import * as echarts from 'echarts/dist/echarts.min'
import mpvueEcharts from 'mpvue-echarts'
function initChart (canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart)
var data1 = {
'name': 'root',
'children': [{
'name': 'a',
'children': [{
'name': 'a1'
}, {
'name': 'a2'
}, {
'name': 'a3'
}, {
'name': 'a4'
}]
}, {
'name': 'b',
'children': [{
'name': 'b1'
}, {
'name': 'b2'
}, {
'name': 'b3'
}, {
'name': 'b4'
}]
}, {
'name': 'c',
'children': [{
'name': 'c1'
}]
}, {
'name': 'd',
'children': [{
'name': 'd1'
}]
}]
}
var option = {
series: [{
type: 'tree',
initialTreeDepth: -1,
name: 'tree1',
data: [data1],
top: '5%',
left: '20%',
bottom: '2%',
right: '15%',
symbolSize: 10,
symbol: 'circle',
label: {
normal: {
position: 'left',
verticalAlign: 'middle',
align: 'right',
color: 'black'
}
}
}]
}
chart.setOption(option)
return chart
}
export default {
data () {
return {
echarts,
onInit: initChart
}
},
components: {
mpvueEcharts
},
onShareAppMessage () {}
}
</script>
<style scoped>
.wrap {
width: 100%;
height: 300px;
}
</style>
================================================
FILE: examples/src/pages/demos/treemap.vue
================================================
<template>
<div class="container">
<div class="wrap">
<mpvue-echarts :echarts="echarts" :onInit="onInit" />
</div>
</div>
</template>
<script>
import * as echarts from 'echarts/dist/echarts.min'
import mpvueEcharts from 'mpvue-echarts'
function initChart (canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart)
var data = []
for (var i = 0; i <= 360; i++) {
var t = i / 180 * Math.PI
var r = Math.sin(2 * t) * Math.cos(2 * t)
data.push([r, i])
}
var option = {
title: {
text: '2014年中国耕地质量',
left: 'center',
textStyle: {
color: '#1a1b4e',
fontStyle: 'normal',
fontSize: 24
},
subtext: '数据来源：国土资源部'
},
tooltip: {
formatter: '{b}:<br />耕地面积： {c}万公顷'
},
series: [{
name: '耕地等级',
type: 'treemap',
visibleMin: 100,
itemStyle: {
normal: {
label: {
show: true,
formatter: '{b}'
},
borderWidth: 2
},
emphasis: {
label: {
show: true
}
}
},
label: {
normal: {
fontSize: 14
}
},
data: [ // 注意，最外层是一个数组，而非从某个根节点开始。
{
value: 13509.74,
children: [{
value: 2389.25, // value字段的值，对应到面积大小。
// 也可以是数组，如 [2323, 43, 55]，则数组第一项对应到面积大小。
// 数组其他项可以用于额外的视觉映射，详情参见 series-treemp.levels。
id: 'someid-1', // id 不是必须设置的。
// 但是如果想使用 API 来改变某个节点，需要用 id 来定位。
name: '低等地 17.69%', // 显示在矩形中的描述文字。
children: [{
value: 1125.5,
id: 'someid-31',
name: '13等地'
}, {
value: 765.63,
id: 'someid-32',
name: '14等地'
}, {
value: 498.12,
id: 'someid-33',
name: '15等地'
}],
label: { // 此节点特殊的 label 定义（如果需要的话）。
// ... // label的格式参见 series-treemap.label。
},
itemStyle: { // 此节点特殊的 itemStyle 定义（如果需要的话）。
// ... // label的格式参见 series-treemap.itemStyle。
}
}, {
value: 7138.52,
id: 'someid-2',
name: '中等地 52.84%',
children: [{
value: 1410.69,
id: 'someid-31',
name: '9等地'
}, {
value: 1790.55,
id: 'someid-32',
name: '10等地'
}, {
value: 2045.43,
id: 'someid-33',
name: '11等地'
}, {
value: 1891.85,
id: 'someid-34',
name: '12等地'
}]
}, {
value: 3584.6,
id: 'someid-3',
name: '高等地 26.53%',
children: [{
value: 366.48,
id: 'someid-31',
name: '5等地'
}, {
value: 886.22,
id: 'someid-32',
name: '6等地'
}, {
value: 1143.89,
id: 'someid-33',
name: '7等地'
}, {
value: 1188.01,
id: 'someid-34',
name: '8等地'
}]
}, {
value: 397.38,
id: 'someid-4',
name: '优等地 2.94%',
children: [{
value: 48.84,
id: 'someid-31',
name: '1等地'
}, {
value: 59.93,
id: 'someid-32',
name: '2等地'
}, {
value: 115.85,
id: 'someid-33',
name: '3等地'
}, {
value: 172.76,
id: 'someid-34',
name: '4等地'
}]
}]
}
],
leafDepth: 2,
color: ['#FFA54F', '#FF8040', '#FFD39B', '#FF4500']
}]
}
chart.setOption(option)
return chart
}
export default {
data () {
return {
echarts,
onInit: initChart
}
},
components: {
mpvueEcharts
},
onShareAppMessage () {}
}
</script>
<style scoped>
.wrap {
width: 100%;
height: 300px;
}
</style>
================================================
FILE: examples/src/pages/index.vue
================================================
<template>
<div>
<div class="container">
<a class="link"
v-for="(chart, index) of charts"
v-if="chart.path !== '/pages/index'"
:key="index"
:href="chart.path">{{chart.config.navigationBarTitleText}}</a>
</div>
<ad unit-id="adunit-162e15806841e6e8"></ad>
</div>
</template>
<script>
import config from '@/app.json'
export default {
data () {
return {
charts: config.pages
}
},
onShareAppMessage () {}
}
</script>
<style scoped>
.link {
width: 50%;
text-align: center;
padding: 10px 0;
}
</style>
================================================
FILE: examples/static/.gitkeep
================================================
================================================
FILE: package.json
================================================
{
"name": "mpvue-echarts",
"version": "1.0.0",
"description": "适用于 Mpvue 的 ECharts 组件",
"main": "src/echarts.vue",
"typings": "types/index.d.ts",
"scripts": {
"lint": "eslint --format node_modules/eslint-friendly-formatter --ext .js,.vue src --fix",
"test": "echo \"Error: no test specified\" && exit 1"
},
"files": [
"src",
"types"
],
"repository": {
"type": "git",
"url": "git+https://github.com/F-loat/mpvue-echarts.git"
},
"keywords": [
"mpvue",
"echarts",
"wxapp"
],
"author": "F-loat <chaimaoyuan@foxmail.com>",
"license": "MIT",
"bugs": {
"url": "https://github.com/F-loat/mpvue-echarts/issues"
},
"homepage": "https://github.com/F-loat/mpvue-echarts#readme",
"devDependencies": {
"babel-eslint": "^8.2.2",
"eslint": "^4.19.1",
"eslint-config-airbnb-base": "^12.1.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-plugin-html": "^4.0.3",
"eslint-plugin-import": "^2.10.0"
}
}
================================================
FILE: src/echarts.vue
================================================
<template>
<canvas v-if="_canvasId" class="ec-canvas" type="2d" :id="_canvasId" :canvasId="_canvasId" @touchstart="touchStart"
@touchmove="touchMove" @touchend="touchEnd">
</canvas>
</template>
<script>
import WxCanvas from './wx-canvas';
function wrapTouch(event) {
for (let i = 0; i < event.touches.length; ++i) {
const touch = event.touches[i];
touch.offsetX = touch.x;
touch.offsetY = touch.y;
}
return event;
}
export default {
props: {
echarts: {
required: true,
type: Object,
default() {
return null;
},
},
onInit: {
type: Function,
default: null,
},
canvasId: {
type: String,
default: 'ec-canvas',
},
lazyLoad: {
type: Boolean,
default: false,
},
disableTouch: {
type: Boolean,
default: false,
},
},
onReady() {
if (!this.echarts) {
console.warn('组件需绑定 echarts 变量');
return;
}
if (!this.lazyLoad) this.init();
},
data() {
return {
tryQuery: 0,
};
},
computed: {
_canvasId() {
return this.canvasId.toLocaleLowerCase();
},
},
methods: {
init(callback) {
const query = wx.createSelectorQuery();
query
.select(`#${this._canvasId}`)
.fields({ node: true, size: true })
.exec((res) => {
if (!res[0] || !res[0].node) {
setTimeout(() => {
this.tryQuery++;
if (this.tryQuery >= 10) {
this.tryQuery = 0;
console.warn('canvas 节点始终未找到');
return;
}
this.init(callback);
}, 100);
return;
}
const canvasNode = res[0].node;
this.canvasNode = canvasNode;
console.log('canvas 节点', canvasNode);
const canvasDpr = wx.getSystemInfoSync().pixelRatio;
const canvasWidth = res[0].width;
const canvasHeight = res[0].height;
const ctx = canvasNode.getContext('2d');
const canvas = new WxCanvas(ctx, this.canvasId, true, canvasNode);
if (this.echarts.setPlatformAPI) {
this.echarts.setPlatformAPI({
createCanvas: () => canvas,
loadImage: (src, onload, onerror) => {
if (canvasNode.createImage) {
const image = canvasNode.createImage();
image.onload = onload;
image.onerror = onerror;
image.src = src;
return image;
}
console.error('加载图片依赖 `Canvas.createImage()` API，要求小程序基础库版本在 2.7.0 及以上。');
return null;
// PENDING fallback?
},
});
} else {
this.echarts.setCanvasCreator(() => canvas);
}
if (typeof callback === 'function') {
this.chart = callback(canvas, canvasWidth, canvasHeight, canvasDpr);
} else if (typeof this.onInit === 'function') {
this.chart = this.onInit(canvas, canvasWidth, canvasHeight, canvasDpr);
} else {
this.$emit('init', {
canvas,
canvasWidth,
canvasHeight,
canvasDpr,
});
}
});
},
canvasToTempFilePath(opt) {
const query = wx.createSelectorQuery();
query
.select(`#${this._canvasId}`)
.fields({ node: true, size: true })
.exec((res) => {
if (!res[0] || !res[0].node) {
setTimeout(() => {
this.tryQuery++;
if (this.tryQuery >= 10) {
this.tryQuery = 0;
console.warn('canvas 节点始终未找到');
return;
}
this.canvasToTempFilePath(opt);
}, 100);
return;
}
const canvasNode = res[0].node;
wx.canvasToTempFilePath({
...opt,
canvas: canvasNode,
});
});
},
touchStart(e) {
if (this.disableTouch || !this.chart || !e.touches.length) return;
const touch = e.touches[0];
const { handler } = this.chart.getZr();
handler.dispatch('mousedown', {
zrX: touch.x,
zrY: touch.y,
preventDefault: () => { },
stopImmediatePropagation: () => { },
stopPropagation: () => { },
});
handler.dispatch('mousemove', {
zrX: touch.x,
zrY: touch.y,
preventDefault: () => { },
stopImmediatePropagation: () => { },
stopPropagation: () => { },
});
handler.processGesture(wrapTouch(e), 'start');
},
touchMove(e) {
if (this.disableTouch || !this.chart || !e.touches.length) return;
const touch = e.touches[0];
const { handler } = this.chart.getZr();
handler.dispatch('mousemove', {
zrX: touch.x,
zrY: touch.y,
preventDefault: () => { },
stopImmediatePropagation: () => { },
stopPropagation: () => { },
});
handler.processGesture(wrapTouch(e), 'change');
},
touchEnd(e) {
if (this.disableTouch || !this.chart) return;
const touch = e.changedTouches ? e.changedTouches[0] : {};
const { handler } = this.chart.getZr();
handler.dispatch('mouseup', {
zrX: touch.x,
zrY: touch.y,
preventDefault: () => { },
stopImmediatePropagation: () => { },
stopPropagation: () => { },
});
handler.dispatch('click', {
zrX: touch.x,
zrY: touch.y,
preventDefault: () => { },
stopImmediatePropagation: () => { },
stopPropagation: () => { },
});
handler.processGesture(wrapTouch(e), 'end');
},
},
};
</script>
<style scoped>
.ec-canvas {
width: 100%;
height: 100%;
}
</style>
================================================
FILE: src/wx-canvas.js
================================================
export default class WxCanvas {
constructor(ctx, canvasId, isNew, canvasNode) {
this.ctx = ctx;
this.canvasId = canvasId;
this.chart = null;
this.isNew = isNew;
if (isNew) {
this.canvasNode = canvasNode;
} else {
this._initStyle(ctx);
}
this._initEvent();
}
getContext(contextType) {
if (contextType === '2d') {
return this.ctx;
}
return null;
}
setChart(chart) {
this.chart = chart;
}
addEventListener() {
// noop
}
attachEvent() {
// noop
}
detachEvent() {
// noop
}
_initStyle(ctx) {
ctx.createRadialGradient = () => ctx.createCircularGradient(arguments);
}
_initEvent() {
this.event = {};
const eventNames = [{
wxName: 'touchStart',
ecName: 'mousedown',
}, {
wxName: 'touchMove',
ecName: 'mousemove',
}, {
wxName: 'touchEnd',
ecName: 'mouseup',
}, {
wxName: 'touchEnd',
ecName: 'click',
}];
eventNames.forEach((name) => {
this.event[name.wxName] = (e) => {
const touch = e.touches[0];
this.chart.getZr().handler.dispatch(name.ecName, {
zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
zrY: name.wxName === 'tap' ? touch.clientY : touch.y,
preventDefault: () => {},
stopImmediatePropagation: () => {},
stopPropagation: () => {},
});
};
});
}
set width(w) {
if (this.canvasNode) this.canvasNode.width = w;
}
set height(h) {
if (this.canvasNode) this.canvasNode.height = h;
}
get width() {
if (this.canvasNode) { return this.canvasNode.width; }
return 0;
}
get height() {
if (this.canvasNode) { return this.canvasNode.height; }
return 0;
}
}
================================================
FILE: types/echarts.d.ts
================================================
import Vue from 'vue'
/** Echarts Component */
export declare class ECharts extends Vue {
echarts: object
onInit?: () => object
canvasId?: string
lazyLoad?: boolean
disableTouch?: boolean
}
================================================
FILE: types/index.d.ts
================================================
import { ECharts } from './echarts'
export default ECharts
gitextract_ijdyodk9/
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── README.md
├── examples/
│ ├── .babelrc
│ ├── .editorconfig
│ ├── .eslintrc.js
│ ├── .postcssrc.js
│ ├── README.md
│ ├── package.json
│ ├── project.config.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── app.json
│ │ ├── main.js
│ │ └── pages/
│ │ ├── demos/
│ │ │ ├── bar.vue
│ │ │ ├── boxplot.vue
│ │ │ ├── funnel.vue
│ │ │ ├── gauge.vue
│ │ │ ├── graph.vue
│ │ │ ├── heatmap.vue
│ │ │ ├── k.vue
│ │ │ ├── lazyLoad.vue
│ │ │ ├── line.vue
│ │ │ ├── map/
│ │ │ │ ├── index.vue
│ │ │ │ └── mapData.js
│ │ │ ├── multiCharts.vue
│ │ │ ├── parallel.vue
│ │ │ ├── pie.vue
│ │ │ ├── radar.vue
│ │ │ ├── sankey.vue
│ │ │ ├── scatter.vue
│ │ │ ├── sunburst.vue
│ │ │ ├── themeRiver.vue
│ │ │ ├── tree.vue
│ │ │ └── treemap.vue
│ │ └── index.vue
│ └── static/
│ └── .gitkeep
├── package.json
├── src/
│ ├── echarts.vue
│ └── wx-canvas.js
└── types/
├── echarts.d.ts
└── index.d.ts
SYMBOL INDEX (14 symbols across 2 files)
FILE: src/wx-canvas.js
class WxCanvas (line 1) | class WxCanvas {
method constructor (line 2) | constructor(ctx, canvasId, isNew, canvasNode) {
method getContext (line 16) | getContext(contextType) {
method setChart (line 23) | setChart(chart) {
method addEventListener (line 27) | addEventListener() {
method attachEvent (line 31) | attachEvent() {
method detachEvent (line 35) | detachEvent() {
method _initStyle (line 39) | _initStyle(ctx) {
method _initEvent (line 43) | _initEvent() {
method width (line 72) | set width(w) {
method height (line 75) | set height(h) {
method width (line 79) | get width() {
method height (line 83) | get height() {
FILE: types/echarts.d.ts
class ECharts (line 4) | class ECharts extends Vue {
Condensed preview — 42 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (118K chars).
[
{
"path": ".editorconfig",
"chars": 146,
"preview": "root = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\nend_of_line = lf\ninsert_final_newline = true\ntrim_"
},
{
"path": ".eslintrc.js",
"chars": 426,
"preview": "module.exports = {\n root: true,\n extends: 'airbnb-base',\n parser: 'babel-eslint',\n env: {\n 'browser': false,\n },"
},
{
"path": ".gitignore",
"chars": 940,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Runtime data\npids\n*.pid\n*.seed\n*.pid.lock\n\n# Directo"
},
{
"path": "README.md",
"chars": 3782,
"preview": "# 在微信小程序中使用 ECharts\n\n> 本项目是 ECharts 的 Mpvue 小程序版本。开发者可以通过熟悉的 ECharts 配置方式及 Vue 语法，快速开发图表，满足各种可视化需求。\n\n[![npm package](htt"
},
{
"path": "examples/.babelrc",
"chars": 312,
"preview": "{\n \"presets\": [\n [\"env\", {\n \"modules\": false,\n \"targets\": {\n \"browsers\": [\"> 1%\", \"last 2 versions\""
},
{
"path": "examples/.editorconfig",
"chars": 147,
"preview": "root = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\nend_of_line = lf\ninsert_final_newline = true\ntrim_"
},
{
"path": "examples/.eslintrc.js",
"chars": 756,
"preview": "// http://eslint.org/docs/user-guide/configuring\n\nmodule.exports = {\n root: true,\n parser: 'babel-eslint',\n parserOpt"
},
{
"path": "examples/.postcssrc.js",
"chars": 130,
"preview": "// https://github.com/michael-ciniawsky/postcss-load-config\n\nmodule.exports = {\n \"plugins\": {\n \"postcss-mpvue-wxss\":"
},
{
"path": "examples/README.md",
"chars": 390,
"preview": "# mpvue-echart-example\n\n> mpvue-echarts 使用示例\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with "
},
{
"path": "examples/package.json",
"chars": 742,
"preview": "{\n \"name\": \"mpvue-echarts-example\",\n \"version\": \"1.0.0\",\n \"description\": \"mpvue-echarts 使用示例\",\n \"author\": \"F-loat <9"
},
{
"path": "examples/project.config.json",
"chars": 502,
"preview": "{\n\t\"description\": \"项目配置文件。\",\n\t\"setting\": {\n\t\t\"urlCheck\": true,\n\t\t\"es6\": true,\n\t\t\"postcss\": true,\n\t\t\"minified\": true,\n\t\t\""
},
{
"path": "examples/src/App.vue",
"chars": 269,
"preview": "<script>\nexport default {\n mpType: 'app'\n}\n</script>\n\n<style>\n.container {\n height: 100vh;\n display: flex;\n align-it"
},
{
"path": "examples/src/app.json",
"chars": 2645,
"preview": "{\n \"window\": {\n \"backgroundTextStyle\": \"light\",\n \"navigationBarBackgroundColor\": \"#fff\",\n \"navigationBarTitleT"
},
{
"path": "examples/src/main.js",
"chars": 119,
"preview": "import Vue from 'vue'\nimport App from './App'\n\nVue.config.productionTip = false\n\nconst app = new Vue(App)\napp.$mount()\n"
},
{
"path": "examples/src/pages/demos/bar.vue",
"chars": 2610,
"preview": "<template>\n <div class=\"container\">\n <div class=\"wrap\">\n <mpvue-echarts :echarts=\"echarts\" :onInit=\"onInit\" />\n"
},
{
"path": "examples/src/pages/demos/boxplot.vue",
"chars": 3763,
"preview": "<template>\n <div class=\"container\">\n <div class=\"wrap\">\n <mpvue-echarts :echarts=\"echarts\" :onInit=\"onInit\" />\n"
},
{
"path": "examples/src/pages/demos/funnel.vue",
"chars": 2713,
"preview": "<template>\n <div class=\"container\">\n <div class=\"wrap\">\n <mpvue-echarts :echarts=\"echarts\" :onInit=\"onInit\" />\n"
},
{
"path": "examples/src/pages/demos/gauge.vue",
"chars": 1225,
"preview": "<template>\n <div class=\"container\">\n <div class=\"wrap\">\n <mpvue-echarts :echarts=\"echarts\" :onInit=\"onInit\" />\n"
},
{
"path": "examples/src/pages/demos/graph.vue",
"chars": 2872,
"preview": "<template>\n <div class=\"container\">\n <div class=\"wrap\">\n <mpvue-echarts :echarts=\"echarts\" :onInit=\"onInit\" />\n"
},
{
"path": "examples/src/pages/demos/heatmap.vue",
"chars": 2301,
"preview": "<template>\n <div class=\"container\">\n <div class=\"wrap\">\n <mpvue-echarts :echarts=\"echarts\" :onInit=\"onInit\" />\n"
},
{
"path": "examples/src/pages/demos/k.vue",
"chars": 1282,
"preview": "<template>\n <div class=\"container\">\n <div class=\"wrap\">\n <mpvue-echarts :echarts=\"echarts\" :onInit=\"onInit\" />\n"
},
{
"path": "examples/src/pages/demos/lazyLoad.vue",
"chars": 3155,
"preview": "<template>\n <div class=\"container\">\n <button @click=\"initChart\">初始化</button>\n <div class=\"wrap\">\n <mpvue-ech"
},
{
"path": "examples/src/pages/demos/line.vue",
"chars": 1756,
"preview": "<template>\n <div class=\"container\">\n <div class=\"wrap\">\n <mpvue-echarts :echarts=\"echarts\" :onInit=\"onInit\" />\n"
},
{
"path": "examples/src/pages/demos/map/index.vue",
"chars": 2387,
"preview": "<template>\n <div class=\"container\">\n <div class=\"wrap\">\n <mpvue-echarts :echarts=\"echarts\" :onInit=\"onInit\" />\n"
},
{
"path": "examples/src/pages/demos/map/mapData.js",
"chars": 36253,
"preview": "module.exports = { 'type': 'FeatureCollection', 'features': [{ 'id': '410100', 'type': 'Feature', 'geometry': { 'type': "
},
{
"path": "examples/src/pages/demos/multiCharts.vue",
"chars": 4057,
"preview": "<template>\n <div class=\"wrap\">\n <mpvue-echarts :echarts=\"echarts\" :onInit=\"ecBarInit\" canvasId=\"bar\" />\n <mpvue-e"
},
{
"path": "examples/src/pages/demos/parallel.vue",
"chars": 1575,
"preview": "<template>\n <div class=\"container\">\n <div class=\"wrap\">\n <mpvue-echarts :echarts=\"echarts\" :onInit=\"onInit\" />\n"
},
{
"path": "examples/src/pages/demos/pie.vue",
"chars": 1519,
"preview": "<template>\n <div class=\"container\">\n <div class=\"wrap\">\n <mpvue-echarts :echarts=\"echarts\" :onInit=\"echartInit\""
},
{
"path": "examples/src/pages/demos/radar.vue",
"chars": 1513,
"preview": "<template>\n <div class=\"container\">\n <div class=\"wrap\">\n <mpvue-echarts :echarts=\"echarts\" :onInit=\"onInit\" />\n"
},
{
"path": "examples/src/pages/demos/sankey.vue",
"chars": 1966,
"preview": "<template>\n <div class=\"container\">\n <div class=\"wrap\">\n <mpvue-echarts :echarts=\"echarts\" :onInit=\"onInit\" />\n"
},
{
"path": "examples/src/pages/demos/scatter.vue",
"chars": 1989,
"preview": "<template>\n <div class=\"container\">\n <div class=\"wrap\">\n <mpvue-echarts :echarts=\"echarts\" :onInit=\"onInit\" />\n"
},
{
"path": "examples/src/pages/demos/sunburst.vue",
"chars": 2555,
"preview": "<template>\n <div class=\"container\">\n <div class=\"wrap\">\n <mpvue-echarts :echarts=\"echarts\" :onInit=\"onInit\" />\n"
},
{
"path": "examples/src/pages/demos/themeRiver.vue",
"chars": 5288,
"preview": "<template>\n <div class=\"container\">\n <div class=\"wrap\">\n <mpvue-echarts :echarts=\"echarts\" :onInit=\"onInit\" />\n"
},
{
"path": "examples/src/pages/demos/tree.vue",
"chars": 1688,
"preview": "<template>\n <div class=\"container\">\n <div class=\"wrap\">\n <mpvue-echarts :echarts=\"echarts\" :onInit=\"onInit\" />\n"
},
{
"path": "examples/src/pages/demos/treemap.vue",
"chars": 4295,
"preview": "<template>\n <div class=\"container\">\n <div class=\"wrap\">\n <mpvue-echarts :echarts=\"echarts\" :onInit=\"onInit\" />\n"
},
{
"path": "examples/src/pages/index.vue",
"chars": 559,
"preview": "<template>\n<div>\n <div class=\"container\">\n <a class=\"link\"\n v-for=\"(chart, index) of charts\"\n v-if=\"chart."
},
{
"path": "examples/static/.gitkeep",
"chars": 0,
"preview": ""
},
{
"path": "package.json",
"chars": 988,
"preview": "{\n \"name\": \"mpvue-echarts\",\n \"version\": \"1.0.0\",\n \"description\": \"适用于 Mpvue 的 ECharts 组件\",\n \"main\": \"src/echarts.vue"
},
{
"path": "src/echarts.vue",
"chars": 5890,
"preview": "<template>\n <canvas v-if=\"_canvasId\" class=\"ec-canvas\" type=\"2d\" :id=\"_canvasId\" :canvasId=\"_canvasId\" @touchstart=\"tou"
},
{
"path": "src/wx-canvas.js",
"chars": 1778,
"preview": "export default class WxCanvas {\n constructor(ctx, canvasId, isNew, canvasNode) {\n this.ctx = ctx;\n this.canvasId "
},
{
"path": "types/echarts.d.ts",
"chars": 201,
"preview": "import Vue from 'vue'\n\n/** Echarts Component */\nexport declare class ECharts extends Vue {\n echarts: object\n onInit?: "
},
{
"path": "types/index.d.ts",
"chars": 60,
"preview": "import { ECharts } from './echarts'\n\nexport default ECharts\n"
}
]
About this extraction
This page contains the full source code of the F-loat/mpvue-echarts GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 42 files (105.0 KB), approximately 44.1k tokens, and a symbol index with 14 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.