微信小程序+echart

微信小程序+echart

一、加载echart特定区域地图

1、下载echarts小程序组件并放置到具体项目

组件下载地址

将代码拉取到本地，复制 ec-canvas 文件夹到小程序项目中（可在项目最外层创建component文件夹，后期如有其他组件引入，也可放入该文件夹下）

2、下载特定区域地图——JSON数据

地图数据下载地址

将山西省的JSON数据在浏览器中打开，CTRL+A，CTRL+C复制到js文件中，可在需要加载地图的页面文件夹下新建shanxi.js文件，使用module.exports = 页面上复制的内容将数据导出。

3、需求页面使用组件

修改需要使用地图页面的json文件，引入组件地址

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

修改需要使用地图页面的js文件，将echarts组件及导出的JSON数据引入

import * as echarts from '../../component/ec-canvas/echarts';
import sxData from './shanxi';

4、在页面wxml文件添加canvas地图容器

<view class="map-content">
    <ec-canvas id="mychart-dom-map" canvas-id="mychart-map" ec="{
   
   { ecMap }}" force-use-old-canvas="true"></ec-canvas>
</view>

样式根据需要自行调整
force-use-old-canvas="true"是为了解决echarts在滑动屏幕时不跟随scroll滑动

图表不跟随父元素及页面滑动
（1）增加force-use-old-canvas="true"属性
（2）看是否在 config里设置了config = {“disableScroll”:true}，如果设置了需去掉
（3）看是否给外层标签定义了height：100%的属性或者overflow相关属性，如果设置了需去掉
（4）检查canvas的所有父级元素是否设置了height：100%，overflow相关属性(visible除外)，以及position相关的属性(relative,static除外)，如果设置了需去掉

5、定义初始化方法 initChart 并在data中声明参数 ecMap

var dataGeo = []; //散点图数据，可在请求接口成功后赋值
// 定义初始化方法 initChart
function initChart(canvas, width, height) {
   
   
	chart = echarts.init(canvas, null, {
   
   
	  width: width,
	  height: height
	});
	canvas.setChart(chart);
	echarts.registerMap('sx', sxData);
	var mapOption = {
   
   
		geo: {
   
   
			map: "sx",
			// roam: true, //拖拽及缩放
			zoom: 1.1,
			silent: true, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件
			top: 20,
			bottom: 20,
			scaleLimit: {
   
   
			  //滚轮缩放的极限控制
			  min: 0.5,
			  max: 20,
			},
			label: {
   
   
			  normal: {
   
   
				show: true,
				fontSize: "10",
				color: "rgba(0,0,0,0.7)",
			  },
			},
			itemStyle: {
   
   
			  normal: {
   
   
				areaColor:"#E6F3FF", // 地图填充颜色
				borderColor: "#1E9EFF", //边线颜色
			  },
			  emphasis: {
   
   
				areaColor: "#C9E2FC", //高亮状态(鼠标移入后)颜色
			  },
			},
		  },
		series: [{
   
   
			name: '项目散点图',
			type: 'scatter', //散点图
			coordinateSystem: 'geo',
			showAllSymbol: true,
			// 点颜色设置
			itemStyle: {
   
   
				color: '#FFC730'
			},
			symbolSize: 8,  // 散点的大小
			data: dataGeo, //一般为接口返回数据
		  }],
	};
	chart.setOption(mapOption);
	return chart;
  }
Page({
   
   
	data:{
   
   
		ecMap: {
   
   
			onInit: initChart 
		}
	}
})

6、其他

（1）如需添加事件，如点击事件（可在initChart初始化时添加）

chart.on('click',function(params){
   
   
	console.log(params)
	// TODO 需要执行的方法
});

（2）地图容器内添加按钮，可在mapOption中新增graphic属性

graphic: [
	{
   
   
		type: 'group',
		right: 20,
		top: 5,
		children: [
			{
   
   
				type: 'rect', //矩形外框
				left: 'center',
				top: 'middle',
				shape: {
   
   
					width: 60,
					height: 30,
				},
				style: {
   
   
					fill: '#1E9EFF',
				}
			},
			{
   
   
				type: 'text', //框内文字
				z: 100,
				left: 'center',
				top: 'middle',
				style: {
   
   
					fill: '#fff',
					text: