<template>
  <div class="center-right">
    <div class="bs-card business-serve">
      <div class="bs-card__title jc-between">
        <p class="bs-card__title--text">
          商业化服务
        </p>
      </div>

      <div>
        <div id="business-serve-pie-chart"></div>
      </div>
    </div>
    <div class="bs-card serve-map">
      <div class="bs-card__title jc-between">
        <p class="bs-card__title--text">
          服务地图
        </p>
      </div>

      <div>
        <div id="serve-map-fly-line"></div>
      </div>
    </div>
  </div>
</template>

<script>
import China from "echarts/map/json/china.json"
import echarts from 'echarts'
export default {
  data() {
    return {
    }
  },
  methods: {
    initFlyLine () {
      this.flyLineChart = echarts.init(document.querySelector('#serve-map-fly-line'));
      echarts.registerMap('china', China)
      this.setFlyLineOptions(this.flyLineChartData);
    },
    setFlyLineOptions (chartdata) {
      this.flyLineChart.setOption({
        visualMap: {
          show: false,
          type: 'continuous',
          calculable: true,
          left: '0%',
          bottom: '3%',
          dimension: 0, // 指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度
          seriesIndex: 1,
          itemWidth: 15, // 图形的宽度，即长条的宽度。
          itemHeight: 68,
          min: 0,
          // max: that.mapmax,
          // color: ['#01fffd', '#1E74FF'],
          // color: ['#0B64F3', '#1A05B8'],
          color: ['#007EF9 ', '#0B275E'],
          textStyle: {
            color: '#ccc',
            fontSize: 12
          }
        },
        tooltip: {
          // 轮播框
          enterable: true,
          transitionDuration: 1,
          textStyle: {
            fontFamily: 'Microsoft YaHei',
            color: '#b8c8e5',
            fontSize: 13
          },
          backgroundColor: 'rgba(15,33,70,0.7)',
          borderColor: 'rgba(54,82,132,0.7)',
          borderWidth: 1,
          padding: [10, 14],
          extraCssText: 'z-index:4',
          formatter: function (parma) {
            if(parma.seriesType === 'effectScatter') {
              return parma.name
            } else {
              return  parma.name
            }
          }
        },
        legend: {
          show: false,
          color: ['#5bffde'],
          icon: 'circle', // 只显示小圆点

          top: '10.7%',
          // bottom: '2.8%',
          left: '2%',
          itemGap: 22,
          itemWidth: 8, // 图例图形宽度
          textStyle: {
            color: '#ffff',
            fontSize: 14,
            fontWeight: 'normal',
            // align: "left",
            padding: [0, 3],
            fontFamily: 'Microsoft YaHei'
          },
          itemHeight: 8 // 改变圆圈大小
        },
        geo: {
          zoom: 1.22, // 缩放比例
          top: '11%',
          left: '20%',
          show: true,
          aspectScale: 0.85,
          silent: true, // 鼠标事件是否开启
          animation: true,
          map: 'china',
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          roam: false, //是否可缩放
          //  aspectScale: 1, //长宽比
          // 这里是重点！！！
          regions: [
            {
              name: '南海诸岛',
              itemStyle: {
                // 隐藏地图
                normal: {
                  opacity: 0 // 为 0 时不绘制该图形
                }
              },
              label: {
                show: false // 隐藏文字
              }
            }
          ],

          itemStyle: {
            normal: {
              // areaColor: '#122C69', // #415ef7
              borderColor: '#122C69',
              shadowColor: '#122C69',
              shadowOffsetX: 1,
              shadowOffsetY: 9
              // borderWidth: 3,
            },
            emphasis: {
              areaColor: '#4499d0'
            }
          }
        },
        series: [
          {
            name: '背景地图',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            symbolSize: function () {
              return 8
            },
            // data: mapData,
            data: [],
            rippleEffect: {
              period: 4,
              scale: 1.5,
              brushType: 'stroke'
            },
            label: {
              normal: {
                formatter: '{b}',
                position: 'bottom',
                show: false
              },
              emphasis: {
                show: false
              }
            },
            showEffectOn: 'render',
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: '#5bffde' // 点的颜色
              },
              label: {
                show: false
              },
              // 高亮 鼠标移上去
              // emphasis: {
              //   color: 'red'
              // }
            },
            // select: {
            //   // 选中
            //   itemStyle: {
            //     color: 'yellow'
            //   }
            // },
            zlevel: 1
          },
          {
            // 真的地图
            type: 'map',
            map: 'china',
            zoom: 1.22, // 缩放比例
            geoIndex: 1,
            left: '20%',
            top: '11%',
            aspectScale: 0.85, // 长宽比
            showLegendSymbol: true, // 存在legend时显示
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            roam: false,
            itemStyle: {
              normal: {
                color: 'none',
                areaColor:'#dce5ee', //'#01032a',
                borderColor: '#246BD2', // 4065eb
                borderWidth: 1,
              },
              emphasis: {
                areaColor: '#34d1fc'
              }
            },
            select: {
              // 选中时样式
              label: {
                color: '#fff'
              },
              itemStyle: {
                areaColor: '#34d1fc'
              }
            },
            animation: true,

            data: []
            // data: that.maparr
          },
          {
            name: '大网点',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            symbolSize: function () {
              return 14
            },
            data: [
              {
                name: '当前重点的地址名称',
                value:  {
                  visualMap: {
                    show: false,
                    type: 'continuous',
                    calculable: true,
                    left: '0%',
                    bottom: '3%',
                    dimension: 0, // 指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度
                    seriesIndex: 1,
                    itemWidth: 15, // 图形的宽度，即长条的宽度。
                    itemHeight: 68,
                    min: 0,
                    // max: that.mapmax,
                    // color: ['#01fffd', '#1E74FF'],
                    // color: ['#0B64F3', '#1A05B8'],
                    color: ['#007EF9 ', '#0B275E'],
                    textStyle: {
                      color: '#ccc',
                      fontSize: 12
                    }
                  },
                  tooltip: {
                    // 轮播框
                    enterable: true,
                    transitionDuration: 1,
                    textStyle: {
                      fontFamily: 'Microsoft YaHei',
                      color: '#b8c8e5',
                      fontSize: 13
                    },
                    backgroundColor: 'rgba(15,33,70,0.7)',
                    borderColor: 'rgba(54,82,132,0.7)',
                    borderWidth: 1,
                    padding: [10, 14],
                    extraCssText: 'z-index:4',
                    formatter: function (parma) {
                      if(parma.seriesType === 'effectScatter') {
                        return parma.name
                      } else {
                        return  parma.name
                      }
                    }
                  },
                  legend: {
                    show: false,
                    color: ['#5bffde'],
                    icon: 'circle', // 只显示小圆点

                    top: '10.7%',
                    // bottom: '2.8%',
                    left: '2%',
                    itemGap: 22,
                    itemWidth: 8, // 图例图形宽度
                    textStyle: {
                      color: '#ffff',
                      fontSize: 14,
                      fontWeight: 'normal',
                      // align: "left",
                      padding: [0, 3],
                      fontFamily: 'Microsoft YaHei'
                    },
                    itemHeight: 8 // 改变圆圈大小
                  },
                  geo: {
                    zoom: 1.22, // 缩放比例
                    top: '11%',
                    left: '20%',
                    show: true,
                    aspectScale: 0.85,
                    silent: true, // 鼠标事件是否开启
                    animation: true,
                    map: 'china',
                    label: {
                      normal: {
                        show: false
                      },
                      emphasis: {
                        show: false
                      }
                    },
                    roam: false, //是否可缩放
                    //  aspectScale: 1, //长宽比
                    // 这里是重点！！！
                    regions: [
                      {
                        name: '南海诸岛',
                        itemStyle: {
                          // 隐藏地图
                          normal: {
                            opacity: 0 // 为 0 时不绘制该图形
                          }
                        },
                        label: {
                          show: false // 隐藏文字
                        }
                      }
                    ],

                    itemStyle: {
                      normal: {
                        // areaColor: '#122C69', // #415ef7
                        borderColor: '#122C69',
                        shadowColor: '#122C69',
                        shadowOffsetX: 1,
                        shadowOffsetY: 9
                        // borderWidth: 3,
                      },
                      emphasis: {
                        areaColor: '#4499d0'
                      }
                    }
                  },
                  series: [
                    {
                      name: '接单网点',
                      type: 'effectScatter',
                      coordinateSystem: 'geo',
                      symbolSize: function () {
                        return 8
                      },
                      // data: mapData,
                      data: [],
                      rippleEffect: {
                        period: 4,
                        scale: 1.5,
                        brushType: 'stroke'
                      },
                      label: {
                        normal: {
                          formatter: '{b}',
                          position: 'bottom',
                          show: false
                        },
                        emphasis: {
                          show: false
                        }
                      },
                      showEffectOn: 'render',
                      hoverAnimation: true,
                      itemStyle: {
                        normal: {
                          color: '#5bffde' // 点的颜色
                        },
                        label: {
                          show: false
                        },
                        // 高亮 鼠标移上去
                        // emphasis: {
                        //   color: 'red'
                        // }
                      },
                      // select: {
                      //   // 选中
                      //   itemStyle: {
                      //     color: 'yellow'
                      //   }
                      // },
                      zlevel: 1
                    },
                    {
                      // 真的地图
                      type: 'map',
                      map: 'china',
                      zoom: 1.22, // 缩放比例
                      geoIndex: 1,
                      left: '20%',
                      top: '11%',
                      aspectScale: 0.85, // 长宽比
                      showLegendSymbol: true, // 存在legend时显示
                      label: {
                        normal: {
                          show: false
                        },
                        emphasis: {
                          show: false,
                          textStyle: {
                            color: '#fff'
                          }
                        }
                      },
                      roam: false,
                      itemStyle: {
                        normal: {
                          color: 'none',
                          areaColor:'#122C69', //'#01032a',
                          borderColor: '#246BD2', // 4065eb
                          borderWidth: 1
                        },
                        emphasis: {
                          areaColor: '#34d1fc'
                        }
                      },
                      select: {
                        // 选中时样式
                        label: {
                          color: '#fff'
                        },
                        itemStyle: {
                          areaColor: '#34d1fc'
                        }
                      },
                      animation: true,

                      data: []
                      // data: that.maparr
                    },
                    {
                      name: '网点',
                      type: 'effectScatter',
                      coordinateSystem: 'geo',
                      symbolSize: function () {
                        return 14
                      },
                      data: [
                        {
                          name: '终点名称-广东',
                          value: ['113.746262', '23.046237'] // 当前终点的经纬度
                        }
                      ],
                      rippleEffect: {
                        period: 4,
                        scale: 1.5,
                        brushType: 'stroke'
                      },
                      label: {
                        normal: {
                          formatter: '{b}',
                          position: 'bottom',
                          show: false
                        },
                        emphasis: {
                          show: false
                        }
                      },
                      showEffectOn: 'render',
                      hoverAnimation: true,
                      itemStyle: {
                        normal: {
                          color: '#5bffde' // 点的颜色
                        },
                        label: {
                          show: false
                        },
                        // 高亮 鼠标移上去
                        // emphasis: {
                        //   color: 'red'
                        // }
                      },
                      // select: {
                      //   // 选中
                      //   itemStyle: {
                      //     color: 'yellow'
                      //   }
                      // },
                      zlevel: 2
                    },
                    {
                      type: 'lines',
                      zlevel: 1,
                      effect: {
                        show: true,
                        period: 6, //箭头指向速度，值越小速度越快
                        trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                        symbol: 'arrow', //箭头图标
                        symbolSize: 6 //图标大小
                      },
                      label: {
                        emphasis: {
                          show: false
                        }
                      },
                      lineStyle: {
                        normal: {
                          width: 1, //尾迹线条宽度
                          color: '#27C7E9',
                          opacity: 1, //尾迹线条透明度
                          curveness: 0.3 //尾迹线条曲直度
                        }
                      },
                      data: []
                    }
                  ]
                }
              }
            ],
            rippleEffect: {
              period: 4,
              scale: 1.5,
              brushType: 'stroke'
            },
            label: {
              normal: {
                formatter: '{b}',
                position: 'bottom',
                show: false
              },
              emphasis: {
                show: false
              }
            },
            showEffectOn: 'render',
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: '#5bffde' // 点的颜色
              },
              label: {
                show: false
              },
              // 高亮 鼠标移上去
              // emphasis: {
              //   color: 'red'
              // }
            },
            // select: {
            //   // 选中
            //   itemStyle: {
            //     color: 'yellow'
            //   }
            // },
            zlevel: 2
          },
          {
            type: 'lines',
            zlevel: 1,
            effect: {
              show: true,
              period: 6, //箭头指向速度，值越小速度越快
              trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: 'arrow', //箭头图标
              symbolSize: 6 //图标大小
            },
            label: {
              emphasis: {
                show: false
              }
            },
            lineStyle: {
              normal: {
                width: 1, //尾迹线条宽度
                color: '#27C7E9',
                opacity: 1, //尾迹线条透明度
                curveness: 0.3 //尾迹线条曲直度
              }
            },
            data: [
              [
                {    // 第一个起点的经纬度配置
                  coord:['119.946973', '31.772752'],
                  value: "0000100101"
                },
                {
                  coord: ['113.746262', '23.046237'] // 跟上面的广东那一层的经纬度对应
                }
              ],
              [
                {    // 第二个起点的经纬度配置
                  coord:['119.946973', '31.772752'],
                  value: "0000100101"
                },
                {
                  coord: ['113.746262', '23.046237'] // 跟上面的广东那一层的经纬度对应
                }
              ]
            ]
          }
        ]
      })
    },

    initChart() {
      this.chart = echarts.init(document.querySelector('#business-serve-pie-chart'));
      this.setOptions(this.chartData);
    },
    setOptions() {
      this.chart.setOption({
        title: {
          show: false,
        },
        tooltip: {
          trigger: 'item'
        },
        visualMap: {
          show: false,
          min: 60,
          max: 600,
          inRange: {
            colorLightness: [0, 1]
          }
        },
        series: [
          {
            type: 'pie',
            radius: '60%',
            center: ['50%', '50%'],
            data: [
              {
                value: 550,
                name: '居家照护',
                itemStyle: {
                  color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                    {
                      offset: 0,
                      color: '#7a2cf5'
                    },
                    {
                      offset: 1,
                      color: '#b274f7'
                    }
                  ])
                }
              },
              {
                value: 510,
                name: '陪诊',
                itemStyle: {
                  color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                    {
                      offset: 0,
                      color: '#53a2c1'
                    },
                    {
                      offset: 1,
                      color: '#6fe8fb'
                    }
                  ])
                }
              },
              {
                value: 510,
                name: '问诊',
                itemStyle: {
                  color:  new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                    {
                      offset: 0,
                      color: '#81bf3b'
                    },
                    {
                      offset: 1,
                      color: '#6be04a'
                    }
                  ])
                }
              },
              {
                value: 620,
                name: '个性化服务',
                itemStyle: {
                  color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                    {
                      offset: 0,
                      color: '#ad862e'
                    },
                    {
                      offset: 1,
                      color: '#dfb43f'
                    }
                  ])
                }
              },
              {
                value: 580,
                name: '医院陪护',
                itemStyle: {
                  color:  new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                    {
                      offset: 0,
                      color: '#2238ed'
                    },
                    {
                      offset: 1,
                      color: '#3779f0'
                    }
                  ])
                }
              }
            ].sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: 'radius',
            label: {
              color: '#fff',
              formatter: '{b} \n {c}个{d}%'
            },
            labelLine: {
              lineStyle: {
                color: '#71e8fc'
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            },

            itemStyle: {
              normal: {
                shadowBlur: 100,
                // shadowColor: 'rgba(0, 0, 0, 0.2)'
              }
            },
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            }
          }
        ]
      })

    }
  },
  computed: {},
  mounted() {
    this.initChart()
    this.initFlyLine()
  }
}
</script>

<style scoped lang="scss">
.center-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .business-serve {
    height: 382px;

    #business-serve-pie-chart {
      width: 100%;
      height: 300px;
    }
  }
  .serve-map {
    height: 243px;

    #serve-map-fly-line {
      height: 170px;
    }
  }
}
</style>
