zaibei_charts/test/pie/ChartPie18/index.js

import Chart from "../../../src/chart/pie/ChartPie18/ChartPie18";
import option from '../../../src/chart/pie/ChartPie18/defaultOption';

let pie=new Chart(document.querySelector(".c1"),{});
window.addEventListener('resize',function() {
        pie.resize();
})

setTimeout(()=>{
    pie.setOption(defaultOption);
},5000)
setTimeout(()=>{
    pie.setOption(defaultOption1);
},3000)
// setTimeout(()=>{
//     pie.setOption(defaultOption2);
// },6000)
// setTimeout(()=>{
//     pie.setOption(defaultOption3);
// },10000)
const defaultOption = {
    bg:{
        backgroundColor:"#000000"
    },
    pie:{
        addOutline: true,
      startAngle: -90,
        z: 2,
        // 是否圆环显示
        isRing:false,
        center: {
            x:"0%",
            y:"30%"
        },
        radius: '80%',
        dis: -50, //饼图的厚度
        labelLine: {
            show: true,
            length1: 20,
            length2: 10,
        },
        label: {
            show: false,
            fontSize: 16,
            // inside outside
            position:'inside',
            // 强制显示所有标签
            allShow:false,
            unit:'{value}件'
        },
        centerLabel:{
            show: false,
            color:'#ffffff'
        }
    },
    // legend:  {
    //   show: true,
    //   left: "right",
    //   top: '5%',
    //   orient: 'vertical',
    //   itemAngelR:3,
    //   padding:1,
    // },
    legend: {
        show: true,
        // left: "70%",
        left: "80%",
        top: '5%',
        orient: 'vertical',
        itemAngelR:3,
        padding:1,
        itemWidth: 8,
        itemHeight: 8,
        borderRadius: 4,
        textStyle: {
            fontSize: 12,
            color: "#ffffff"
        }
    },
    tooltip: {
        show: true,
        paddingW:10,
        paddingH: 10,
        itemGap: 5,
        //距目标的偏移值
        offsetX: 15,
        offsetY: 0,
        titleFontSize:12,
        titleColor: '#ffffff',
        itemFontSize:12,
        itemColor:"#8c61f9",
        borderColor: '#011245',
        borderWidth: 0,
        borderRadius: 0,
        backgroundColor: 'rgba(0,16,62,0.9)',

    },
    shape: {
        faceColor:"#daf3fb",
        lightColor: "#ffffff"

    },
    // color: ['#0090ff', '#00f1ff','#0000ff', '#0021ff','#003fff', '#0061ff'],
    color:['#3588dc', '#04a2ae', '#42ffff', '#a2f9ff', '#01a0c8', '#73a7cb', '#74e9f2', '#92d2f1', '#b7d4fa','#83b283', '#c3caf8'],
    grid:{
      left:"20%",
      right:"20%",
      top:"20%",
      bottom:"18%"
    },
    // valueAxis:{

    // },
    // xAxis:{
    //     data:["小米","华为","苹果","三星","vivo","oppo"]  //?????????????????
    // },
    // series:[{
    //     data:[639539,548671,457822,223133,158514,122348]
    // }]
    series: [
        // {
        //     name: '类别1',
        //     value: 99
        // },{
        //     name: '类别10',
        //     value: 1
        // }
        {
          name: '类别1',
          value: 60
      },
       {
          name: "类别2",
          value: 60
      },
       {
          name: "类别3",
          value: 50
      }, 
      {
          name: "类别4",
          value: 50
      }, {
          name: "类别5",
          value: 50
      },
      {
         name: "类别3",
         value: 50
     }, 
     {
         name: "类别4",
         value: 60
     }, {
         name: "类别5",
         value: 30
     }
      
    ],
};
const defaultOption1 = {
    bg:{
        backgroundColor:"#000000"
    },
    pie:{
        addOutline: true,
      startAngle: -90,
        z: 2,
        // 是否圆环显示
        isRing:false,
        center: {
            x:"0%",
            y:"30%"
        },
        radius: '80%',
        dis: -50, //饼图的厚度
        labelLine: {
            show: true,
            length1: 20,
            length2: 10,
        },
        label: {
            show: false,
            fontSize: 16,
            // inside outside
            position:'inside',
            // 强制显示所有标签
            allShow:false,
            unit:'{value}件'
        },
        centerLabel:{
            show: false,
            color:'#ffffff'
        }
    },
    // legend:  {
    //   show: true,
    //   left: "right",
    //   top: '5%',
    //   orient: 'vertical',
    //   itemAngelR:3,
    //   padding:1,
    // },
    legend: {
        show: true,
        // left: "70%",
        left: "80%",
        top: '5%',
        orient: 'vertical',
        itemAngelR:3,
        padding:1,
        itemWidth: 8,
        itemHeight: 8,
        borderRadius: 4,
        textStyle: {
            fontSize: 12,
            color: "#ffffff"
        }
    },
    tooltip: {
        show: true,
        paddingW:10,
        paddingH: 10,
        itemGap: 5,
        //距目标的偏移值
        offsetX: 15,
        offsetY: 0,
        titleFontSize:12,
        titleColor: '#ffffff',
        itemFontSize:12,
        itemColor:"#8c61f9",
        borderColor: '#011245',
        borderWidth: 0,
        borderRadius: 0,
        backgroundColor: 'rgba(0,16,62,0.9)',

    },
    shape: {
        faceColor:"#daf3fb",
        lightColor: "#ffffff"

    },
    // color: ['#0090ff', '#00f1ff','#0000ff', '#0021ff','#003fff', '#0061ff'],
    color:['#3588dc', '#04a2ae', '#42ffff', '#a2f9ff', '#01a0c8', '#73a7cb', '#74e9f2', '#92d2f1', '#b7d4fa','#83b283', '#c3caf8'],
    grid:{
      left:"20%",
      right:"20%",
      top:"20%",
      bottom:"18%"
    },
    // valueAxis:{

    // },
    // xAxis:{
    //     data:["小米","华为","苹果","三星","vivo","oppo"]  //?????????????????
    // },
    // series:[{
    //     data:[639539,548671,457822,223133,158514,122348]
    // }]
    series: [
        // {
        //     name: '类别1',
        //     value: 99
        // },{
        //     name: '类别10',
        //     value: 1
        // }
        {
          name: '类别1',
          value: 60
      },
       {
          name: "类别2",
          value: 60
      },
       {
          name: "类别3",
          value: 50
      }, 
    //   {
    //       name: "类别4",
    //       value: 50
    //   }, {
    //       name: "类别5",
    //       value: 50
    //   },
    //   {
    //      name: "类别3",
    //      value: 50
    //  }, 
    //  {
    //      name: "类别4",
    //      value: 60
    //  }, {
    //      name: "类别5",
    //      value: 30
    //  }
      
    ],
};