<template>
  <div>
    <p>D3JS实现的3D饼图</p>
    <div id="abc"></div>
  </div>
</template>

<script setup>
import pie from '../utils/pie'
import { onMounted, reactive } from 'vue';

let config = reactive({
  color:["#5470c6","#91cc75","#fac858","#ee6666","#73c0de"],//颜色
  sfShowLabel:true, //是否显示文本标线
  legendOrient:'horizontal', //图例，横向、纵向
  legendType:'plain', //图例类型，普通图例plain还是 scroll翻页图例
})
//基础数据
const salesData = [
    {label: "2023-05-01", value: 61, DWMC:'俩'},
    {label: "2023-05-02", value: 70, DWMC:'俩'},
    {label: "2023-05-03", value: 67, DWMC:'俩'},
    {label: "2023-05-04", value: 21, DWMC:'俩'},
    {label: "2023-05-05", value: 23, DWMC:'俩'},
    {label: "2023-05-06", value: 82, DWMC:'俩'},
    {label: "2023-05-07", value: 26, DWMC:'俩'},
    {label: "2023-05-08", value: 57, DWMC:'俩'}
];
onMounted(() => {
  pie('#abc', 700, 400, salesData, 250, 200, 150, 100, 30, config)
})

</script>

<style>
/* 样式 */
#abc{
  width: 700px;
  height: 400px;
}
</style>
