地图开发

src/components/echarts/ChinaMap/index.vue

+<template>
+    <chart-el :chartOpt="chartConf" />
+</template>
+
+<script>
+import mixinChart from 'runner/common/mixins/mixinChart'
+import './registerMap'
+
+export default {
+    name: 'ChinaMap',
+
+    mixins: [mixinChart],
+
+    data () {
+        return {
+            chartConf: {}
+        }
+    },
+
+    props: {
+        // 图表布局配置 - width, height
+        layout: {
+            type: Object,
+            default () {
+                return {
+                    width: '100%',
+                    height: '740px'
+                }
+            }
+        },
+
+        // 图表配置
+        option: {
+            type: Object,
+            default () {
+                return {
+                    base: {},
+                    seriesData: []
+                }
+            }
+        }
+    },
+
+    mounted () {
+        this.initComponents()
+    },
+
+    methods: {
+        initComponents () {
+            const { width = '', height = '', id = 'china-map' } = this.layout
+            const option = this.getChartOption() || {}
+            this.chartConf = {
+                width,
+                height,
+                option,
+                id
+            }
+        },
+
+        /**
+         * @method getSeriesData 图表数据
+         */
+        getSeriesData () {
+            const defSeriesOpts = {
+                type: 'lines',
+                zlevel: 2,
+                effect: {
+                    show: true,
+                    period: 4, // 箭头指向速度，值越小速度越快
+                    trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
+                    symbol: 'arrow', // 箭头图标
+                    color: '#31E4FF',
+                    symbolSize: 5 // 图标大小
+                },
+                lineStyle: {
+                    show: true,
+                    normal: {
+                        width: 0.5, // 尾迹线条宽度
+                        opacity: 1, // 尾迹线条透明度
+                        color: '#fff',
+                        curveness: 0.3 // 尾迹线条曲直度
+                    }
+                },
+                data: []
+            }
+
+            // ================= 以下无需改动 ==================
+            let result = [defSeriesOpts]
+            const { seriesData = [] } = this.option
+            if (seriesData.length) {
+                const temp = []
+                seriesData.forEach(item => {
+                    temp.push(this.deepMerge({}, defSeriesOpts, item))
+                })
+                result = temp
+            }
+
+            // ================== 如果有多个series且`type`与当前不同在下方直接push ===================
+            // result.push({
+            //      type: 'Gauge'
+            //      ...
+            // })
+
+            return result
+        },
+
+        /**
+         * @method getSeriesData 图表数据
+         */
+        getChartOption () {
+            const defaultOption = {
+                // ================== 除series外的其他所有option ==================
+                tooltip: {
+                    trigger: 'item',
+                    borderColor: '#FFFFCC',
+                    showDelay: 0,
+                    hideDelay: 0,
+                    enterable: true,
+                    transitionDuration: 0,
+                    extraCssText: 'z-index:100',
+                    formatter: function (params, ticket, callback) {
+                        // 根据业务自己拓展要显示的内容
+                        var name = params.name
+                        return name
+                    }
+                },
+                visualMap: { // 图例值控制
+                    show: false,
+                    color: ['#31EEFF']
+                },
+                geo: {
+                    map: 'china',
+                    zoom: 1.2,
+                    label: {
+                        show: true,
+                        fontSize: 16,
+                        color: '#E6EFF9'
+                    },
+                    roam: false, // 是否允许缩放
+                    emphasis: {
+                        label: {
+                            show: true,
+                            fontSize: 16,
+                            color: '#E6EFF9'
+                        }
+                    },
+                    itemStyle: {
+                        normal: {
+                            areaColor: '#00192E',
+                            borderWidth: 1, // 设置外层边框
+                            borderColor: '#126490'
+                        },
+                        emphasis: {
+                            areaColor: '#00192E',
+                            shadowColor: '#11638E',
+                            shadowBlur: 20,
+                            label: {
+                                color: '#fff',
+                                fontSize: 20
+                            }
+                        }
+                    }
+                }
+            }
+
+            // ================== 以下无需改动 ==================
+            // 添加series
+            const result = this.deepMerge({}, defaultOption, this.option.base)
+            result.series = this.getSeriesData()
+
+            return result
+        }
+    }
+}
+</script>

