# uni-app-echarts-map

**Repository Path**: javascript-ming/uni-app-echarts-map

## Basic Information

- **Project Name**: uni-app-echarts-map
- **Description**: UNI-APP 使用echarts 实现中国地图的散点图
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2020-05-21
- **Last Updated**: 2022-02-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# uni-app-echarts-map

#### 介绍
UNI-APP 使用echarts 实现中国地图的散点图 实现教程。会引用到3个开源项目。

#### 使用的开源项目介绍：
1. [echarts](https://www.baidu.com/link?url=duTRRdiyotioYSI1Y7Sa3w4Z1Lw7HYF2FK9xqtXvMRG1KwnxR75VTeB3lw0sEkf5&wd=&eqid=c10f4c170033f79d000000045ec73289)
2. [echarts-for-weixin](https://github.com/ecomfe/echarts-for-weixin)
3. [echarts-for-wx-uniapp](https://github.com/Zhuyi731/echarts-for-wx-uniapp)


#### 安装教程

1. 地图数据 在 [echarts](https://www.baidu.com/link?url=duTRRdiyotioYSI1Y7Sa3w4Z1Lw7HYF2FK9xqtXvMRG1KwnxR75VTeB3lw0sEkf5&wd=&eqid=c10f4c170033f79d000000045ec73289): 运行```npm install -s echarts``` 后，在 ```node_modules/echarts/map/ ```。js 版本说明：
*  根据 echarts-for-weixin：```echarts-for-weixin/pages/map/mapData.js```: 将 ```/node_modules/echarts/map/china.js``` 提取echarts.registerMap()的第二个参数改造为：```/build/china_rebuild.js```;
*  省市的js 在 ```node_modules/echarts/map/provinces/```目录下。按照上一条的规则修改成新的省市js描述文件。

2. 省市全国概览的地图引入echarts-for-wx-uniapp。
* 在echarts-for-wx-uniapp的 ```uni-ec-canvas/uni-ec-canvas.vue```中initChart(canvas, width, height, canvasDpr) 函数里：
```
initChart(canvas, width, height, canvasDpr) {
    this.$curChart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: canvasDpr
    });
    canvas.setChart(this.$curChart);
    echarts.registerMap('china', china); // 此处在```setOption(this.ec.option)```函数调用前 注册 地图。34省市的地图可以遍历执行。加载所有省份数据后 UNI-APP 编译为小程序存在 编译后主包包太大问题。
    this.$curChart.setOption(this.ec.option);
    return this.$curChart
}
```
* 逻辑承载页面处理：
* echarts 的options配置里要指定 geo属性：
```
geo:{
    map: 'china', // 可以在`uni-ec-canvas/uni-ec-canvas.vue `导入的china.js 里集中 导入省市信息。 
}
```
* 使用散点图时,option配置的series属性：
```
series:[
    {
        type: 'scatter',
		coordinateSystem: 'geo',

    }
]
```