<template>
    <div>
        <div class="chord-chart" :ref="refName"></div>
    </div>
</template>
<script>
import { numberPie, timeLine, chordCity } from "../../assets/js/chart-color.js";
const refName = Math.random().toString(36).substr(2)
export default {
  name: "chordChart",
  data() {
    return {
      refName: refName,  
      option: {
        title: {
          show: false,
        },
        tooltip: {
          show: true,
          trigger: "item",
          formatter: function(params) {
            if (params.indicator2) {
              // is edge
              return (
                "省份:" +
                params.indicator2 +
                "<br/>" +
                "目的:" +
                params.indicator +
                "<br/>" +
                "展会观众分布:" +
                Math.round(params.value.weight * 100) +
                "%"
              );
            } else {
              // is node
              return params.name;
            }
          }
        },
        legend: {
          x: "left",
          show: false,
          selectedMode: false,
          data: this.legendData
        },
        series: [
          {
            type: "chord",
            sort: "ascending",
            sortSub: "descending",
            showScale: false,
            center: ["50%", "50%"],
            radius: ["70%", "80%"],
            itemStyle: {
              normal: {
                label: {
                  rotate: true,
                  textStyle: {
                    color: timeLine[0]
                  }
                }
              }
            },
            // 使用 nodes links 表达和弦图
            nodes: [],
            links: []
          }
        ]
      }
    };
  },
  props: {
    datas: {
      type: Array,
      default: function() {
        return []
      }
    },
    legendData: Array,
  },
  methods: {
    loadData() {
      this.mychart = echarts2.init(this.$refs[refName], {
        width: "100%",
        height: "100%"
      });
      this.mychart.setOption({
        title: {
          show: false,
        },
        tooltip: {
          show: true,
          trigger: "item"
        },
        legend: {
          x: "left",
          show: false,
          selectedMode: false,
          data: this.legendData
        },
        series: []
      })
    }
  },
  beforeDestroy() {
    if (this.mychart) {
      this.mychart.clear();
    }
  },
  mounted() {
    this.loadData();
  },
  watch: {
    datas: {
      handler(val, oldVal) {
        this.loadData();
      },
      deep: true
    }
  }
};
</script>
<style lang="scss">
.chord-chart {
  width: 100%;
  height: 100%;
}
</style>
