<template>
    <div class="w-100-p" >
        <div  :ref="refName" style="height:100%"></div>
    </div>
</template>
<script>
let echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/pie");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
import customed from '../../assets/js/customed.json';
echarts.registerTheme('customed',customed)
const style ={
  color: '#616161',
  fontSize: 14
}
import { numberPie, timeLine } from "../../assets/js/chart-color.js";
var reNumberPie = numberPie.reverse();
const refName = Math.random()
  .toString(36)
  .substr(2);
export default {
  name: "pieChart",
  props: {
    color: {
      type: Array,
      default: function() {
        return reNumberPie;
      }
    },
    title: {
      type: Boolean,
      default: true
    },
    roseType: {
      type: Boolean,
      default: false
    },
    inRadius: {
      type: String,
      default: "0"
    },
    height: {
      type: String,
      default: "180px"
    },
    mergeOption: {
      default: function() {
        return {};
      }
    },
    datas: {
      type: Array,
      default: function() {
        return [];
      }
    },
    legendData: Array,
    legendOption:{
      type: String ,
      default: 'horizontal'
    },
    legend:Object
  },
  data() {
    return {
      refName: refName,
      mychart: ""
    };
  },
  methods: {
    load() {
      this.mychart = echarts.init(this.$refs[refName], "customed");
      this.mychart.setOption({
        textStyle:style,
        tooltip: {
          show: true,
          trigger: "item",
          formatter: "{b}: {c} ({d}%)"
        },
        legend:this.legend,
        series: this.datas
      });
    }
  },
  mounted() {
    this.load();
  }
};
</script>
<style lang="scss" scoped>
#chart1 {
  height: 100%;
  width: 100%;
}
</style>
