<template>
  <div
    id="mainCloumnBar"
    style="width:100%;height:100%"
  ></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      var chartDom = document.getElementById('mainCloumnBar')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        legend: {
          top: 'bottom',
          padding: 20
        },
        tooltip: false,
        color: [
          '#9489fa',
          '#f06464',
          '#f7af59',
          '#f0da49',
          '#71c16f',
          '#2aaaef',
          '#5690dd',
          '#bd88f5',
          '#009db2',
          '#024b51',
          '#0780cf',
          '#765005'
        ],
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              fontSize: '20',
              fontWeight: 'bold',
              position: 'center',
              textStyle: {
                color: '#5690dd'
              },
              formatter: '{b}\n\n {c}元 \n\n 占比{d}%'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0,0,0,0.3)'
              },
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold',
                textStyle: {
                  color: '#5690dd'
                },
                formatter: '{b}\n\n {c}元 \n\n 占比{d}%'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 3424553, name: '工程类合同'},
              {value: 3532343, name: '技术类合同'},
              {value: 5322283, name: '服务类合同'},
              {value: 3332115, name: '采购类合同'},
              {value: 4423344, name: '配套类合同'}
            ]
          }
        ]
      }

      option && myChart.setOption(option)
      myChart.dispatchAction({type: 'highlight', dataIndex: 0}) // dataIndex属性伟data传入的索引值
      myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        position: [120, 220],
        dataIndex: 0
      }) // 点击生成detip工具条位置
      let index
      myChart.on('mouseover', e => {
        if (e.dataIndex !== 0) {
          // 当鼠标移除的时候 使默认的索引值去除默认选中
          myChart.dispatchAction({type: 'downplay', dataIndex: 0})
        }
      })
      // myChart.on("mouseout", function(e) {
      //   index = e.dataIndex
      //   myChart.dispatchAction({
      //     type: "highlight",
      //     dataIndex: e.dataIndex
      //   });
      // });
    }
  }
}
</script>
<style lang="scss" scoped>
</style>