用es6语法封装echarts地图组件

在ES6（ECMAScript 6）语法中，我们可以使用模块化和箭头函数来封装ECharts的地图组件。首先，确保已经安装了`echarts`库和`echarts-gl`插件，用于支持地图渲染。下面是一个简单的封装示例：

import ECharts from 'echarts';
import 'echarts-gl';

// 创建地图配置对象
const mapConfig = {
  // 地图数据源，例如ChinaMapData.js 或者通过API获取
  geo: {
    type: 'vector', // 使用矢量图
    data: ...,
    roam: true, // 自动缩放和平移
    label: { show: false }, // 隐藏标签文字
  },
  visualMap: {
    pieceswise: [
      {min: 0, max: 50, color: ['#313695']}, // 分段颜色映射
      {min: 50, max: 100, color: ['#4575b4']}, // ...
    ],
  },
};

// 容器元素id
const containerId = '#map-container';

// ECharts封装函数
function createMapChart(mapData) {
  const myChart = new ECharts({
    container: containerId,
    library: 'echarts-gl',
    // ...其他ECharts配置项
  });

  // 初始化地图
  myChart.setOption(mapConfig);
  
  return myChart;
}

// 使用示例
const mapChart = createMapChart(mapData); // 替换mapData为你实际的数据

// 更新地图数据或调整视觉映射
mapChart.setOption({geo: {data: newData}});