<script setup lang="ts">

import {onMounted, ref} from "vue";

import * as echarts from "echarts";


const main = ref();

onMounted(() => {

  init();
});


const init = () => {
  const myChart = echarts.init(main.value);

  let option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      data: [
        '网上交易',
        'App点击',
        '骑手上门',
        '其他',
      ]
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        selectedMode: 'single',
        radius: [0, '30%'],
        label: {
          position: 'inner',
          fontSize: 14
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1548, name: 'Search Engine' },
          { value: 775, name: 'Direct' },
          { value: 679, name: 'Marketing', selected: true }
        ]
      },
      {
        name: 'Access From',
        type: 'pie',
        radius: ['45%', '60%'],
        labelLine: {
          length: 30
        },
        label: {
          formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
          backgroundColor: '#F6F8FC',
          borderColor: '#8C8D8E',
          borderWidth: 1,
          borderRadius: 4,
          rich: {
            a: {
              color: '#6E7079',
              lineHeight: 22,
              align: 'center'
            },
            hr: {
              borderColor: '#8C8D8E',
              width: '100%',
              borderWidth: 1,
              height: 0
            },
            b: {
              color: '#4C5058',
              fontSize: 14,
              fontWeight: 'bold',
              lineHeight: 33
            },
            per: {
              color: '#fff',
              backgroundColor: '#4C5058',
              padding: [3, 4],
              borderRadius: 4
            }
          }
        },
        data: [
          { value: 1048, name: '网上交易' },
          { value: 335, name: 'App点击' },
          { value: 310, name: '骑手上门' },
          { value: 251, name: '其他' },
        ]
      }
    ]
  };

  myChart.setOption(option);
}

</script>

<template>
  <div class="echarts">
    <div style="width: 100%; height: 100%; margin-top: 1rem">
      <div ref="main" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>

<style scoped>
.echarts {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  margin: 1rem;
  padding: 1rem;
  background-color: #ffffff;
  min-width: 0;
}
</style>

