<template>
  <div>
    <div id="cwClassify1" style="width:500px; height:260px;"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
function lineChartFn() {
  var chartDom = document.getElementById("cwClassify1");
  var myChart = echarts.init(chartDom, "dark");
  var option;
  var scale = 1;
var echartData = [{
    value: 2154,
    name: '交通工具类'
}, {
    value: 3854,
    name: '其他'
}, {
    value: 3515,
    name: '农副渔牧产品及野生动物'
}, {
    value: 3515,
    name: '橡胶塑料制品'
}]
var rich = {
    yellow: {
        color: "#ffc72b",
        fontSize: 14 * scale,
        padding: [5, 4],
        align: 'center'
    },
    total: {
        color: "#ffc72b",
        fontSize: 14 * scale,
        align: 'center'
    },
    white: {
        color: "#fff",
        align: 'center',
        fontSize: 14 * scale,
        padding: [0, 0]
    },
    blue: {
        color: '#49dff0',
        fontSize: 14 * scale,
        align: 'center'
    }
}

  option = {
    backgroundColor: 'rgba(0,0,0,0)',
    title: {
      text: '物品分类',
      textAlign: 'auto',
      left: "center",
      top: "top",
      padding: [20, 0,0,0],
      textStyle: {
        color: '#ddd'
      }
    },
    legend: {
        orient: 'vertical',
        top: 'top',
        left: '75%',
    },
    series: [{
        name: '今日警情处置分析图',
        type: 'pie',
        radius: ['32%', '50%'],
        hoverAnimation: false,
        color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
        label: {
            normal: {
                formatter: function(params, ticket, callback) {
                    var total = 0; //考生总数量
                    var percent = 0; //考生占比
                    echartData.forEach(function(value, index, array) {
                        total += value.value;
                    });
                    percent = ((params.value / total) * 100).toFixed(1);
                    return '{white|' + params.name + '}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
                },
                rich: rich
            },
        },
        data: echartData
    }]
};

  option && myChart.setOption(option);
  document.getElementById("cwClassify1").setAttribute('_echarts_instance_', '')
}
onMounted(() => {
  lineChartFn();
});
</script>

<style lang="scss" scoped>

</style>
