zaibei_charts/test/pie/ChartPie35/index.js

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

let pie=new Chart(document.querySelector(".c1"),{});
window.addEventListener('resize',function() {
        pie.resize();
        // pie2.resize();
})
// setTimeout(()=>{
//     pie.setOption(option3)
// },1000)
let option3 = {
    bg: {
        backgroundColor: "rgba(3,33,67,0.5)"
    },
    pie: {
        isPing1:true,
        isPing2: false,
        isPingR2: false,
        addOutline: false,
        startAngle: -90,
        z: 2,
        // 是否圆环显示
        isRing: false,
        isShadow: true,
        center: {
            x: "0%",
            y: "0%"
        },
        startAnimate: false,
        radius: '100%',
        rotateX: -Math.PI / 3,
        rotateY: 0,
        rotateZ: 0,
        disBox: 0,
        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',
            fontSize: 18
        }
    },
    legend: {
        show: true,
        // left: "70%",
        left: "3%",
        top: '5%',
        lineHeight:0,
        lineRight: 30,
        orient: 'horizontal',
        itemAngelR: 3,
        padding: 1,
        itemWidth: 12,
        itemHeight: 8,
        borderRadius: 0,
        textStyle: {
            fontSize: 16,
            color: "#a9bcde"
        }
    },
    shape: {
        tool: {
            hoverColor: '#FAB040',
            stokeColor: 'rgba(0,198,255,0.45)',
            topColor: '#ffffff',
            topFont: 18,
            bottomColor: '#ffffff',
            bottomFont: 16,
            lineShadow: 'rgba(0,198,255,0.45)',
            topShadowColor: '#00a8ff',
            bottomShadowColor: '#00a8ff'
        }
    },
    // color: ['#92d2f1', '#6BD0FF', '#80D6FF', '#3EB3FF', '#91B1FF', '#086CFF', '#73a7cb', '#74e9f2', '#778CFF', '#83b283', '#51C4E8', '#A1BEFF'],
    color: [ '#224de4', "#0b73ff",'#2a86ff', '#5aa1ff', '#7abbff', '#96cdff', '#ffffff', '#29b6f6', '#4dd0e1', '#81d4fa', '#3949ab', '#6f5df6', '#9265f6', "#8f88fd"],
    grid: {
        left: "20%",
        right: "20%",
        top: "20%",
        bottom: "15%"
    },
    series: [{
        "name": "通用网络攻击",
        "value": 1159049
    },
    {
        "name": "web漏洞攻击",
        "value": 3724
    },
    {
        "name": "账号弱口令",
        "value": 971
    },
    {
        "name": "数据泄露",
        "value": 227
    },
    {
        "name": "主机漏洞攻击",
        "value": 59
    },
    {
        "name": "账号暴力破解",
        "value": 55
    },
    {
        "name": "windows主机安全",
        "value": 12
    },
    {
        "name": "疑似失陷资产事件",
        "value": 12
    },
    {
        "name": "数据破坏",
        "value": 9
    },
    {
        "name": "僵尸网络",
        "value": 8
    },
    {
        "name": "挖矿样本",
        "value": 1
    }
]
};

// setTimeout(()=>{
//     pie.setOption(opt);
// },3000)

const opt = {
    bg: {
        backgroundColor: "#000000"
    },
    pie: {
        isPing2: true,
        addOutline: false,
        startAngle: -90,
        z: 2,
        // 是否圆环显示
        isRing: false,
        isShadow: true,
        center: {
            x: "-95%",
            y: "120%",
        },
        startAnimate: false,
        rotateX: -Math.PI / 4,
        rotateY: Math.PI / 16,
        rotateZ: 0,
        disBox: -30,
        radius: '150%',
        dis: -50, //饼图的厚度
        labelLine: {
            show: true,
            length1: 10,
            length2: 10,
        },
        label: {
            show: false,
            fontSize: 16,
            // inside outside
            position: 'inside',
            // 强制显示所有标签
            allShow: false,
            unit: '{value}件'
        },
        centerLabel: {
            show: false,
            color: '#ffffff',
            fontSize: 18
        }
    },
    legend: {
        show: true,
        // left: "70%",
        left: "58%",
        top: '12%',
        lineHeight:10,
        orient: 'horizontal',
        itemAngelR: 3,
        padding: 1,
        itemWidth: 18,
        itemHeight: 12,
        borderRadius: 0,
        textStyle: {
            fontSize: 16,
            color: "#ffffff"
        }
    },
    shape: {
        tool: {
            hoverColor: '#FAB040',
            stokeColor: '#00ff00',
            topColor: '#ff0000',
            topFont: 48,
            bottomColor: '#ffff00',
            bottomFont: 36
        }
    },
    // color: ['#0090ff', '#00f1ff','#0000ff', '#0021ff','#003fff', '#0061ff'],
    // color: ['#92d2f1', '#6BD0FF', '#80D6FF', '#3EB3FF', '#91B1FF', '#086CFF', '#73a7cb', '#74e9f2', '#778CFF', '#83b283', '#51C4E8', '#A1BEFF'],
    color: [ '#29b6f6', '#1976d2', '#0d47a1', '#8f88fd', '#512da8', '#311b92', '#5c6bc0', "#3949ab",'#0b73ff', '#81d4fa', '#4dd0e1', '#0097a7', '#006064'],
    grid: {
        left: "20%",
        right: "20%",
        top: "20%",
        bottom: "15%"
    },
    series: [
        {
            "name": "教育",
            "value": 0
        },
        {
            "name": "科研",
            "value": 0
        },
        {
            "name": "社会保障",
            "value": 0
        },
        {
            "name": "交通",
            "value": 0
        },
        
        {
            "name": "电子政务",
            "value": 822
        },
        {
            "name": "公共服务/公用事业",
            "value": 17
        },
        
        {
            "name": "重要互联网应用系统",
            "value": 38
        },
        {
            "name": "基础信息网络",
            "value": 113
        },
        {
            "name": "医疗卫生",
            "value": 14
        },
        {
            "name": "水利",
            "value": 7
        },
        {
            "name": "金融",
            "value": 7
        },
        {
            "name": "其他",
            "value": 7
        },
        {
            "name": "工业制造",
            "value": 0
        },
        {
            "name": "能源",
            "value": 2
        },
        
        
    ]
};
// let pie2=new Chart(document.querySelector(".c2"),opt);