zaibei_charts/test/pie/ChartPie17/index.js

import Chart from "../../../src/chart/pie/ChartPie17/ChartPie17";
import option from '../../../src/chart/pie/ChartPie17/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:"0%"
        },
        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: true,
            color:'#ffffff',
            fontSize: 18
        }
    },
    // 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:"15%"
    },
    // 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: 30
        },
         {
            name: "类别2",
            value: 50
        },
         {
            name: "类别3",
            value: 40
        },  {
            name: "类别4",
            value: 30
        }
        ,
         {
            name: "类别5",
            value: 50
        },
         {
          name: "类别6",
          value: 50
      }, 
    //    {
    //       name: "类别7",
    //       value: 30
    //   },
    //    {
    //       name: "类别8",
    //       value: 40
    //   },  {
    //       name: "类别9",
    //       value: 30
    //   }
    //   ,
    //    {
    //       name: "类别10",
    //       value: 50
    //   },
    //    {
    //       name: "类别11",
    //       value: 50
    //   }, 
    //    {
    //       name: "类别12",
    //       value: 30
    //   }
         
    ],
};
const defaultOption1 = {
    bg:{
        backgroundColor:"#000000"
    },
    pie:{
        addOutline: true,
      startAngle: -90,
        z: 2,
        // 是否圆环显示
        isRing:false,
        center: {
            x:"0%",
            y:"0%"
        },
        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: true,
            color:'#ffffff',
            fontSize: 18
        }
    },
    // 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:"15%"
    },
    // 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: 30
        },
         {
            name: "类别2",
            value: 50
        },
         {
            name: "类别3",
            value: 40
        },  {
            name: "类别4",
            value: 30
        }
        ,
         {
            name: "类别5",
            value: 50
        },
         {
          name: "类别6",
          value: 50
      }, 
       {
          name: "类别7",
          value: 30
      },
       {
          name: "类别8",
          value: 40
      },  {
          name: "类别9",
          value: 30
      }
    //   ,
    //    {
    //       name: "类别10",
    //       value: 50
    //   },
    //    {
    //       name: "类别11",
    //       value: 50
    //   }, 
    //    {
    //       name: "类别12",
    //       value: 30
    //   }
         
    ],
};
const defaultOption2 = {
    // title: title.option('饼图'),
    legend: option.legend,
    tooltip: option.tooltip,
    // pie: option.pie,
    pie:{
        startAngle: -90,
          z: 2,
          // 是否圆环显示
          isRing:false,
          center: {
              x:"0%",
              y:"0%"
          },
          radius: '100%',
          dis: -50, //饼图的厚度
          labelLine: {
              show: true,
              length1: 20,
              length2: 10,
          },
          label: {
              show: false,
              fontSize: 16,
              // inside outside
              position:'inside',
              // 强制显示所有标签
              allShow:false,
              unit:'{value}件'
          },
          centerLabel:{
              show: true,
              color:'#ffff00'
          }
      },
    grid: option.grid,
    bg:{
        backgroundColor:"#0b162f"
    },
    // color:['#fe6a01', '#54b3ea', '#ffffff','#00fcff','#0d67a1','#0090ff','#0010ff'],
    color:['#ff0000','#ccc','#31dc0a','#dcd70a','#0a3edc','#7d0adc','#212729'],
    series: [
    //     {
    //     name: '类别1',
    //     value: 10
    // },
    {
        name: '类别1',
        value: 100
    },
     {
        name: "类别2",
        value: 15
    },
     {
        name: "类别3",
        value: 25
    }, 
    {
        name: "类别4",
        value: 90
    }, {
        name: "类别5",
        value:20
    }
],
    
};
const defaultOption3 = {
    // title: title.option('饼图'),
    legend: option.legend,
    tooltip: option.tooltip,
    // pie: option.pie,
    pie:{
        startAngle: -90,
          z: 2,
          // 是否圆环显示
          isRing:false,
          center: {
              x:"0%",
              y:"0%"
          },
          radius: '100%',
          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:'#ffff00'
          }
      },
    grid: option.grid,
    bg:{
        backgroundColor:"#0b162f"
    },
    // color:['#fe6a01', '#54b3ea', '#ffffff','#00fcff','#0d67a1','#0090ff','#0010ff'],
    color:['#ff0000','#ccc','#31dc0a','#dcd70a','#0a3edc','#7d0adc','#212729'],
    series: [
    //     {
    //     name: '类别1',
    //     value: 10
    // },
    {
        name: '类别1',
        value: 100
    },
     {
        name: "类别2",
        value: 15
    },
     {
        name: "类别3",
        value: 25
    }, 
    {
        name: "类别4",
        value: 90
    }, {
        name: "类别5",
        value:20
    }
],
    
};