src/components/echarts/ChinaMap/mapConfig.js

+export default {
+    // TODO: 各省经纬度
+    getChinaGeoCoordMap () {
+        return {
+            '黑龙江': [127.9688, 45.368],
+            '内蒙古': [110.3467, 41.4899],
+            '吉林': [125.8154, 44.2584],
+            '北京市': [116.4551, 40.2539],
+            '辽宁': [123.1238, 42.1216],
+            '河北': [114.4995, 38.1006],
+            '天津': [117.4219, 39.4189],
+            '山西': [112.3352, 37.9413],
+            '陕西': [109.1162, 34.2004],
+            '甘肃': [103.5901, 36.3043],
+            '宁夏': [106.3586, 38.1775],
+            '青海': [101.4038, 36.8207],
+            '新疆': [87.9236, 43.5883],
+            '西藏': [91.11, 29.97],
+            '四川': [103.9526, 30.7617],
+            '重庆': [108.384366, 30.439702],
+            '山东': [117.1582, 36.8701],
+            '河南': [113.4668, 34.6234],
+            '江苏': [118.8062, 31.9208],
+            '南通': [120.864608, 32.016212],
+            '安徽': [117.29, 32.0581],
+            '湖北': [114.3896, 30.6628],
+            '浙江': [119.5313, 29.8773],
+            '福建': [119.4543, 25.9222],
+            '江西': [116.0046, 28.6633],
+            '湖南': [113.0823, 28.2568],
+            '贵州': [106.6992, 26.7682],
+            '云南': [102.9199, 25.4663],
+            '广东': [113.12244, 23.009505],
+            '广西': [108.479, 23.1152],
+            '海南': [110.3893, 19.8516],
+            '上海': [121.4648, 31.2891]
+        }
+    },
+
+    // 地图数据
+    getChinaDatas () {
+        return [
+            [{
+                name: '黑龙江',
+                value: 0
+            }],
+            [{
+                name: '内蒙古',
+                value: 0
+            }],
+            [{
+                name: '吉林',
+                value: 0
+            }],
+            [{
+                name: '辽宁',
+                value: 0
+            }],
+            [{
+                name: '河北',
+                value: 0
+            }],
+            [{
+                name: '天津',
+                value: 0
+            }],
+            [{
+                name: '山西',
+                value: 0
+            }],
+            [{
+                name: '陕西',
+                value: 0
+            }],
+            [{
+                name: '甘肃',
+                value: 0
+            }],
+            [{
+                name: '宁夏',
+                value: 0
+            }],
+            [{
+                name: '青海',
+                value: 0
+            }],
+            [{
+                name: '新疆',
+                value: 0
+            }],
+            [{
+                name: '西藏',
+                value: 0
+            }],
+            [{
+                name: '四川',
+                value: 0
+            }],
+            [{
+                name: '重庆',
+                value: 0
+            }],
+            [{
+                name: '山东',
+                value: 0
+            }],
+            [{
+                name: '河南',
+                value: 0
+            }],
+            [{
+                name: '江苏',
+                value: 0
+            }],
+            [{
+                name: '南通',
+                value: 0
+            }],
+            [{
+                name: '安徽',
+                value: 0
+            }],
+            [{
+                name: '湖北',
+                value: 0
+            }],
+            [{
+                name: '浙江',
+                value: 0
+            }],
+            [{
+                name: '福建',
+                value: 0
+            }],
+            [{
+                name: '江西',
+                value: 0
+            }],
+            [{
+                name: '湖南',
+                value: 0
+            }],
+            [{
+                name: '贵州',
+                value: 0
+            }],
+            [{
+                name: '广西',
+                value: 0
+            }],
+            [{
+                name: '海南',
+                value: 0
+            }],
+            [{
+                name: '上海',
+                value: 1
+            }]
+        ]
+    }
+}