【项目基础】vue-class-component、vue-property-decorator、vuex-class、GeoJson
vue-class-component
是 Vue 官方提供的一个库，它提供了核心的 @Component 装饰器，让你可以用 ES6 Class 的语法来编写 Vue 组件。
vue-property-decorator
一个用于 Vue.js 的装饰器库，它基于 vue-class-component。它为 Vue 2 提供了一套装饰器，让你可以使用 TypeScript 类的方式 来编写 Vue 组件
vue-class-component: 提供基础的 @Component 装饰器
vue-property-decorator: 在此基础上扩展了 @Prop、@Watch、@Emit 等更多装饰器
vuex-class
它让你可以用装饰器的方式在类组件中使用 Vuex 的 State、Getter、Action 和 Mutation，配合 vue-class-component 使用。
// 声明
// src/enum/store.js
import { namespace } from 'vuex-class';
export const globalModule = namespace('global');
export const formModule = namespace('form');
...
如何使用：
import { globalModule} from '@/enum/store';
// 声明 capacityMap
@globalModule.State capacityMap;
get times() {// 使用const capacityData = this.capacityMap['gz']...
}并不是注册了命名空间就可以调用，需要关联对应的状态管理器，完整的注册流程：
项目里接口请求的顺序
组件 dispatch action → action 调用 service → service 返回数据 → action commit mutation → mutation 更新 state → 组件响应式更新
GeoJSON
一种基于 JSON 的地理空间数据交换格式
支持的几何类型
- Point（点）：单个坐标
- LineString（线）：坐标数组
- Polygon（多边形）：坐标数组的数组
- MultiPoint（多点）
- MultiLineString（多线）
- MultiPolygon（多多边形）
- GeometryCollection（几何集合）
export const getMapGeo = request(`${ossHost}/common/map/${mapSrc}.json`, {method: 'GET',
})import * as echarts from 'echarts';
const chinaGeo = await getMapGeo('china');
echarts.registerMap('china', chinaGeo);myChart.setOption({series: [{type: 'map',map: 'china',roam: true,data: [{ name: '北京', value: 100 },{ name: '上海', value: 200 },],}],
});从阿里云dataV获取免费的GeoJson后根据区域编码adCode生成文件名上传到公司服务器，结合高德的api接口返回当前数据的adCode我能快速地请求到 区域的GEOJSON。
突破Echarts柱类图表单类目轴的分类限制，使类目轴与series脱钩。通过柱体数量和颜色对第一维度数据基于第二维度再次分类
图表间联动①：
图表间联动②：
connect：X轴不需要完全一致
- ❌ 不要求 x 轴的类型、数据、范围必须相同
- ✅ 可以连接不同类型的图表（柱状图、折线图、散点图等）
- ✅ 可以连接 x 轴数据不同的图表
chart1: { xAxis: { data: ['A', 'B', 'C', 'D', 'E'] } }
chart2: { xAxis: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] } }// 拖动 chart1 的 dataZoom 到 20%-80%（显示 B,C,D）
// chart2 也会应用 20%-80%（显示 Tue,Wed,Thu）
// 同步的是百分比范围，不是具体的数据值同步的是百分比范围，不是具体的数据值