zaibei_charts/test/pie/ChartPie15/index.js

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

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

// setTimeout(()=>{
//     pie.setOption(defaultOption);
// },1000)
setTimeout(()=>{
    pie.setOption(defaultOption1);
},3000)
// setTimeout(()=>{
//     pie.setOption(defaultOption2);
// },6000)
// setTimeout(()=>{
//     pie.setOption(defaultOption3);
// },10000)
const defaultOption = {
    // 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
    },
],
    
};
const defaultOption1 = {
    // 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','#fe6a01', '#54b3ea', '#ffffff','#00fcff','#0d67a1','#0090ff','#0010ff'],
    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
    },
    {
       name: "类别6",
       value: 15
   },
    {
       name: "类别7",
       value: 25
   }, 
   {
       name: "类别8",
       value: 90
   }, {
       name: "类别9",
       value:20
   },
   {
      name: "类别10",
      value: 15
  },
   {
      name: "类别11",
      value: 25
  }, 
  {
      name: "类别12",
      value: 90
  }, {
      name: "类别13",
      value:20
  }
],
    
};
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
    }
],
    
};