<template>
  <div id="myChart15"></div>
</template>
<script>
  import {helpeResultone} from '../../api';
  export default {
    name: "Vertical",
    data() {
      return {
        colorList:['#47A2FF ', '#53C8D1', '#59CB74', '#FBD444', '#7F6AAD', '#585247'],
        xData:[],
        name :[],
      };
    },
    mounted() {
      this.carNumber();
    },
    methods: {
      async carNumber() {
        let myChart = this.$echarts.init(document.getElementById('myChart15'))
        const result =  await helpeResultone();
        this.xData =result.data.map(item=>{
          let jsonData = {};
          jsonData.name = item.label;
          jsonData.value =item.value;
          return jsonData
        });
        result.data.forEach(item=>{
          this.name.push(item.label)
        })
        console.log(this.xData,"gaibian")
        myChart.setOption({
          tooltip: {
            trigger: 'item',
          },
          // legend: {
          //   type: 'scroll',
          //   orient: 'vertical',
          //   right: '10%',
          //   top: 'center',
          //   itemGap: 30,
          //   selectedMode: false,
          //   icon: 'pin',
          //   data: this.name,
          //   textStyle: {
          //     color: '#77899c',
          //     rich: {
          //       uname: {
          //         width: 100
          //       },
          //       unum: {
          //         color: '#4ed139',
          //         width: 40,
          //         align: 'right'
          //       }
          //     }
          //   },
          //   formatter(name) {
          //     return `{uname|${name}}{unum|1132}`
          //   }
          // },
          color: this.colorList,
          series: [{
            name: '行业',
            type: 'pie',
            radius: ['45%', 90],
            center: ['40%', '50%'],
            itemStyle: {
              borderWidth: 3,
              borderColor: '#fff'
            },
            data: this.xData

          }]
        });

      }
    }
  };
</script>
<style lang="less" scoped>
  #myChart15{
    width: 600px;
    height: 600px;
    margin-left: 30px;
  }
</style>
