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 语法，快速开发图表，满足各种可视化需求。

[![npm package](https://img.shields.io/npm/v/mpvue-echarts.svg)](https://npmjs.org/package/mpvue-echarts)
[![npm downloads](https://img.shields.io/npm/dm/mpvue-echarts.svg)](https://npmjs.org/package/mpvue-echarts)


## 扫码体验
![小程序码](./static/qrcode.jpg)


## 安装

``` 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[MGUIQCOAAUKGAOB]D_AaEMGAEFIRUxkNMHKAECCMCMGIKIMKGCEFeHIZSDE@GCWFiAEMGECBEHYASHIAEIIAG@EJGGEG@EBANCDO@CCEMAQCU@S_YCEEKKgIwAM@QAESQGCG@IFGJIHYLUNGBW_UMIGBOBARCDCDMAWAAKEICECSAKCM@OFO@KAO@GCCABbCFEBIBAACEEMGCKAE@KDEPCBE@K@COQSCKKOKYDSAIFQBIFG@G@ECEEMAEBCFCDCBCB@BCAYBC@GAACAIDI@SAECYBCIA@I@GBK@MFEFODGFMFICGEGA@CDCCASQGAACeASDEDKBEAEEDC@AMCCGOAEEEADK@CAC[CACJCBCAKGECBGFGDQDGAKIKCCAKBKJKDENGBK@ADGJGJAHCB[NO@[LOBS@ICGGIESDSFIDMHONDLABMNE@IEIAWJG@ECEGGMC@OHI@KJIAABAD[PE@KEWBA@DHABIFFHAB@DHPBFBDGFM@SCGBMFEEE@EBOD@DHN@DOFGFKBGPODMCQ@CC@EACGACEAEHKBCCGKMBGCMHOACKAIBC@KASDICGBAAAOOKe@QDI@WIAE@MGEOQAAIAQBEACIIIAGCC@IIII@BGACECKAGKGEKCEFGBCFG@kKQGOASDQDMVM@EB@BFDEJA@EGEAUAM@GBSRIAABABIPEDS@UGKBuBMHcMK@MBGAICC@OFQBCBCFI@SAGCGBYF_IEHFHBNJDNDBBOHUREHG@K@EBQLE@ICKIGCK@ABAD@R@BIBM@IDGAK@AFALCDEBQEQEE@AHGJDFBP@JABEDIBAHBDDFJBJFAHFNALINDFJFJXDZCLFdAVGLBH\\FHAJ@HDPLBAx_DCBEVALDJCVAXBL@FCLEND`@RBROFAHHXL@BEH@FHXFFCVFH@PDHHDLBPFJ@JCH@\\BJFJJcFQJKBo@ICU@_DM@OLGNCPUTKNAFDF_CEDEHAD@DJRBF@FCPEDE@CFNFBFBHFJCJYVCDLPADGNCRAPDF\\JHBNJJDF@JDNCJA^UPATTJPHBXABBHPFHCBKBmXGJGRDFJFARDJCJCDKFWDGGCAMDqAIBMFIAMGYBEDAHA\\DTDFFDVLVM`AFFT`NFLdDDFBdAZIp_J@XLlVTJFFHPHBPAXERK^YRGXAVDND~FPFHNXBRGTMLQF@JBb\\THRJPLXLJJBFDPRdDP@\\F^HLTLND\\B`CZKZIL@PBJDTLRPVXRPdNfJXCPGDM@M@KjGxEfDhNbDX@REXQVKRQRO'], 'encodeOffsets': [[116319, 35773]] }, 'properties': { 'cp': [113.665412, 34.757975], 'name': '郑州市', 'childNum': 1 } }, { 'id': '410200', 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': ['@@LKJCXM”H²CTBPJTN`dJFL@N@NGTIdYPG”U|Q`DXDjNtNVA\\EP@`GJCNANCPAHBNFFDBFHBb]\\C^MJ@JF\\@TDHB\\VHLBFALCJGHIFYV[TCF@JDHDHJJPNTDXRZZNJPJ\\LLEDCvMDBHACCBATA@DCBK@BFGBBFJAHRD@@AB@@JC@@BHACHP@@CNA@GBA@GAECBCOB@@ABA@CVM^EFEFQDEJIFCHDPVRLNFhBXCv@JQFELGFAH@FDLP^HVRXLX@`@RBLFX@JIBMEQFCZCJIFKFCAQNAXJTKbKHLFDNDH@DEBK@KCEA@CBCEGDQcIFAAC@ACA@GULA@CXAAIVCDPP@BBZAVEDCEYQSAEBsFKFCTEPUBK@GCCYSSIQEOAwH]GIEQ[IIKCEBONMJK@QCKEKKGKKIOAO@WF_@m@WCsWI@EBCDEBOE[@GAEEOCKGECECGA[DaTaNYTEDG@EAAMEAyAGAECCKDENC@MJCPAVEBEAGIIGIQKAEXEHCBEBK@SDCHCH@\\PLDbBHATK^IJIBG@ECESGaAMCMGEK@EFELIBE@EIOH[AGGM@GPaDUFM@KBKN_BICeESAEBIFUAEAEQUMKOGIAIEUEMIGGAQK[@OHOJIPOJMDOAG_kEQAOBGBIJCDIJQBUBAJALCJIVSBCF@E]CGCAOBgJmTIBKBCAEGKSEACAyE[EQGGECCGYACIEWGUIA@EBCDGRGFIFQDu@EDKHE@c@IHOPQE[DKLWPEBMB_EUBYRWFMRCF@PKNGBEGC@[@EDEHIREFCBiDqNGOCWCIGGBGDAHCXCNELEBGOMISKIME[AEAACGUGGQ@KEKA]B]FWHGHWXGBu@URI@IAEAGGG]AEYYoAM@MFKAOMCGAUAEEAm@WCAACOCEKAMAMEA@M@@DEBCFCBS@EDCJDH@DADKFADBBHDBDGHIRGDM@@L@@GBG@SICHEBEIEAUFCCAMEAgHY@ABAHKL@LAHGDKEE@@LBFDF@BGDW@ABCJCDC@KAAFFJCD_JWBALABGEE@YAIKCAI@AFAHKDFZADGBBJABQFFD@HADBZADA@ADCDED@JFNDF@F@HEHAJERBJCTLZLPDLRTDPL@F@DAFOLCF@LBHDFNDFBBJAFADEAaDBHDP@LBP@PEJARHR@FDJDLFBBBXCNCDQDABAPJHVNX`HAVMZKJGHIJEH@HDTRBF@RBNJxLhFLDF`Z@TDVBRFNDDP@DCBMFAH@HFIH@FBHJJBFGJBTGZAFFDNHBFEjDX@HCFYTGJEfDFLHJNJLNHNDDDBFGLMNwlQVEJBFFFND\\D`B^CPAHBVLXzDTNŠBZ'], 'encodeOffsets': [[116963, 35758]] }, 'properties': { 'cp': [114.341447, 34.797049], 'name': '开封市', 'childNum': 1 } }, { 'id': '410300', 'type': 'Feature', 'geometry': { 'type': 'MultiPolygon', 'coordinates': [['@@AGE@IAA@AHAB@D@BD@FAH@FC'], ['@@@GGOBABCLED@HFD@PED@hBNDNANCFDJALEXI|MVMHIRUTeJGhG^Q`YJELAJDRXLJNDD@XSPIREVC\\BLC\\ILGTA`KHIDAj@VFV@jEREpUHCHKFATFPCHEFAF@VBDDEBBLOJCFDBD@NIB@ADAD@DFHADIDGRCBK@GAIQA@QDIA@BBFDBDRHLB@JELFDAROFAD@VNL@JDFLLFLTD@BC@OLEDYBEJG„KhA@mHA@KAGIG@C@_DUH@\\GfKRIhEdYzMXDNFNJTDPG\\DJDZEJM[OCECYBUDIHCV@NHJBNEJArBNCDBHHXCLEDCDICIBQIECEHQHInWLADAEGGOAAWBGAIOSSOB]VIBMDICE@ICMIGA[ICEBODQHMBCKODCZUDIEIAGAEMEDEF@FCDO@EAEIQ@CBCFGFC`DCEBELMVSDOHMPKN@`CV@JDp@LARIdEIIIE[AG@IDI@OEKAGCCG@OEGDUEEGW@EFG@AWKGGEBQPQA_@MCKFEDK@WAUBIDKCUBAFCDw`ABOKGCI@GB[EAGHKBUEcDKASIYACIECEJMBKEMBGIEIACEAC@GPCDC@IAOCEHIBGB@H@NFRFFADCBKBEL@HBNCOISQCAI@IDKBI@KEE@eJQ@YQSCQ@WGAFFTSPuG_MEMCEi[SQAKCOaQBIHMdSDOGKOQKMHSNKdqFU@QDIFEbIJGFKI[O_KsBSCMMGQCOGCI@QEI…aKIBGLCT@JCDCHCJIJCECEAMBGAICECAEDEFA@IEIOWA_BIOSSG]GQGAILQZKlIJE@MOWik[@[BUGYSKSmsUI[@aZihGDI@YKwKOIKMQKOCO@KIKEAEHIBCAAEESEGEAG@CFEJEGu@EEESMAA@MBGwEQCYQaMKJAXSNSCQMIUEUU]UQ_MYGOAUGCIBOHMPGFUJK@KIGG@SHOBMEOLYXMDMCSQEUBKBBD@BGD@BBFHBBFCBGBAIAGIsEcE}OaEQ@IBGFEHUT]PWFQ@MC[AUFEDCJ@PBNA\\GZGLUHIBuRSJwVWLSBSCqSWROTirYLYH]@[CUFYHuASLOFOCQQWKU@]XOF_FYHULWPYNQFUAcG[AOFG@GAMEEAI@EBEDORQDSHSAIDEHMVA\\BZAFgbMXCF[L@BBRADCDOFIHBNBDD@DEAEJCFFNDHABDNJBFAHOX@HFNDFPLFBN@TGF@PDNFF@D@BABKDAJAXBBBBHDRFLFFRPHLHF`NNPJHDFGRDPAVCNELMNAF@fDNHHDJBLFNLJLDBBBDQ^]@CDCDKFe@EBGFCFAFDPENEFIDE@E@UMABAB@JAFSAE@IDMHCDCNSPIREBWAGBCDGPALCFEByVMNUN@FFDJBRAHBDBJXBHBJKLAFDRAZDLJJFXM\\QNILCJEVCDIHeDABCF@DFP@NJJ@NDFHHJF^@dHDDBBCTBLRD\\VBDAJDRJXDDJ@dKpKJ@BD@FEZ@F@Df`LHJAFUDEDAHA\\AhBJBXNFANMLARBTRHDhN„`LLlRLJJPFFTRND`BFAHEHANBD@PPTNDHFDP@BCHKJAHBBDBHDD`EVKrMdKTENKHCRAD@BD@DWXGVAHKN@FD@^@LBHFLRDDRHRFPHTF\\GJBDRDDDBH@VAFDHFNRTPJFHDPAFBDDBD@HAL@BBB\\CdBPCHCFEHM^aDANFJAncHCJBFFCNBDLPBRLHJL\\HFFBJRD@BAFGJCLDLDFLHBFBF@DEFADDDVADFBFAFGTAFDFFF\\HFJ@DCHKHMN@HLBPADBDDHR@JCFNBFHDBHACFDJAHAFAFCAEDQHCFAH@DBBLBBDCHIHYPIHEJOFCFAF@FDFLJ@DEDM@]KQAQB@DDLAHOLSLSRSB[BIHEBI@CBADDTCLBDLRNJRHRDNFLNRPPAN@dL\\NDDBB@HCFCBEBQ@GBGFIL@FBBFDND^B@BEFAF\\L@DqR_PWRAHBD`PFH@V@HDBZLDAFCXDbGFBFDNBFC@EFIJELCDEDIAA']], 'encodeOffsets': [[[114719, 35618]], [[114728, 35887]]] }, 'properties': { 'cp': [112.434468, 34.663041], 'name': '洛阳市', 'childNum': 2 } }, { 'id': '410400', 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': ['@@IGCIIOAKACAKAYDGNGfGTKDOGSAIDKRYFAFMXUBGGOFCBC@KLAJIJ@HUHEHCTCV@‚NXKJSP@LFBNANJHNDHAN]BAH@VDBABSDEL@DCVC`UNAHCHKIEKIAIBGHCFGN[J@LDBVFFLBXERBVCLEHIJeBUJMNQA‡CQMGOESOIaGKW_ISDS\\eDGJEDGBE@GGMAWJ[DEF@DAAEGCM@QO@ABATEPIRCFCTGNGNCLFF@NCHCDEDIB[XBxJ^LH@FCNBVHPBHBDDDADGFEDAR@FBLFD@DABOFQFEF@HCBGGKEKBIPKAGEIAWBWLYLOn[JCFEBGEKGGaMICm]AA@EABCACEC@@DGA@EA@AFWGBCBB@AA@@ACAD@BEC@BAB@AAAABIB@@AF@L@BEAC@CE@@CE@@CB@BEG@@DE@B@B@@BC@@ACB@CA@D@ACF@@AHA@AEA@ACB@AG@@AA@@CC@BEGKC[B@@EC@@CAA@CA@@CC@@AC@@IFO@BBIKAGHEHA@C@ECCB@@KBAFE@@EE@AIO@@AC@ABS@A@EH@IDOHCAE@EWiBgAEIEAA@WBCDA^AXINCH@HDFKJGFDBF@HBDDBFBX@NKBMDAJDZ@P@REL@HFHJ\\@JCF@D@JJNBPJJ@PEHJBBXGLBFCFBDABQDCDAG]EIAEEMECECcGOMCIIG@CFG@ECK@aIIOMCEEQGQK{Kg@INuNSBELYDAHDX@HC@EQWISQSECICEB[\\EDCGGCMAY@[JCC@MAEMSCAMHQTSBQRG@MGGEA@OBQCYDKAEBOFMB[G[BIA_MCECEAKGSIDGJAHLNERBFHNAF@DWTGHCDHAH@FDJV@TNhHFHDHH@LEX@REPITMXAHBFXHNDDD@FGFAD@DDDHHBDANGHIFQBIDMD[BqTG@oUE@CDILKDMBMCK@IPABO@ABGLKDOCGRGEC@EBADAFBXYNCFCJIDEJQTAJGJOHQDQCW@[OKAODADABATA@cNQA[FS@aIOGI@CDCJCR@TDRHJJHFH@DGF@JAXGJAHHT@JGHIBADAB@PABKAG@BPGLoREA@CAAIDEFAJCBKDKLGAK@QLIDCHAFGLAHgCI@IB[PKBAIACEAQ@UHAECCUECQ@EBGAGOMEAW@UCGDCFCB]OSEWOEAC@C@IHAD@FABCBSAGFEJ]LIFM@IBCEC@WDO@IH_JGDEDAJGBUEWOaDGDCFAF@NABKHSDC@GCY]QKMKECK@ABCJMIQCEBGJEBDL@HABOJINOLGJKXGBYESDKBEBIHUZIDQRGDKNM@IC_Q_BAAQIK@CBEJEFK@UCG@EBQTMHCDCVGHSFMHQLeAE@IHGHAH@NBBTNFF@FHvIFEF@HBDDDXHFFBBADGJBFDDHBLJP@PDRLLNPJxLZLJ@HCjgbY\\@VJntLTZTVH\\A\\@jlPX@NIFkJYLKRBJRH^HTHPTAJB`PXFJ@JEBCFBFFDJDHBNALDIFIJGDCDIDS@KDAHLJ†bFJ@RDJPHRDNHDNATLtP`J\\ELIHaJEFCJ@REVcrMLGTLNPRHLCPcTGNAJbRDPBLTRj\\DFFN`NvHTOESBEXHR@TDZRR@fIF@LFJ@LAJCJ@DB^XFDJ@H@BC@QBCBAL@XPLBRKFAL@H@FGVQNEBAAAMCICAMEGFG`JZEHAHDTBJ@DEDARAPED@JDHBNAL@dNNGvALAVHT@FCJOBABAJBTQHAN@VBFBFHB@FIEC@AFAN@NU'], 'encodeOffsets': [[115797, 35089]] }, 'properties': { 'cp': [113.307718, 33.735241], 'name': '平顶山市', 'childNum': 1 } }, { 'id': '410500', 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': ['@@D@BAEG@APEHDCJBFPDJAHMDCFAPAJJD@DEGI@CX@PEFEFMLBJKJAH@PDLBfIH@DB@DEDKDCF@PDDVFjDLCBCDKTMPe@EFAhJDD@NDHAFBBHDF@XEHBBD@FDD@BGDQ@EHBFBDNFH@NIFKDGAGJGJKHWXGBFEJ@JDFPBBD@DCDKBADBJEDE@CEC@E@CBGTBHHBJA\\OHINEFDBBBFAHBBHDL@JEFK@MCGIKBIB@BDTBNCLJJADCBOFCGGAAEBCCGC@ADCACI@MADCHBBECEDC@AD@DBBCRO@EDGBCNGHAP@BA@ADABBD@BFH@BFABD@@BJEVA@CBDHAJDHCB@@BD@AB@DJCCBBBAB@BF@@@AB@BFAADB@BEDAB@@BJB@CD@@CJC@AB@@CDBHCBCBBDAFAD@@C@@DJD@B@AEJ@JC@CAGCECAB@@AB@AGBCEEABAEB@BB@@@AB@@DBBBAA@DCFBACD@DBD@HJFARA@ADAFBHPABAHDHB@DFAFFJH@BCP@@EPOHOHAJDFDFFDHHDVIFEHCTCNE@CRCDBR@ADBDJDNCDCJ@BPL@TA@ED@@MB@BAFA@AD@@CB@@GB@@E@@@GNEBFHA@GRADANANALDVBHMBMHI\\El@PCLEPULKNIRETA\\@dGROFGJCAADA@@DABB@@@CB@@DTA@EH@@EHA@CF@@AF@@@JA@G@@@GBAF@BCEA@CC@CBCMFAFCFDBABDJA@DB@@BFBFEBBB@@ABJDB@CBB@DH@@CJ@@EFABDHA@BF@@FLB@DB@@JFBBBN@@DLA@BB@@BnA@CH@@DTADPJ@BFH@AETA@AD@AEPABHF@@FDB@BH@JNNA@CNCACDA@AD@ACDACC@AD@ACLC@ALAAEFAAKNABHL@BJH@J@@AH@ACJA@DL@@DD@@CFAAAH@@CL@JC@AJABDDA@FF@BFHABDFA@AD@@DJA@CXABRC@BBA@DNF@H@ABF@BDPABFDA@IF@BDNAB@@@B@BBB@@CB@A@AE^@@BJA@@DAC@KmHEFKRIDGDK@GI]Mm@CbMXINCTAJAbMBA@AD@AME@@CEGEAAMDAAIH@DHAGFFB@ACBCHE@EGM@CLW@I@EGICIEI@KOcBIHOBK@EM]AQMQCSMIMGUACCCE@EBMASDAPAFAFGAOG]QQ[UEMK@CKCAUAGAGGCG@EB]LMPGJKP[@EII@EPSBoEEKACCACAKAAMCQAEAGQOQAIBAFCJIAQBGDEJE\\QJCšILEHMF]BYDMBgCUEEUESKEGCM@E@AHCJAfFJ@BCEIAKAWKUBEBCLETCFCHge_EKYYMFIBMBM@cFUFOAUE[@GBI@SK[WQIOKKEAE@GAEGCqC_DKAIEE@WFU@GAM@MCWACEACBCFCBIEU@QGMKIOGY@[BWJ_BKCUE[OUEmKMKOQEWIOECWI[EQISOEGCQCA[PQDIBUEECIKBAEAE@GDAD@FDHCNSBIJcEECCGEDAB@FBDFBJ@DFBFJF@DEFS@@BBBCJCFANFHBDJDJDFD@BAJCDCJOJ@HBDLBJCB@RVBD@FCHEDQFBJEFDDLCJHJBLDFFAJDHILWNCD@HDNNLFFBF@JENCNALCD@NCBKHCJAFNT\\THHBF@RAHAHSNQTGTOREJ@FHRFJHDFBPJFFFJHFRFNH\\NjNLFHJGPBHHBVADBBB@NKNBHDHFBD@jGFAP@RCP\\H@JCXFL@DBDFVRlJFDFVHFnJNAREN@HDDBFNDXFJJFHLLDRBFJNDN@HDD@HHJNL^T^BHBX@NCFMDaVOFUR[@iKC@IFIHIFmFQFKHONENDJAD]FAFENKLGAOGIBABFH@BCDGAEAGGGOECI@ODgHcFSCM@O@KMCAcDCAGICIOAUDUAODWGmBSB]EKEKIKGICmKOAGCQSU_IUCACFGTQ`Kd[tG\\BJ@DJPFHJFDH@JBFJDZDNDJDLJBDAFSNAFBNHLDTHDRDFDDJAJPFJLFH@F@BGDM@MGECGKG@AJBP@NANC@WCKAQDKDWTSHKJCFAXADEDiLIDELERGNGHIDOBq_[IMKGGASMWBIHGBC@CAAOCOBIKCAGDM@CCEMAEA@C@]LMDQ@I@CA@EBOAK@GDEPEBQZINKPCJCTKDCACOM@kEQCAOAICQMSGeAKKAE@CDELKJSBANEFCAISSEIAKBAD@\\LD@LIDAF@HDLHJBLBNC@C@CIQAMAGIGFOAMKKOOWBUWQGMM_CCAAEE_UGKGKIGCOBG@ILGHQFMBAACECKBECKCECAEAW@MGGBOJGBW@aKOAgGYA]DUJETFTP^BZ@ZIVSLiri€ALCDCBIAG@CBADEDEACCSEEFELHL@BEDEBEBmAk@MZKLGJETXLRA\\ATEZENBNODENBZJHLBhGVGNBPLBFBHINIHIJ\\FHHGJqFSJBPNNNHVFDF@D@DIDADFF@HAJIN@VGHG@CF@BJ@APCHEACBCHCDMH@BFDJ@JBD@@EFAB@DFD@@A@CBATBHAPDDFB@BEB@FFH@BHC@C@CDEA@JADAB@BHHADMBABADEBG@MCAAA@ELBFIBAB[FGFIL@BFBTCBB@FPCpLDBBB@BADURADHDDF@@FEDBDDNCEL@FGLMDOBCAMKA@CDDF@FBDDDJBTHTNDH@JCFAH@FDHBBF@FBBFLBBFAJGTA\\EJHJDBRBDBBJLNJNCNKTBN@NDR'], 'encodeOffsets': [[116462, 37237]] }, 'properties': { 'cp': [114.352482, 36.103442], 'name': '安阳市', 'childNum': 1 } }, { 'id': '410600', 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': ['@@FDFR@lPN@D_TODMLYJAROFCF@HBLAP@FDBJ@R@NC^KD@B@BFFNDDN@HCDBJLPAPDBB@DADGHAJNXBTHHNL\\Jr`PAJCLMDGFQFKJCjKFCBCBWDELITGXSLCRCLBXDD@BM@MAOBIH@HLFDNHN@HC@A@EEGIKOEBICIECQCGCCSGKAMBETMBEACKIICMCYCICAE@ICGIEEGIO@CAIH[\\sLcR_HSDEDBJVV`RTHDPBnLJDLHLJLF^FTAnAXHPCVBVCPBDJHJDBdCDBLNP@N@TDdEhGPCJ@FDHPHHFBHBDC@AEGBAJAPHHBLKFMBE^EBCCIFMPMLGREnEJEJGJED@jL\\@VQPEbUNCDE@MAWAGS]K]IMGGC@GCM@MCEIQAKCGKIEEICWEMCAGCM@QFMBmIGEEUECkIUQCECAK@WEIDG@O[QDO@EBiHIACGAGLM@MAACAUBGAAGHOGIKEiM[MMGQEGEEIEEOIEAGCEIGQ@EFIPQFMqgiOIBE@ucK@K@KDIHQPIDQ@GDIFEFAJBFFJAPBBTHFFBJ[@_H‡VSBKJIFOAICG@ODQ@EDUFULOHeZIDuDIDGDEDAXAFEHWREFCJH`@FCN@F@DLLBHGXCTObWNGDUBCF@LEFSFWLE@F`BFDB`DNNRHVXTAFBVVDDBNEPJHBHBNJR@D@DMDKAIAKGGCE@CBKJC@[KC@ABBLFJTTBJEDMFABITKLCF@DBFLLfBTHRNJDN@'], 'encodeOffsets': [[116807, 36734]] }, 'properties': { 'cp': [114.295444, 35.748236], 'name': '鹤壁市', 'childNum': 1 } }, { 'id': '410700', 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': ['@@l@nBFAFAFC@AGKFKFETFDDFBFCBCDAH@JBDADCBKjjqTKJU@YAYO]ESFSVI^CZBxJbLX@HAPIHANHX@FBDBDFDLAFDLDFBBNAREHGJKH@NCJFLJLHVHF@XKTEFE@KDEVAHCXMPaDSHWAGKK@C@EDM@EG[@GJKXQFGBEBWFCRGvCJCfYPGVKVEFCR@PCH@JDPBJELITAˆU`G\\@AIEESGAABOEIAEBIFEJEHCR@JCROJGLCL@L@vdF@JAjPrhBERSTMBGBG@QAEGG[SMSBEDILGDA@MDCBKDMFM@IAEEEMKCM@GDCXMJKCGBIEEKCIAIGKDCCFEAIREFCDG@EACQUA@IDKACEBEPIDIDCBG@CECGAKEGKBMDEDIAA@AP@D@FE@CIEAECEK@CCAGHEDHFDdFJITADMCG@EBCHCF@FBABJLFDVFJAPC`OBBDRFHTPRJ\\FXJFDJPFXPRNLnLVF\\PVFLD`AXINAf@FBLFLJHN@RFVAJEDADBDDFXBNDN@HBV@XEF@JFLB`CrDHDBF@HBFLFPLRJ\\XTLJ@HA\\@VFPBdGVCN@XCNERUHSDGDCZEŠ[EgO@GCkiEI[_IOCMEI]EMCEC@mDwACECe@eE]EMEOGKGKKQYAGBIh[XUPSFM@M@GMO_QsKGEKQMYJKVGdADEBGAGEGQMWKKCKFeQSMYYWQSCOMMQCG@IDE\\SZUJEJMDOAEGK[UGA[CS@IEI@]N[Da^GAAEECMEGAOBMDMBID_HO@[FUBsMiMWC_C{R“VOHcZSJMHM@K@IE_cSMOISA±D“GWNIDKLYNINCJAD[E]IO@GBYRSHSNOHQ@SCUKUGQBKC]BYPSNKBICECEEEGqkQUCMGGMISGuB[HOCuWQG{K_CsFKDOPS^UTGDYFQ@_COGMM@OHIP_VKBYAMBIBU@aFDP@ZBNFLT^FFJLDBLFVFNFFH@BABG@KFEFAFBDF@VBDFBBCL@V@DY\\IFCJINK`O^EZGRKVEBOAQGGAIBA@AD@FBFAFGDQBIBGFONAHARIRCPGPAH@^@HNRLDNLBF@FETKTSTET@HAXG@ELA@Q@WCGB@BClAFGDCJDV@FKFOPHFCHCD@JFBNAFDFHCLILIHKNCJ@NGTUfibQHQNKDIJGDCDADA\\GLGFHRDDFDV@ZRDAHENDLKDAJBTHHANHPBNDTFLI^@DH@FSTJPFPCH@LDPNPTPNLFNJ@HDBBALHJDTFBLBDDAFELARKTBJAFBBPHFAFQBCBEDCPBBMBEFE\\ChBLCLBBB@jAJEDADALJHAFORULUFAB@FNHFNAJSbGRANLVHJFV@JINAPKEE@ED@FDFNDFBV@BFCBGBIHOA@B@FFHADGBCD@HFH\\EPBbPLAJKNCRHJHDL'], 'encodeOffsets': [[116385, 36697]] }, 'properties': { 'cp': [113.883991, 35.302616], 'name': '新乡市', 'childNum': 1 } }, { 'id': '410800', 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': ['@@HEHKB[BCDCHCJILCRMRGjaVeHS@MDILMJGJKDKEGECMBEA@IDCDGGEPOLE@ECUDIHCBEDk@AHAXDR@B@FKH@BW@GFSTSLSFS@EAEMKKCMQ@G@]BGHODOJQBQBGPMHEJARAHCBEAE@EBCB@JAHBRHPBFALUHQFYP]L_JMDIJEZ[@C@UDKAACEUAE@ACBEFELEH@BA@AEGMEUEKECAIKEES]EKAM@YCOQPQRULWRQFW@aCgMeCwFiH@L@NCNOHWDeIcMQOUWQOSKICOAK@YJYL_D[AMCSKGKE]@[COQcCOAEIIWKOKQISGa[IAE@KRSNQHWAGMOE}EMCUCWBQH]ZQLWFOBGAGOEESIkUWKI@o`YJcBEACCKcMES_EEK@SBUNINYFIC[COHMAEAMIMEWCyNcZgFQJeL[HG@CV@`@DJHBH@LGB@ngBƒLIHAFCZKF@PADC@RXHD^AHBLBJJFDVCjBJFDJFFXCTLDFN`FHVNZLVFJFPRBbPJDFDLDNHL@XTLFFBF@FCTAJDTEFB\\@DCDD`FTAJCHML@JBDJAH@LHFHHPJHBDBFCF@HJFRBNNLFDDDLHD`EN@REHDBABIBAVGb@DFRDRCJA`NBDHFHHHV@DEH@HDFXBHDRHLDD@LGLAFAJDHN@B@JELAFC@ABBJAlDDNJBDGRJF@DBBJ@NGD@TCPFVD`KNELDHGFAPOVEJALFJ@ZKDCH@LFJ@DDBF@BEJ@DPDD@D@APBLCDBDBFF@DAB@BRAFD@DGBBDDCDBDJFBAHB@@CB@BFDDBBFD@BD@BE@DDABAAEGCDEFFBABBDAB@BCBCBDDCFBBBBFC@ELHPEBCBAFF@BCBFD@BGBAF@HJADBEF@DDBBHALBJ@DC@@BBBZ@LCHBLDHDPDHAD@DEJ@DARQRBDC@CBCFAVBNCZKJABBBDEJIJ@JDLHDFH@JFBFGFKRD@HCHYJ]B@DBDbTNCJODCnAFDHNFDN@LBZ^'], 'encodeOffsets': [[116105, 36347]] }, 'properties': { 'cp': [113.238266, 35.23904], 'name': '焦作市', 'childNum': 1 } }, { 'id': '410900', 'type': 'Feature', 'geometry': { 'type': 'MultiPolygon', 'coordinates': [['@@BQA]CEAE@GCGAAAICGAGIK@AAOE@@ABA@EG@@BEBGSB@@CF@@KGB@ECBAAA@BBC@AEGA@EGBAGD@BID@@DBB@ED@B_CS@SIEoIoYEECCAQCECA_BKCCAKcG_FGPKFGBIEm@GEGCUCAAOC@@AWF@CG@AKHA@AB@AANACYC@@@AIE@DEBEGOI_@WAGBCv_DANR`TVLRLDDfzZ\\XRtZRFfV|J`HˆpLDRBRDXC\\AJER@FFFLHFRHVDHFLHDVHJABD@PJfJ^GlFTBH@NF@PXTI@CDBBFFbVbJRCT@D@RKPCL@HDDFHNvVF@^KL@HDZTZJ`JtHHDn\\ZXz‚LDŠJBACADIGA@ADAAABAAOC@ACC@@AA@BOIABGC@BIB@DKI@AGC@AEA@@AV@KGMB@BEB@CB@@GFC@MAEA@AOEKUFOgESCmCMAAGCO@‡N_@wKOBCCA@GC@@QCBHW@EEGECIAWAYECAEID@@IZA@GHMKE@_EB@ECB@IA@@DA@@IAWGAB^E@@GI@CYEC@HeA@MQ@UFCME@@CQB@FM@yLOUAIW@BKe@AKCBGWOBCKD@EOUFCS@OQ@@KFA@[E@@GC@@SyEQC[KOASAAAC@@AW@kACMECmRA@AAEKGCgHI@CCAICAYB[OWQW[Y_Qi[cMG[WCGCQEUCEMIQSGQM@@QYDAUE@@FOFAUE@EEMBBK^GCIIDGUJaFM@OAC¥aUMSQI@MKGC@ADI@C_YgYKCM@SDK@WEOJcBeCaEUE@SEAAOI@@fA@CA@[Q@GDGFCF@DCDEBACCEC@CCBEDGBI@IOSIOCA‘BSEEKCWCc‰\\YFCDCHGTQVZZFLf`GhEDSDKFADAFLV@RDRFJABCBkEIBGD@HDNFHTLVFFFDVAhCNAZE^GNKF™JID[RIFCFAHBRIJEDABBJPRHRFBRBNDBBBLBDDDLBFFApOT@FJJ@FO\\ILOHKNA^@FDHHHHBVBDBDLL@FN\\VRRH^BPEHEBOBCBBTAN@FDFDDVBNHNJDTNRBRN^@FALGPAJPd@LFJDJHJ@F@JKX@DHN@FGFADBDA@EEBHCGG@BJCBBNFBFH@DF@BNC@@BABaNIBSBMDmTXDDLJDFHFBJ@FHDBH@TFNG^ARHˆ„ZTBJETJhCR@FBFX\\FFFBH@|OH@DBBDBTH`DHFFHDJDfANCHCFGAKBAFCVCPDH@BDBADBFBBFD@@DFA@FD@@FDB@BC@@FB@BBFB@E@BBAL@K@FAE@@C@EPBFATKPCVIPIV]HYDGV]FCJE\\EFCBE@IESCG@ILQJIJCLAJATHPED@LFbRHHFLDXDNDBZ@DBFLD@@FBDB@BDA@BDGF@BB@D@BHBDB@DLD@CGDA@CB@@CACFAECCC@CDB@CB@@CF@DAFAJBFDPRFBZAFBBD@XBLFDHBLABABWBCFGREJA'], ['@@GEGAMJCH@FDDHBJFLDDABCDEBCAACCEI']], 'encodeOffsets': [[[118256, 37017]], [[118278, 36761]]] }, 'properties': { 'cp': [115.041299, 35.768234], 'name': '濮阳市', 'childNum': 2 } }, { 'id': '411000', 'type': 'Feature', 'geometry': { 'type': 'MultiPolygon', 'coordinates': [['@@REBAAIHABCEYLCBGBEJ@DBJLZBF@HFBABKXA`IDCEIBELBD@DCDIBAX@HC@ACEAE@KF@LFHCBG@KLKBGBAZ@hGFBBNDDVEFBFJFADGTJH@HA@@@KN@HCJQHGACGCAABCLEBC@CCGDIFCL@LADEFA@CP@NFXBFHDPFDTBn@FBBFBVDHPNF@FBNEN@pBVIHEJMJU@KEcAY\\›@IEQEIKICEAICCOEACPƒBQBCJ@FCDGH]LeDIDA\\CDCBCCODWCEEA@KHQAEMAEMFwD…DGJIH@BCKQJKCEBEEABC@CACUA@Q@AT@DG@AD@B@@GPABKCC@GDE@ECCKGACEM@YEK[IEGKCM@QHmHEDCBCRCBE@MEWBGBKJKJA@GEA@CFMDECMA@LCBA@@ECCA@EDECI@ACCBEFCHBJHHIPIVGPCDMHILQJMFCDAFDHHJPNBFETBN@DEHBFBJCFEJADG@CFMA@AE@BKE@@FI@BDHA@JJDEHS@KAABEJ@FAFCFIHG@OEKDCBAFBBAJAFHBCFEVMFSH_B[AQGm@_KSCSIaQEEISCE@BG@@HUABCEADEO@IBCJMAKBIG@DE@@BKBBMC@BACAFOC@@CFBBECA@GHBN]WC@YDB@WCKMIKAiFC^B@@DGB@AE@BACI@BG@AAA@@@I@@CBEA@CBCAC@CDCBAEA@MDKCKHWC@ADA@CF@@CH@@CGA@CM@@ED@@EGAAF[A@DUA@AD@BCC@@CE@AC@AF@@CAAC@@AG@@AG@@DAOCCH@HEAI@EDC`KZCBCBcOa@W@EAKEBAKKB@IA@ACEABGEEA@@EB@@EB@@ILBBGNB@AD@AAJA@EF@@EFBBMA@@EE@@IC@@AG@@AG@DCI@E@CAACDIAEQMIAGBENIPC@EAACEMAMCCA@gD]LqGENEBCABMAEGEGAOJIDG@]OATXXu@ABAJFLHLAHGDE@EFERAPCBC@KEEAQ@CBEFCHCBCCGAOAUGMAEDG@]KwIWAA\\CJCFGDMDE@KEMDMHSHEDQDOJSFAB@BRPN@HDBFCBE@CFI\\BXHN@HAFCHIFCH[fCTJTX`HLJbTPPFNHDRBˆMRINAVIfGJKFUDQAWFKAEEAUKCI@M\\EHGDAHBJLJJFGLGDMB_VUDCDK@CFATABUCG@ABM^GBMCIGBMAMKEO@ITWLMU@SDCBKHGVI@IJKB@LADEDHPAHWVENEBQZCLBJHTCPSLeHMHCHBZBLBDBLJPDJFFDB`GF@PBRHLBZHNBDEHAFELDJHFJLBFDBDAHJ@JJ@JDDBHJJDJFBRAJBBBPRHF@NBFXJJ@RCf@PLBPBBHAJDTCLBD@JALBBDGPDNAHLNDHCHCDAHDFLH@FDDDBNANDPCHOLAHEPE@CGM@CPCLAFFNEDAXDN@FABCACAEGO@CBAEGJEBACGB@XALFF@\\OBCBAJBLIJ@PGD@HNFHFDH@XIJBJFF@NMBACKPMNG^INAJ@RLFDN@VA\\KP@`OBGHIHIBCL@HAFMD@TMD@HAJBRNHBRCHCHEF@FDBLADIDBD\\DBD@DCLFBFFPBDHND@BCDFFFBLAFCTCfBBDHBTRDBCD@DHBHFJDNEHEPCFENEL@HAJ@B@DJZAFDTBJ@JC'], ['@@D]]HDJE@BDB@D@@CHB@BA@DJJA']], 'encodeOffsets': [[[116619, 35152]], [[116557, 34704]]] }, 'properties': { 'cp': [113.826063, 34.022956], 'name': '许昌市', 'childNum': 2 } }, { 'id': '411100', 'type': 'Feature', 'geometry': { 'type': 'MultiPolygon', 'coordinates': [['@@ACF@CI^G`CJALBNJDL@XCA@ZXDM^GA@HDBAFEA@DD@EPDBABD@ANLA@AF@@CJHLANBDIJAP@CFFBADVB@GH@@ADFJTFFbRTJTD`Ln@RH\\B`ATGNEFUDEGABEBIAABEDALCPFH@JGDEBE@EFIBALBT@FGIC@IGBACJ@@EF@ALF@@BPBBEH@HMDEAIAEFG@CAMFSAEOMGICGBEDCNERINMJELSJUJOEECGGDE@MEKAC]DEFEDG@YDGIDI@kEY@AA@IDCHAB@@MFG@MGKQKAC@ICGBSJU@IBOJ@PDJ@@GBMDEEaBEJBH@ZCX@HB@DCJBHJJJFFCHGH@LNJ@FD@BAHBHTRPDTCJLVBZHNFDIAMDEPS@CBaFMBgBGDCTOBCBG@WAAKEMCAE@C\\oDQDCVCBABCASEW@MCGQS@EFOGO@EBEFGBWcUGAW@GAaOKA[F]IAAE]BGCIADi`@DBDPFBB@HCFEDGBYEQJADFJMFGBS@ADAB@FBBAHF@BD@DEHBHMAOGAAQ@ABCD@BBD@DAFNDNBDD@DEHUGBAOCA@AJADIACB[PcHCDGJKDOAIKEAEASBEACUACCAODC@AA@IAGG@AKCEKECIAACAW@AA@GQEI@SQA@SBKFGFMF@DEBWBaAiBK@ICOSUKYAQSKAEGEQGCyBGG¥@E@ACE[G@UDGAAAEQCBCD@PABI@EDKAUHCAGIOFI@OIMAIIC@E@ID[@GIGEK@QFO@Y@ICCBANGFCDMBM@GCCQECIHELGCG@MDUHWBGBCBA\\BBJFBFAhXj@FBFGDCP@JFGB@T@BAD@@BP@BJF@@FF@BELA@@DAFDD@B@FGHGLBAJ@AEP@JD@@BD@@DB@@DBB@DD@@FA@D\\HLAFD@@DB@@BH@@BDA@BFB@BGB@BE@BDC@B@@DDA@BD@@AA@A@F@@CH@AFA@@DF@@DF@@DBDAFK@E@@BA@AJBBBBA@ABD@AFC@DB@BB@@BAAADXHBEB@@FHB@CD@DFDBBA@FBBn^JDbNHHFLAHEFIDm\\KPKZAXBXFJBHMJv@WWBS^PH@JCPIHBHFBFANDBFAFMrH^KhCB@DDBNFNBDFBD@JOFMHAJBJFHHBFCJBDDBF@J@CDH@@BH@@BD@@JF@@FB@ANEA@FE@@FIBBBC@@BMAAHKA@JA@@FA@@FB@FFAHFBBDB@@JLABLFABL@F@XPbAdADYD_LCD@FBJGFG@DDBP@CH@@BH@@BD@BB@DE@@BBDF@@DD@ADC@@BVB@C\\BBEHB@FC@@FN@@DHB@DG@@DE@@DCB@BXDLGLDNCB@BFDADCD@DBDAB@AF@DJ@@@'], ['@@IBABF@@BH@@EA@'], ['@@B@@AGA@BCB@BJ@@A']], 'encodeOffsets': [[[116544, 34700]], [[116557, 34704]], [[116550, 34700]]] }, 'properties': { 'cp': [114.026405, 33.575855], 'name': '漯河市', 'childNum': 3 } }, { 'id': '411200', 'type': 'Feature', 'geometry': { 'type': 'MultiPolygon', 'coordinates': [['@@YKCA@G@UEG_OACBGXQ`OrQ@C[KBEFE@A]AMCECAA@EJKHEHAR@FADADE@GAACC[McKM@OBQOKMMEQCQGMIKQACDKCSBCDAJ@FAJG\\ATATQTKPKBGCK@CRARB^LN@FC@CKICE@EBEDEPEFIJGZOJGDGACKAAA@CBGDERGFCDBDM@EC@EDQB@EBABGB@JBF@DADEGBCAEGMADE@IGQCCCAOBKA@GNMLGDG@CEI[GEECEBEHSBEAECEUBCCBCFE@CAEAEKGCECKN[ACOAAIEE[GIKKGAQKOACDMEEIAGDmdIBMECB]bGNEFGDODcA[DAA@ABK@GACCCEAOBGCIESOMQGEECUBG@CACCCQIA[HSEOGQEQGCCKQGEKA]@C@@ELMBGHUXW@CACC@QBGDMLSFcLqNUL_FCCAGACGAIBGLADO@ECCGSMOOC@MAGBGFEB_AMCSQEEIOKIkQKKƒ_gMGCSQQAKBMNEBWMIAgA[BGBCBCFEVIBKGe_@C@EFY@EACI@oLcLI@CCIWCQBIAC[UQCAKDSAACCcG]@QMCE@MII@MEO@CDEBAfCJGDCFUDIJKRMN[EWIICKBYCQBELKAIAGIWCAGAQBIAEC@EVMNMzUFADEBKHODCHAXBFAJQTODMDCNGJCF@TBBE@IBABAVNF@F@JCFEFMCOBEDEHEFAf@LEDCDC^@R]ACAAKCKIEMAKCIGGCM@eBENMFKDMBUCOHQCEIGMO_MGEGKQOEEEKCQAGAAWAIBCBALABC@E@MEOCE@SHM@EAOKCEEM@GPWBGAEMIACGBMCEEIDBFCFC@ACAMJGPEDCBCAQ@A\\KDENWhaBEAYB[EBIBUCCBKHC@K@IGIQMICCK[MUAWD[AEBQAGAEEIKGESCOACWEiFECGGM@A@@KBGLOLEHEBEBO@CEGIKSKAEBWU]GKI[CCSEKIMEACCACBSFKAGEGIGEEAYAWEQBWRCLIZOJEHYRKNIJEBGBSCGHOP}PG@MLOBOAKBip]JIHGLALEFIFEL@FLRALHHBFADIFIPGNAH@\\ADQHGRENAFQBCBGJBLCDCLOBQCIBMFICMB_TCRADIHKVABGBSBKBMBMNMDGLI@GAQKIAQFE@IEEFGBQDAFBP@NYFAHCHOJCFFXDDRFTHV@LBBDAFGLFJDBJBNLVJ^BHBDDLR@BGJAJ@H@DeFGDBRAZW\\AF@FEHGBEFBFFB@BIJCHIDGACEDE@EGC_@G@GACDDHBT@BKDCBPDCFFB@FIBJF@FCB@DDBDHBABABB@PCbEPBJFFFBPFRJJVHBJJBD@BEFADTNJLDJBJCDGLCBQFGJ[AG@OFQA@HFNAB]DMAIFK@ADEHBDALCJCDIBGDO@UFQGE@CBMLMJIHcFGF[FQBKDCD@BJP@BADMNANCDKFDXJFPARDJFDFJNJDBBDHFJBD@FDFRGF@X@DBBFAHFNAVEJSJEFAPAFEPGHANEJ@HDRBFABEBK@GEIGEAWFYJkXAD@DBHMHBDEDDBCD@FDHEFAFGD@FCF@JMJELEDAFCFBD@BC@BBCBABCB@BGBAD@JCFCP@DELBH@JFLFHHDBHDFH@TL\\JFB@DANIEWAUBKDGD@FHLHXJZzURCRBJFPN`dLDNBPA^MZOj[VKPCNDVHŠ`bH˜B‚EjAFBpzPLJLBJFDJDN@fIdYPMNIZBZNTFpBZL`h\\pJZ@`CTBFFHJBV@VINKX[DCJ@JD–tdR^L`J¬JHFDDJfNXNTLLNLJDH@HCTQJCXBRALAHEJKDCFAJ@RDFDTjFHLFF@NE\\QPEJDXNTHNBLFTPJBJADAFIJENCN@HATCHCDBHARFLLLHF@HARFFDBDFHBBXCDAZQH@LAJ@NFV@JBJLBHNBPNJFLBPDN@LAJC@EDCLEHBHHNHDD@DHFDHBLD\\DHXNN@FBDDHX@N@FFBFAJRLJNPPDNAH@\\PHF@FCHCH@NCHEHON@FDDFBdBPTD@P@NJHBFAnBBF@HLJPBXCLFHH@LFDF@VENBNJFNDRCZ@DFFLF˜LFDhMFBTPJBDARKJCLJFHDFJBfAPCNENO'], ['@@AICBBHD@']], 'encodeOffsets': [[[114661, 35912]], [[114721, 35618]]] }, 'properties': { 'cp': [111.194099, 34.777338], 'name': '三门峡市', 'childNum': 2 } }, { 'id': '411300', 'type': 'Feature', 'geometry': { 'type': 'MultiPolygon', 'coordinates': [['@@ACABANDBFECG'], ['@@CACCG@ACGAIBBDNJDFFBBFFDHCBCCE@ACE'], ['@@CAI@CBCHPDB@@CFEAA'], ['@@CAGKI@CDCNCBE@OIKHGBQEOJEC@CJI@AGEC@CBCFK@EKII@IEKACEGICMI@_AEECIAKDGHGDGBIAAA@CBGVEDE@EYBGCGLEAGDBKHMKCCCC@G@IDEACIIGGCBEBCHAFMDSECICEAEHATFZG@GCC@EFOBIECGOI]K[QMIICGDCAIKKC{gKCE@INKDWBCFCNMLWHUGUBMF]d[FCHBH`T@FCFMHKF]DKFEL@PCFIBSNKL[LmbEFGPCNCBKBIHGDE@KCaQ[@IEQO@GBKG[@MKGKDIAiCGJEXGNS@UCKEE@gVELKNEFWBIFEBEACEMEGAWAKKKUF_@KGKUEMDS\\KFM@‰FQC[YSCCJB\\CHKBSCs]]GaIgWGGIBGMBEIGICQBKBMJMFBLCRIASGKQY@OHMBIDAB@FADEBGBiAMD]XSDQJW@sFCBCFMFCDGCQLGBECACFGAGIOOMQLC@QEI@QECEE@EBOLIAEKEGUC[UAC@EDIHG@AA@KBQJ_LEDCHCF]LODCKACQDUDOCCACOKMYCOOAECKBQAAGBKNGC]NCHKFEHMHIDCBKBADKHK@CDENABODCDKDGFCJ@FCBC@QDUJWCCAE@QGOA@FD@BFF@BDADCBBDG@CB@BBB@JDD@BCCC@AB@DIDCCCAADEAEDG@GE@AC@@ADABEDAFAHD@CFBFCCIDCCAAAE@DJA@A@CEDEKE@ERDBDJEGKGCSJGHCFGBCDEJCLC@ACECSFKFGLKJKFQBGF@BBFJJ@FCDE@MBCDIDABAFFRBPGLCNICGAMFIEIAIMOGOMGCIBCAADCHEFUCCDBBC@@BHFBF_HCBAL@DGFAJCNILAHEFCJEBADCBQBSCaOaEQAQFQLUhOHWCa@mTe\\QLQDSJSPOZe\\OFQ@ULoPMCIGGKQEGLALDTCNMB_O]cMIgWIB[NojKNIfDNQTIVCDKHQHSPMFCDAJQL@DHDBJADIACBAHEBOAYBIDUP@BBDF@JCDELIBBD@ADEFAD@FH@BAHGFCJEFABBFJLN@FALBJJFDFAFILGJCDC@AC@GDEAACCGAGBIAACBE@AGGKAQDGCCBEFMFER@FMNDH@FGHGNCBETIPETINKDOHOFwHUJIJ[LE@KFEDAFDXCNBRIRKHGAECEEIMSOK@EH@RHRARM`BNDNPXRHLHLRI`SfWTMHCNFLAJEFIFQB“FK@aKOCIF@NFHNJXNZDVJBNEPKNOP@LFLAFULE@EFG@MFUNSP@PEH@BFF@FQIAFGDKBIFQZGFKDO@OCUKMMSSIAEHjnCTIPcPABCJIJMDGJCLCDKDQHW`LAHGDHKNORBDNFBBAH@BHDFJ@FAPDFL@HDANE@IFCLFJFBXBVJHL@FGJEJ@LHVATEJKJIRAJ@RIRCFObFHlVLfAXDXCZM`EHYPAFDLAH@FLTBDPMHCFATBPDR@NDHFHJHFLBTEDADBBDNFLJTFDDJ\\HLV^AXBFTLJLFH@DAPAFGFKFKPAH@LB@N@HHFDjERDHFDPFTLHFJBFBHARBFC\\BXNVL\\DDNJJRDDFDL@D@LGDAVDJAFANUFGFCJ@NBTGRCPQFCFAJ@FBNFHBH@PE\\BdHVBREZMXOVKZG`EPE^WV@XLRRPDPETKvBZGVE\\D^@ZGZKjqPSXQrTTDTAXKxUTIvQJAVGHKHYB[AM@ODIFCVE\\BNDR@XE^OVSFGHEJAR@bF~PdFtFHJJBABAHEDAAEGAAC@AHC@AAALFVTRNDNCZWPKNFPATGH@JH@LILEVOHGNAPDJVHPBZH`NVRV^FVJVRNTDTMBWLIbNZRRDxFHGJGF@fBRKNGTEHGDUDCNGRSFAH@VDL@FEFIDAL@RJBB`A`RJDN@LMHCRQJCVYJGFALATCZFHALWHIPKJMPIBA@GCKFAHIFARDNJDIBAL@FDNLRLZ^HDD@TCLGBA@MBEDEHCbCXPVFHABIFCHC`IJGP@XCD@DFJAN@JE^KFIHETBDABA@EBCJGD@D@FBXPTF^PDADEHCVDX@FBPNBHAH@FDRVFDDBFVGR@FBBDBJLA\\OJAJ@hDBGHKBEDGJCRKL@HBLKLCDABIFEJCBB@DFBpQHKAOH@LBBA@OBABCJAHG@IGSBGHIBW@IHE@CEGIGGICQ@SDQDIDCJ@PHbJT@\\ERBdMB@BSBABCPCLB\\PX@RDRCPGHIBIRSFIJCDIDEZMAOBMBCFAD@HFHQPDLCHKBAP@BAJOL@NDNALCJKDCF@pVH@rS\\ANCJCRAFADCHI@OGGCC@CBCHE@C@CCAMCQCECAEBGNWJSFO@QFW@KGGGCGEMg@SIUECG@GBDCHGXS@CBEGMAEFQKMBGHIJC@GAICKCIKEKCSQECECWCWEOMUGIBSFuBQFK@C@MKCAW@cWYLQ@ICGECMEGIEUCEACCACAMYUMU]MIKCEI]M[IaKSBCDAFCL@DMHCrEHDDPBBRIFIFGZEPGXAJBLCHCGQAG@KEO@AJGMOIC@CDCQIS]EAEAEECKAEDEBANCHGBGLEBAAEOWBCLGBCCKBGCEMOBEnqDI@MAAMIAA@IAI@ID@LFJAFC@ODEHGLAX@LEHMAIECAA@CJAJBPANENUDKACIKG@IRCHGBIDKJCJMHMDCASIGIAMGMGGMCEECKBCFGDIRADAAiGGCKHKBG@OACAA@CLIAGBAFAbBNBTJFDL^DDPAFBF@LCTFJG`IDAJODBLRD@F@LUXIHIJHJDLAPELNNV\\bJLHFFBFALGLADADCFIHARSJEJCPDD@BUBATHF@NC\\QR@PDHD@PX^F@PGNAPHPLNHJVDVLHPPFJBTD@HAFBBDADILXJ\\BBFE^BNKFCF@B@FJVDDD@FKDAHCPBNENLDAJMRGHGJBNCLFHBL@NI^MNSJIfO\\QHALHHALCDEDGDAJA@CKUBGDCVIBILKFKJEQEGEAGUIOiIIOCIKAE@CDGDELCBCKECEACAIIYBOFSBI@SCSECMGEBEHIGCUCAA@@JCFCBCCAYIWKOQKPI']], 'encodeOffsets': [[[113686, 34275]], [[113699, 33975]], [[115440, 33134]], [[116448, 33196]]] }, 'properties': { 'cp': [112.540918, 32.999082], 'name': '南阳市', 'childNum': 4 } }, { 'id': '411400', 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': ['@@BGACBC@IASGOAQPW@CJE@UIEQQWABWECEMCCG@ACBEAEIKFIVSH]XKPKNELKJKBI@EOK@EHIXIVEH@`DNAPC^OJKFQRQZKLATKfK`MFEDGJ_EKOYBEBGPEBDHHbH@CLB@EB@@HJBBED@BD@@@CB@@CD@@DBGD@BCB@@D@CBB@BB@BA@@@BB@@ALF@CHDBCB@CPDFBADBA@DB@D@AB@@BBB@BPFH@DCGKNMBITDHFHHJFJJLJ\\LZ@lINEPA^EDAHELEBAFC@G@IEAAESUQEEIECQ@CCDGAGFGACECAGBK@EHIGEHGAIHEBGFCL@BOJI@GOIYGMKEG@EMaAU@IFQFCFC`CLEJIJOBKAGFI@BD@@AF@BCBA@AFB@CE@ACJK@GJGBIRKJYFG@GAGE@@ADACBBAAADAAAFAAAHAAI@AbWAEB@@CPAACD@@AF@AGPBDADEFAHUCEIIIKDQFEBMCGGGCI@MJ[@ICCKCO@_N]RUHIB]AE@CCGGAQCID@@ADAAE@CWBAKICAB@ACBAD@LGBACC@ACG@AKEGQFMAGOKBUHEGOIQBACG@COCCEAAC_ABE@IGWAWHWAECCCEKDGCEFIJKDEKCBGOKKBAAEU@AEEAMBECIBGEQBEDSCQECOKBKHCAAGKQGC_GOEQQCIMIcAGDM@mGGAGBGAICMGGGOKEAYAKBKNGPCH@FCHBHGFELEHqNIJCJENFF@DAFa@MCEBEF@FFH@DQF@B@FUJBHF@DFBF@BEBAJYB@BBJDDH@@GRCDD@LBLDPABOHABDHBPEBE@GBAFKNG@GC@NKFIBUB@VABCFUDOAI@IRBLHXDFH\\FHHZBJCJGJafURSJQAmDMFOCMBGDCFCRCJOHI@KG@OBcKBKAQBGAEBCDELBbADYPGHIFOPGLcFEHMFGHEBCCMGKASBUJMHEAOISGAEQGAB@FIDE@EAQBIAOMICEBKHIAEDELARAFGJOFM@KGKAQFO@K@MCKBMDyAC@@AHSFwAKCGKKKSECEAa@EACAICODM@GAUMUCAAEaAEAAc@KBUFiHOFQLUH[TKFMAQGCCGK[CEACCCKkBEBAHBFLV@FABK@aA[EIE@EB]@QCEKIKEMAG@kXIFGHECAEBEHCFIBG@CCCKIMMIEI@GIYCMBO@EDGNCB_HI@ICGIGM@ABM@GACA@eEcFQFK@EDCD@NDFHDBBDRLHBD@FGJBFFJHJ\\Z@DCFORADDHDBNBtCZFFFHPPRHJ@F@FCDWPIJEj@NJHFFAFCJ@HGH@B@DJJBFD`LNBJC\\UVCHAFBJJNDPEBG@OEC@WRIFKD[D]@MDEDCFENCNAFOBiLI@SEK@GBCDINAFCBCBKEIAGB_RQTCBC@O@Y@IDQBCDUTIJKDGBCBCZITKHCRBPFR`lBHCPINWXIR@FBNJXBRHHNJVFJFJBPHNLNRDDDLEVAJBFFTDfAJM`AL@LENCVOb@HHNBHG\\JP@FAFKJEF@FFLNHNDbBTHDF@FAHIJ]JSLGBaAKC[OG@GDCD@TALAFGDWFBFRLHJJJBHAFUFOBID@NMDCFDLFDHB`BRANDBNFBH@FCZSbMbS\\CHBFDFDLHPDFFHB\\@PFFADCFAJ@tXXDn@`@XEP@PBLJHLLLLFRDL@NIPMFALDJJR\\JF^HxGbHTJ^X@HALOVFDJJFDPBVEH@bPP@FAZOjMNMHCVCHGHANFP@^KDCAGDCFCDEEC@EFCVADEDMHIBKBOFSDE@EHQCMIMI[FIJIFIDK@KEU@SBGJSRQFU@ODALBHANGJOBODENQ^]LONGTG`E@CBAN@NHL@RCH@NBLBPAT@NFH@^GDAD@AB@BJGLENCFEREX@HCDBBFHDNP@L@hBJJBPANOLCV@L@RAZA^IRAVEFC@AFExSLTšJŠBŒTjBPHBbLX`Djk\\QdDxZfCbaNaTYLCFEHCTBdTZJRL'], 'encodeOffsets': [[118985, 35405]] }, 'properties': { 'cp': [115.650497, 34.437054], 'name': '商丘市', 'childNum': 1 } }, { 'id': '411500', 'type': 'Feature', 'geometry': { 'type': 'MultiPolygon', 'coordinates': [['@@@BB@@ADDEC'], ['@@KLIFEA@CFOBIQGIJAH@DJPjTAc'], ['@@@IDGB@HB@DED@DJ@FB@H@DCDBdHBBD@DADIFCNADKFKLAJ@FBLJTZNBFAHCHGBGAGQEAEBOR@J@BLBBFFJAHADE@CFK@EFAD@PCJKDSHQLRLLPJX@VBFDBDADE@IB@DBDVJHFGFANHFDDT@TAJETAPJZBJBDDFLFADKDCFCH@DBFJLPDJJPjVJBHHFRFFAFBBTANDFJDTCPDNIRDJHHBHC\\_FAHAjFJCHWLUJIPE@OEYPYDE@QLGBYPQFCH@PBJATBNDDFFAHARTfDJFLAJ@HD@VDLDDDBD@BEHE@SJKBG@GCIL]BALEHI@GEAI@A@@EDmDEFATBD@NGJ@H@TJ^TB@PC\\CJD@BATFN@NBD\\JVBDADADGBgFCHBHDD@@KAGQIAA@CBEFELAH@HBHDFNRBPHF@BCHMCCDCBKEE@GDCFB@AACBEDCJEBEFEAKN@HDJD@D@FRDD@AGGIGMBQDCB@DODQCE@EJKFARHL@DBDFFBPGPCL@LEDCDMDQ@UBMAIBCJAFEDAB@NEDCDOCGFKDCFAjBJAVOJIFADDHLFFJBHCPOD@D@FBVRNHF@VQHCFF@XBDFBH@XA^ETWLAHB\\THTDBXFNAMPBFFBXBDBDJNDLR@N@FBDDBZF@FEP@FBDDDXDLDJFDT[ZSNiXSHcFEFGLDJFHPFDJBJAHEDQJEFBNHV@DAFGF@VBFZLlANGF@dRXPLDPBNADAFEHMFC\\ATDDBDFBJERBFDDRJNDFABEF[FQBANA^NJ@DCDKZONARBJJBJCHMDADAFGLDNFHFFNHJ@RNBF@F@HCNKPABMAEBCTAP@JDHDDFBVGNBDD@JDFFDF@rATCFHFBNANILCTBBDHRJLBHCP@FLHF@H@LGHAL@lRJF~@vMJCZCjQTSFAD@VH^HHAHEBCAQBEZWJCPDXIHC@IEU@CFEL@TVXPLJDBHBZELIDKB@R@B@DGDAH@FFP@DCAEKGBCDAHBDJNHDHFBJAJFJCDCBCCCK@@CRKFCZLFDBDEFBBRABC@IFEHDBBBJD@FCBEEIIC@EHARCBAICIBIK@APOJCF@XFBDGL@BB@B@NE¶TFAAGB@D@DLNDHHH@FE@GBE@OCGCMDAFBFHFALCNDDE@EBADBDDD@DCBEAGACGA@CBCJCJEbOJ@FDHABCAIBCDAJBDA@AEGBCBAHB@CAEBCPIJSPeFKBKBCNCDAAKBALCJ@F@HELWDA\\AJAFACKIEGAKDCA@EBAFAPGDBj`LFZHD@DADKTOHKDAhZPXDBDA@CC]@EFCJ@FDJNF^LRDJANM\\DBjBFDDDADQP@HBJRLFARKLEbMLED@\\HJHJR@XBBDBDARQJMBGBKAGKQDAD@HF`b^TJND@VEJB@BCX@PBHBFJHLFTFDDpzHRFBJBbCJELKFAOCIFG@CAUUmYCA@C@QEKgSKMEIBCBANFZBPABMNEDKCK@UG@GCQOCCDCZ@JCBA@WA@AADGA@CBAABCAC@EJCJKAKBIFK@CHQFI@OAU@UBEAOBMLID[CKDQ@CMIAEBARCBADM@QHGLOAGCEGSC_@UNcHM@WDGLGFGP]GW@CDI@CGcGQ@MAEECCCLiVMBEGQCEYKAABAEKF@ACAADCAAFEAABC@AC@BCC@@AE@BCC@@CACHE@ABCB@@DFAACBACCBA@AHCCABCCBAIFCAED@BAD@@CA@BAEGGDEACGACDG@CCKIII]EEAQBGPMAIBEDEDIEUM]MWKE@ABMEIAEBCA_AMAC@IBAFCNAFGNKBO@GCGAMAICAKBICCEGEEIEEQCQDUEEFCLAHC@KGCIGGC@EHC@IKGCMOIDEFADBB@FICODOPE@OFQHIIO@MAKBAACKK@ACBGEABCJA@CAAK@UFEBKHGAGCE@EBIFCJC@MDE@EC]__EOEIMYSUIOCMMQGAIEGMCSAOMAGEGI@SFMBQIEEIOeQAACKEIIC@SCCMG@ABEHGR[@IEMEEEASCQKGE]IIGCQIGIS@EHIEIAKKYIOSMUIGIGEWGKO@GFIAGFQBGZg@CECCG@SAM@KQSCIMAMEMC_HA@GIIO[OMAKDMVQHGBGAICOOCAEASJ@DRXBH@FORQDOFEBQCGBGTGHCLBRHNDBBJ@HAVIP@FLRBF@FAPBDJNHTFJALBHJNABCBMCUAEBADCJADA@KAQBADBHADIBONCL@\\CDCBQF_A[CSEAEHUAMYKOIEGAG@GBCFAHAIM@E@CDELIBCOOICQC@CBCJACGACCBEACBAAG@ABE@AB[@CFACOFEACD@DA@MAGBOJ@LABK@AAEMQ]AAOEAEROBCACOEAMCICCGBGJGBEDEJAPADCBGBG@GAIIKEIGMGCEAIACEBSREBI@EEEA_ESIC@OBAPKBeECCOWCCECM@EPEHURODKASBMHAFDH@DQNAD@XJJ@DO@QDIHQEOHUIOECBABAJEDUEGAGBAF@HJRAJCBSES@G@GFU\\EDALEHEDK@@HCH]FICKDIMEAGAO@C@CQIMWACA@GAAYNADKlAVEVAH@JAVFDDL@DGRJJFL\\JH€DBPANT@BADABOBCF@DFDEP@JDFFHEN@HDNHJBBCNCDKBIEA@CJKESHG@CEDMAIMADKCCKEIACBETGNERABO@EAAEIUBELI@ECCcIC@QJMBGCGIGCEBIHC@A@AQEAIBGBMJC@EGG@EDCLAFYJG@GGEAEAIBWF_LIHEB]A[BMGSFMEG@CDCJEHSRGJCNMHET[\\@FADMPGJALBJ@HC@AAKOCAI@GFQNOFOLYFSAECGI@IMCM@OHG@G@KKAC@M@EIMASACAAC@IBIEWUAIIGAEaFMACCAKACECG@MBG@EAEEC@ODYAKGaWCEEAE@MFGHEL@RGL@HADCDOFEDCFAHDTANINAF@FJPJLBF@REHk\\@D@BDH@B@DGDGAMAKCOQUgCCC@MAOGCAEAMJIGE@GDONIDGJ@FBTEFEDAJH\\CJDR@HCLADCBMBOFGHGBEFDdJRHHBF@DABG@QJIDS@WNMCGFGHEBCF@HDNBFNPFLDBH@FBJPJHDFBDCHCHKJ_JCDa^ENMDSJ@bKrBBJAREFQF@PHTVJNBHCpZfNLCVEF@LADABCAOGCBKLMLAHE^EHGFABCZBDTFDBARAFRH']], 'encodeOffsets': [[[118283, 33248]], [[116499, 33059]], [[116489, 33052]]] }, 'properties': { 'cp': [114.075031, 32.123274], 'name': '信阳市', 'childNum': 3 } }, { 'id': '411600', 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': ['@@NAJCZ@P@D@DARS`QHAJBLFDADABEJMDCHAL@TFJ@jKPABEDMFMDEFCNC^@\\CLCJEXQD@PFH@FACOIMAIBEDGVUD[AIKMC_AEII@C@AHG@GDIBEEEIG@MFiJIXODC@E@EGIOQGOEEYEsDMACACGBCPQDE@C[YGIEIAEHI@EACKGCQAAGCCE@MFEPAREdEfFB@BD@HAN@BHNHJJDJ@`GDAHMFCP@NAZDHJJ@JFNNLJDD@DAHEJGDAFBFFDHGJElWH@NBLFLJDF@RA^@FJF\\FbBL@BA@EKUAEBGFAlADLDDFB\\DHLDDRHNBLE\\SVGRKPEjGVELAd@BBBFFbBBVDVNHBN@PCJDDBFBb@FBFDLTLLDHBLExGV~BNCLANDL@P@RELBLHN@PEHIBEBQFKFC@MKMDSOG]@KECBADGBMEKIAEFEFKAE[CI[EAAABINECECMQEC]DOAAKAEEBYIECECO@CBAA@BAAAAB@AJEHCAEACO@CACCAEJE@EACEEKDC@CWBEVBB@BIJ@PJPBJEFGHC\\CLJN@DHBBDCB@DEH@HG@CCAFYDEBMAASIA[OCCCBCNICCAGBSEQCMEI_LODOJC@ICAECCMAEQNM@GFMJGLELQLKDKHMBEKS@KHKDABEHEOAAI@GBEFKAWR]PUPO^‘mEaG‰CAQAEGEC@KHQ@MEM@KGIACAIGEBIJCJABMCQGUCCBCBIPC@G@IIC@M@oIKKEYCCGAACBIACIEHMEOKMCB@FABGDAE@B@@@FSLM@@HKHAC@@GIUOGICCBEB@@ABA@KFAAEA@AGEB@CA@@CJC@OCM@[AAUCKNIFCGDCAEIAEB@CFC@C@GEO@KBI@CNQJKBGACCEMMMU@EBCDCtBFCJmAOHCTBDABAKs@EDEBG@ACCK@IDKBICACCBC[FCHUBQACKIIK@GDSACCCGIMECE@E@AVE@A@EECOACCYCEEC@AGCOD@@CDA@CEM@GDIHMCQDA@CFACOAACAEFE@AOAEE@GF[FEICAI@SHG@A@GMCCEAY@GCOMEGAFGDGBGDCA_MMKEIAG@MAGAA[EaAc@OAaBQD_BMEGACBCPABE@OICAeHYP[DIDAB@FB`IBGFCHCBM@ED@B@FAJEBBBCBDA@HEDGCAD@BsH@EDACGCCC@CIaEEEIG@E@ADADI@EEUKQAG@YSCYAUCK@@QEWCCI@KBQJKBS@WEG@CBCNEHG@]AIDCD@b@BGDCJCRGD]ACNOBCNUJAF@LEDBLAFEDQB@F@LAHOBCBEJEDOBbvBXBBLLXNDPHLBRJLDV@LEVDJ@FAHMLAHBDSBM@SEMCGBCDADBLDF@FIBIAA@CECAE@ABADDDDJABKDCDADAPAFKNCBGBIAOEOAODCBOTEHEDYFEFARCBOBCD@DFJBF@DKLBVCFMRAJQHE@CEC@K@GDWME@…C@JDZAFQLEBGAMKEACBCD@H@TEDMHCHCBMBkGUAEAEEQCU@EAIKGCCBCLCDEAMEE@ED@JAF_PKJePIBGG]KAXEHAF@FHPEP@FRTDH@NFXBTADABUDCDCR[p@DBFNDLFBB@XAHADSPCDAHAhENAb@DOTCFBNCJMEYGUAIKSDOCSQAGBG@AECI@KMG@GHEDIEIIAKDECEC@W@YDG@IAAFFbCFAN@HI@OCI@AP@JIVATDH@LDDPJDFDJ@JEH@NA@GBCDBLZ@lFJ@JCCH@ZCHEFCFD\\@DL@JFJ@HC@CDGFEDABDJ@FDFCB@DD@FB@DA@KNBFDNCDEB@HFB@LILIHAXANFF@DADQDAFCnGRGHALDLJ\\JFL@ZFNBDLHDD@FCF@HDFAJOB@HA@C@@BCHS@@B@RVBBD@DADFBAFDFILLRADG@IJCHC†ExFNNBBFGR@LFBDFCXDPADCD[DCBCJKfG^CHEDI@ADARO„BDPFDDBJDFLJFJFR@P[–BZFd@LIVINGFUJ\\`H^HHFBJBJ@VQv@HAXWHGXG^E^ALBLFR@HHHVBDFB\\BNFLJJTPNAHKFMFWDGDCBAHHHDJDXFNDBpMjCDAFEJQFGFC\\@D@FHHALM@ODENQXEZQVA`FNAFAXOLK\\CRFPOJGd@F@LGFCv@RCJEHEHQDCFAB@VJXHJFBDHZDDHFRH\\FzFDBFBLTFHDBLAJAnSxKDBDHF^'], 'encodeOffsets': [[117660, 35108]] }, 'properties': { 'cp': [114.649653, 33.620357], 'name': '周口市', 'childNum': 1 } }, { 'id': '411700', 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': ['@@^LHHJAfOLI`OBE@IFCF@NFFBDCDKDAHDJLFBV@RDFFFBVBlHNADADGNGFC@S@GDCDAFBNLHBFARKBECY@I†DF@XNHCL@D@DFF@RGBINQDEAULK@CAEEI@CDCPADABQFEZEFCFGPSDAPCPBPFJBHADALMBEBOBCDCLCBACICCBCBAF@DBDFB@JBJA@ECEAKBCDCHANDTFN@TAACBGNKBG@ECIFU@KCUIKAQGKCOWMKKAAAWauPAFCFIDAPABG@K@ERAFCBEAKFC@KBEVIDMPADM^BHCDQDIHC@A@aDCJC^BH@FGDMDAH@XFT@LARIFAJ@F@DDFX@RL@VDZBNBFB@LRBFEJCFGBIBABGEIACACPW@QBGDABAFABCHAFGGAEACGC@AEA@QAoHAERUDI@AaOCC@MFIHIHAJCd@LUDCNCJGL]DEDAL@RLD@bBf@XApSLQ@ECCUGAEDCFAbANA\\CdBVOFAFAHBJFLDrCFEBCCK@EHELAFEBEAOBCHENETEH@VDHADADCFOBGCAU@AA@KNK@CGKCK@IJKDCTIDEHKAEI@QBOHIAECAKBEBCHEDABI@ECEKgEEAOBKHEBEAOEKAIHMAE@EGI@AJABCBCCWFAFDH@FDBDAFKJCDBDF@TKHG@WCK@CLBDB@HD@LAEKCAKC@ABOJ@@CKEGDCDBHADKACE@UDAFFDABA@MCEAETK@A@AICAEEDE@GEA@AA@AQDO@OKWOSUK@EF@DFV@JGDWJOCIDYXAFBRADGFGB]GUGC@EBSTiRYDIDuNy@yWK@GBKHEBGAKG@EDKAKIKGQACEAM@KDIHKBI@GGSDqBE@ECCE@IACEAI@OHG@GECGBYBMBEBAD@HBF@BALODM@G@EAEQMI@MGEEEGCMHKBEBCNCDGAIIIQAMBYPCLCDI@]MMBABERE\\AFEBMCQICCAEFQAICECASC[BEDGNEFCBMBOAKCWOcQE@MHkBYMAYHEBE@CGUAMFERIFCBGAICIOEEGCIHKFEdETGjWTMZUBEAE@ICESEWCCCAC@EFO@EYECAAC@E@MKQMCCICAWAEAAENOMBWECAGSQMMGKBC@SX]FWBG@EAAC@WEEGDURE@MGUQEAC@C@OPGDIAEEGKCCEBIJUPIBiAEBCDELDHCPCDMFA@CBEFIBADBJAN@VCRCNCDKFK@ODOHEACECAK@QGEBIL@FDFCRCPA@CDARHNHJBHC@QC@E@CICGCM@BLEFAFIFCDAFBD@BEACD@HFFALCDDDGNADE@OGQAEMGCGAG@KBEFAF@DBBRJBH@LC@GCGAEDAhCHCBCBUA[IAC@MEMBS@AIC[DODA@]SSIG@I@MHC@SAEBCFCn@FB@J@FB@HGJKFABK^DJ@HAHIL@TGFAFC@CACCCK@UGCI@KBIEeCQSGBEBCEMCSAIBOAG@EDORAZKH@RCFOZFZ@POFIJKVEVCDGBiEGBEB[`GDGAIGQCMJOCSDICCE@_ACIBIFELKLAJUJCDAHLVBBCDG@CBCHCFSFKGGB[RePIJMT]NMJK@GAKEMDIAGHQHINCBMKMFOAGDCBELC@CCIU@E@ADELEAMF]AE[AWIJKBCACEAGBC@ASEIOOKGCUIUMGOKOGMBOHE@W]@OGCOCMAGDWPMDE@SGABAVC@OCIDIFQTGBEJCDCBKBKHEBEAGEIK[aMUKMOFKBICIGGJWJKVE@C@KQCAIPCB_JIHSEKDE@EAOBCCK]ECSIMAaAEBABBHKJ@DBBBD@PAHGLDLHHBjCBQBCJEHADDLFFNDHHHNBNHJTJDBNCNGDILIJCHADGJQH@JLBDCLMVMFOBIAIB@DBBFDBJGNKFW@KBGHCF@PEDIBKEC@@JBJ@JBBNJBB@NCJmrAFNPDFAHDLADKHADPXBFABKFAHGHMDABCFBFDLFFFBFBT^RJCD@DJDNPIH@BFP@LBHHRGDKDIAWBOHYFEHEJQJAACOGCqFGDCNK@IFADLTJbN\\J^NR^NNVZVBNFH\\FDBJHHTPHR@ZKdXX@DBNLD@L@REvATEJAVHPNXFXDLHTRLDLFDJFV@HHTBLDFDF`NJB\\ARFRBFAPEFALBZCRDPAB@HFNHH@RQTARSNGDBNTBF@NDD\\IZ@NBHDDHFC\\[BAHBLFRTJTRX@FGDS@MACDK\\MTCPIjLnL|HRHVXTDF@bDL@FEH@DJHDJPNdHJFHPBFFJNpDD\\CH@F\\BDNBžAHHzAHDFRFHLBRTZBVLPTJDL@jAbBXAFA@CNEHELETAB@TRJ@PFB@@HBBX@DBBBDJLFDFBLH@BH@JBBD@PCDBBDDVFBTAFBFBJLHBH@HADAHIDCdG\\ODAJBBCBIB@PDABVHFG@CCCMAMCBE@CAC@ADCBAR@BBPHNBAGFG@CACE@BGAA@EBABCT@HANEEIBCRIZFHAFCDE@GAAOEAC@Cj_BCDJAHF^BB^J\\ELBbPHBX@HBdV'], 'encodeOffsets': [[117028, 34276]] }, 'properties': { 'cp': [114.024736, 32.980169], 'name': '驻马店市', 'childNum': 1 } }, { 'id': '419001', 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': ['@@DFJFJLJDD@BAAQDOD@HXDBF@HABCF[JADCRGDET@BE@GXQFAR@BEIIAON]F@FTJTLFHBL@RIFAJADBH@AC@INKDGBIESC_DC@CA[FECSBIDS@EAEEESK@WGKCMCKCEOIAaOQIEUEYKUMEGM_CEKGGCWDEECIIEiAUDECIIKAGAWBI@U[IQECGCEKEAOAUMC@EBQPCBKEIFA@GKCQCAAE@AJBRCB@JRHBL@DAHQJCBCEG@CBCBCA@MJC@CADEPIAKFACC]AIFQFQEC@EDEJGDeR[JiFU@UEi@CBGJ_LSBKH[JKD[AUDQFOJWTC@MCKIQWICKBIF_Z]RgHIHSfQVGJUN{NWJKFIBECMDMBMCgAC@OFC@GEC@KFADABHP@HNBHEHBRXBHAPBP@FMVAHBJVŽ@DI@CFBDJJ@LELUdUZAH@HDFLHVDRPVJFD@FCHBVAHQhEFYL@DFFBHPCRAXFNAVGVC@CIA@ADCBADADABBLDVHnI`CdOTC\\@FAHMACEE@CDALAdENFXFlBFDRRDBJ@FCCKUgCECEBEB@J@ZHH@TCTDJCL@dDRARH^^JFL@VEXA„WDBJHH@HALELEJJDBJENCVMD@HDRDTBF@RKTIRABNBBJDR@hD`EfLDDGVWDIDADAN'], 'encodeOffsets': [[115320, 36098]] }, 'properties': { 'cp': [112.590047, 35.090378], 'name': '济源市', 'childNum': 1 } }], 'UTF8Encoding': true }


================================================
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