<template>
  <div ref="charts" class="echarts"></div>
</template>
<script>
import * as echarts from "echarts";
import * as geo from "./geo_data"
import china from "./geojson.json"

export default {
  name: "mapTransportLine",
  components: {geo},
  data() {
    return {
      BJData: [[{name: '成都'}, {name: '潍坊', value: 5}],
        [{name: '潍坊'}, {name: '西宁', value: 5}]],
      series: [],
      chart: null,
      option: {
        backgroundColor: '#404a59',
        tooltip: {
          trigger: 'item'
        },
        legend: {},
        geo: {
          map: 'china',
          layoutCenter: ['50%', '70%'],// 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
          layoutSize: 100,
          zoom: 7,
          label: {
            emphasis: {
              show: false
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: '#323c48',
              borderColor: '#404a59'
            },
            emphasis: {
              areaColor: '#2a333d'
            }
          }
        },
        series: [{
          "type": "lines",
          "zlevel": 1,
          "effect": {"show": true, "period": 6, "trailLength": 0.7, "color": "#fff", "symbolSize": 3},
          "lineStyle": {"normal": {"color": "#a6c84c", "width": 0, "curveness": 0.2}},
          "data": [{"fromName": "成都", "toName": "潍坊", "coords": [[103.9526, 30.7617], [119.0918, 36.524]]}]
        }, {
          "type": "lines",
          "zlevel": 2,
          "effect": {"show": true, "period": 6, "trailLength": 0, "symbolSize": 5},
          "lineStyle": {"normal": {"color": "#a6c84c", "width": 1, "opacity": 0.4, "curveness": 0.2}},
          "data": [{"fromName": "成都", "toName": "潍坊", "coords": [[103.9526, 30.7617], [119.0918, 36.524]]}]
        }, {
          "type": "effectScatter",
          "coordinateSystem": "geo",
          "zlevel": 2,
          "rippleEffect": {"brushType": "stroke"},
          "label": {"normal": {"show": true, "position": "right", "formatter": "{b}"}},
          "itemStyle": {"normal": {"color": "#a6c84c"}},
          "data": [{"name": "潍坊", "value": [119.0918, 36.524, 5]}]
        }]
      }
    };
  },
  props: {},
  methods: {
    convertData(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = geo.geoCoordMap[dataItem[0].name];
        var toCoord = geo.geoCoordMap[dataItem[1].name];
        if (fromCoord && toCoord) {
          res.push({
            fromName: dataItem[0].name,
            toName: dataItem[1].name,
            coords: [fromCoord, toCoord]
          });
        }
      }
      return res;
    },
    initData() {
      const vm = this; // 捕获Vue实例
      const color = ['#a6c84c', '#ffa022', '#46bee9'];
      [['北京', this.BJData]].forEach(function (item, i) {
        vm.series.push({
              name: item[0] + ' Top10',
              type: 'lines',
              zlevel: 1,
              effect: {
                show: true,
                period: 6,
                trailLength: 0.7,
                color: '#fff',
                symbolSize: 3
              },
              lineStyle: {
                normal: {
                  color: color[i],
                  width: 0,
                  curveness: 0.2
                }
              },
              data: vm.convertData(item[1])
            },
            {
              name: item[0] + ' Top10',
              type: 'lines',
              zlevel: 2,
              effect: {
                show: true,
                period: 6,
                trailLength: 0,
                //symbol: planePath,
                symbolSize: 5
              },
              lineStyle: {
                normal: {
                  color: color[i],
                  width: 1,
                  opacity: 0.4,
                  curveness: 0.2
                }
              },
              data: vm.convertData(item[1])
            },
            {
              name: item[0] + ' Top10',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              zlevel: 2,
              rippleEffect: {
                brushType: 'stroke'
              },
              label: {
                normal: {
                  show: true,
                  position: 'right',
                  formatter: '{b}'
                }
              },
              symbolSize: function (val) {
                return val[2] / 8;
              },
              itemStyle: {
                normal: {
                  color: color[i]
                }
              },
              data: item[1].map(function (dataItem) {
                return {
                  name: dataItem[1].name,
                  value: geo.geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                };
              })
            });
      });
    }
  },
  computed: {},
  mounted() {
    this.initData()
    //注意，第一个参数的名字必须和option.geo.map一致
    let chartDom = this.$refs.charts;
    this.chart = echarts.init(chartDom);
    echarts.registerMap('china', china);
    this.chart.setOption(this.option);
    window.addEventListener('resize', this.chart.resize);
  }
};
</script>
<style scoped>

</style>
