VUE中使用Echarts绘制地图迁移

4,548

踩坑说明

很久以前写jsp时使用过echarts的china.js插件,不过echarts是2.0的,目前vue项目中使用echarts3.8.5,直接将china.js插件引入,代码复制,运行一看,GG。地图中央只有一个光溜溜的南海群岛框框,数据信息也在,可是中国地图背景不见了。网上一查,echart2.0和3.0之间地图有大的改动。走,去官方网站看看。

看了眼,这个例子也算是个比较坑的。参考价值有限。 不过可以参考另一个官方的例子

既然是在Vue中使用,npm i echarts -D,打开node_modules下面看一眼

既然china.js和world.js都已经存在了,直接用吧。 写一个vue的组件

<template>
  <div class="echarts">
    <div :style="{height:'420px',width:'100%'}" ref="myEchart"></div>
  </div>
</template>
<script>
  import echarts from "echarts";
  import 'echarts/map/js/china.js' // 引入中国地图数据
  export default {
    props: ["renderData"],
    data() {
      return {
        chart: null
      };
    },
    mounted() {
      this.initEchartMap();
    },
    beforeDestroy() {
      if (!this.chart) {
        return;
      }
      this.chart.dispose();
      this.chart = null;
    },
    methods: {
      initEchartMap() {
        //console.log(this.renderData)
        //这里我们用固定的数据,真正使用时,用父组件传递来的数据替换series即可
        let myChart = echarts.init(this.$refs.myEchart);     
        window.onresize = myChart.resize;
        myChart.setOption({ 
          backgroundColor: "#0b1225",
          title: {
                text: '每日货盘运行图',
                left: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
          tooltip : {
                trigger: 'item'
            },
          dataRange: {
            show: false,
            min: 0,
            max: 1000,
            text: ['High', 'Low'],
            realtime: true,
            calculable: true,
            color: ['orangered', 'yellow', 'lightskyblue']
          },
          visualMap : {
                show : true,
                min : 0,
                max : 255,
                calculable : true,
                inRange : {
                    color : ['aqua', 'lime', 'yellow', 'orange', '#ff3333']
                },
                textStyle : {
                    color : '#12223b'
                }
            }, 
          geo: { // 这个是重点配置区
            map: 'china', // 表示中国地图
            roam: true,
            layoutCenter : ['50%', '50%'],
			layoutSize : "130%",
            label: {
              normal: {
                show: true, // 是否显示对应地名
                textStyle: {
                  color: 'rgba(0,0,0,0.4)'
                }
              },
            },
            itemStyle: {
              normal: {
                areaColor: '#37376e',
                borderColor: 'rgba(0, 0, 0, 0.2)'
              },
              emphasis: {
                areaColor: null,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          series: [
              {
                    "type": "lines", 
                    "zlevel": 2, 
                    "effect": {
                        "show": true, 
                        "period": 4, 
                        "trailLength": 0.02, 
                        "symbol": "arrow", 
                        "symbolSize": 5
                    }, 
                    "lineStyle": {
                        "normal": {
                            "width": 1, 
                            "opacity": 0.6, 
                            "curveness": 0.2
                        }
                    }, 
                    "tooltip": {
                        "trigger": "item"
                    }, 
                    "data": [
                        {
                            "fromName": "南京", 
                            "toName": "江苏", 
                            "value": 19, 
                            "coords": [
                                [
                                    118.796252, 
                                    32.0739
                                ],
                                [
                                    "119.68", 
                                    "33.199"
                                ]
                            ]
                        }, 
                        {
                            "fromName": "南京", 
                            "toName": "安徽", 
                            "value": 17, 
                            "coords": [
                                
                                [
                                    118.796252, 
                                    32.0739
                                ],
                                [
                                    "117.229", 
                                    "31.917"
                                ], 
                            ]
                        }, 
                        {
                            "fromName": "南京", 
                            "toName": "上海", 
                            "value": 25, 
                            "coords": [
                                [
                                    118.796252, 
                                    32.0739
                                ],
                                [
                                    "121.465", 
                                    "31.289"
                                ], 
                            ]
                        }, 
                        {
                            "fromName": "南京", 
                            "toName": "湖北", 
                            "value": 31, 
                            "coords": [
                                [
                                    118.796252, 
                                    32.0739
                                ],
                                 [
                                    "114.39", 
                                    "30.663"
                                ], 
                            ]
                        }, 
                        {
                            "fromName": "南京", 
                            "toName": "福建", 
                            "value": 12, 
                            "coords": [
                                [
                                    118.796252, 
                                    32.0739
                                ],
                                [
                                    "119.454", 
                                    "25.922"
                                ], 
                            ]
                        }, 
                        {
                            "fromName": "南京", 
                            "toName": "浙江", 
                            "value": 19, 
                            "coords": [  
                                [
                                    118.796252, 
                                    32.0739
                                ],
                                [
                                    "119.531", 
                                    "29.877"
                                ], 
                            ]
                        }, 
                        {
                            "fromName": "南京", 
                            "toName": "陕西", 
                            "value": 18, 
                            "coords": [
                                [
                                    118.796252, 
                                    32.0739
                                ],
                                [
                                    "109.116", 
                                    "34.2"
                                ], 
                            ]
                        }, 
                        {
                            "fromName": "南京", 
                            "toName": "河南", 
                            "value": 15, 
                            "coords": [
                                [
                                    118.796252, 
                                    32.0739
                                ],
                                [
                                    "113.467", 
                                    "34.623"
                                ], 
                            ]
                        }, 
                        {
                            "fromName": "南京", 
                            "toName": "山东", 
                            "value": 12, 
                            "coords": [
                                [
                                    118.796252, 
                                    32.0739
                                ],
                                [
                                    "116.972", 
                                    "36.737"
                                ], 
                            ]
                        }, 
                        {
                            "fromName": "南京", 
                            "toName": "广东", 
                            "value": 12, 
                            "coords": [
                                [
                                    118.796252, 
                                    32.0739
                                ],
                                [
                                    "113.511", 
                                    "23.22"
                                ], 
                            ]
                        }, 
                        {
                            "fromName": "南京", 
                            "toName": "四川", 
                            "value": 10, 
                            "coords": [
                                [
                                    118.796252, 
                                    32.0739
                                ],
                                [
                                    "103.953", 
                                    "30.762"
                                ], 
                            ]
                        }, 
                        {
                            "fromName": "南京", 
                            "toName": "江西", 
                            "value": 9, 
                            "coords": [
                                [
                                    118.796252, 
                                    32.0739
                                ],
                                [
                                    "116.005", 
                                    "28.663"
                                ], 
                            ]
                        }, 
                        {
                            "fromName": "南京", 
                            "toName": "重庆", 
                            "value": 8, 
                            "coords": [
                                [
                                    118.796252, 
                                    32.0739
                                ],
                                [
                                    "106.438", 
                                    "29.581"
                                ], 
                            ]
                        }, 
                        {
                            "fromName": "南京", 
                            "toName": "贵州", 
                            "value": 4, 
                            "coords": [
                                [
                                    118.796252, 
                                    32.0739
                                ],
                                [
                                    "106.71", 
                                    "26.564"
                                ], 
                            ]
                        }, 
                        {
                            "fromName": "南京", 
                            "toName": "山西", 
                            "value": 4, 
                            "coords": [
                                [
                                    118.796252, 
                                    32.0739
                                ],
                                [
                                    "112.593", 
                                    "37.867"
                                ], 
                            ]
                        }, 
                        {
                            "fromName": "南京", 
                            "toName": "湖南", 
                            "value": 4, 
                            "coords": [
                                [
                                    118.796252, 
                                    32.0739
                                ],
                                [
                                    "113.082", 
                                    "28.257"
                                ], 
                            ]
                        }, 
                        {
                            "fromName": "南京", 
                            "toName": "吉林", 
                            "value": 3, 
                            "coords": [
                                [
                                    118.796252, 
                                    32.0739
                                ],
                                 [
                                    "125.815", 
                                    "44.258"
                                ], 
                            ]
                        }, 
                        {
                            "fromName": "南京", 
                            "toName": "广西", 
                            "value": 2, 
                            "coords": [
                                [
                                    118.796252, 
                                    32.0739
                                ],
                                [
                                    "107.88", 
                                    "22.863"
                                ], 
                            ]
                        }, 
                    ]
              },
              {     
                    "name": "收货地址",
                    "type": "effectScatter", 
                    "coordinateSystem": "geo", 
                    "zlevel": 2, 
                    "rippleEffect": {
                        "period": 4, 
                        "brushType": "stroke", 
                        "scale": 4
                    }, 
                    "tooltip": {
                        "trigger": "item"
                    }, 
                    "label": {
                        "normal": {
                            "show": true, 
                            "position": "left", 
                            "offset": [
                                -5, 
                                5
                            ], 
                            "formatter": "{b}"
                        }, 
                        "emphasis": {
                            "show": true
                        }
                    }, 
                    "hoverAnimation": true,
                    "symbol": "circle", 
                    "symbolSize": 5, 
                    "itemStyle": {
                        "normal": {
                            "show": false, 
                            "color": "#f00"
                        }
                    }, 
                    "data": [
                        {
                            "name": "江苏", 
                            "value": [
                                "119.68", 
                                "33.199", 
                                19
                            ]
                        }, 
                        {
                            "name": "安徽", 
                            "value": [
                                "117.229", 
                                "31.917", 
                                17
                            ]
                        }, 
                        {
                            "name": "上海", 
                            "value": [
                                "121.465", 
                                "31.289", 
                                25
                            ]
                        }, 
                        {
                            "name": "湖北", 
                            "value": [
                                "114.39", 
                                "30.663", 
                                31
                            ]
                        }, 
                        {
                            "name": "福建", 
                            "value": [
                                "119.454", 
                                "25.922", 
                                22
                            ]
                        }, 
                        {
                            "name": "浙江", 
                            "value": [
                                "119.531", 
                                "29.877", 
                                19
                            ]
                        }, 
                        {
                            "name": "陕西", 
                            "value": [
                                "109.116", 
                                "34.2", 
                                18
                            ]
                        }, 
                        {
                            "name": "河南", 
                            "value": [
                                "113.467", 
                                "34.623", 
                                15
                            ]
                        }, 
                        {
                            "name": "山东", 
                            "value": [
                                "116.972", 
                                "36.737", 
                                12
                            ]
                        }, 
                        {
                            "name": "广东", 
                            "value": [
                                "113.511", 
                                "23.22", 
                                12
                            ]
                        }, 
                        {
                            "name": "四川", 
                            "value": [
                                "103.953", 
                                "30.762", 
                                10
                            ]
                        }, 
                        {
                            "name": "江西", 
                            "value": [
                                "116.005", 
                                "28.663", 
                                9
                            ]
                        }, 
                        {
                            "name": "重庆", 
                            "value": [
                                "106.438", 
                                "29.581", 
                                8
                            ]
                        }, 
                        {
                            "name": "贵州", 
                            "value": [
                                "106.71", 
                                "26.564", 
                                4
                            ]
                        }, 
                        {
                            "name": "山西", 
                            "value": [
                                "112.593", 
                                "37.867", 
                                4
                            ]
                        }, 
                        {
                            "name": "湖南", 
                            "value": [
                                "113.082", 
                                "28.257", 
                                4
                            ]
                        }, 
                        {
                            "name": "吉林", 
                            "value": [
                                "125.815", 
                                "44.258", 
                                3
                            ]
                        }, 
                        {
                            "name": "广西", 
                            "value": [
                                "107.88", 
                                "22.863", 
                                2
                            ]
                        }, 
                    ]
              },
              {
                "name": "发送地址",
                "type": "scatter", 
                "coordinateSystem": "geo", 
                "zlevel": 2, 
                "tooltip": {
                    "trigger": "item"
                }, 
                "label": {
                    "normal": {
                        "show": true, 
                        "position": "right", 
                        "color": "#00ffff", 
                        "formatter": "{b}", 
                        "textStyle": {
                            "color": "#00ffff"
                        }
                    }, 
                    "emphasis": {
                        "show": true
                    }
                }, 
                "symbol": "circle", 
                "symbolSize": 20, 
                "itemStyle": {
                    "normal": {
                        "show": true, 
                        "color": "#EE0000"
                    }
                }, 
                "data": [
                    {
                        "name": "南京", 
                        "value": [
                            118.796252, 
                            32.0739
                        ]
                    }
                ]
            }
          ]
        })
      }
    }
  }
</script>

注意说明下:series数组中由三个对象构成,起始点对象,终点对象和连线对象,可以根据自己需求在参数内设置各自的选项。写的时候多参考参考echarts配置项手册