前言

：
最近小编在做图形展现这块的功能,用到了大家常用的Highcharts,本篇博客小编来总结一下项目中的应用:

核心

代码

/**更新全场工作计划**/
    function updataFactoryPlainData(){



    $('#factionPlainCharts').highcharts({
            chart: {
                type: 'pie',
                height:'200'
            },
            yAxis: {
                title: {
                    text: ''
                }
            },
            colors:[
                '#90EE7E',//第一个颜色 浅绿
                '#F7A35C',//第二个颜色 橘黄
                '#FA8072',//第三个颜色 品红
                '#DDDF00',//第四个颜色 黄色
                '#32CD32' //第五个颜色 绿色
            ],
            //禁用导出模块
            exporting:{
                enabled:false
            },
            //数据列配置
            legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            borderWidth: 0

        },
         plotOptions: {
                pie: {
                    shadow: false,
                    center: ['40%', '30%'],  //饼图圆心坐标
                    showInLegend:true
                }
            },
            tooltip: {
                valueSuffix: ''  //数据提示框 中 数据后缀
            },
            title:'',
            //屏蔽版权信息
            credits:{
                enabled:false
            },
            series: [{
                name: '数量',
                data: D_3_1_inner,
                size: '80%',
                dataLabels: {
                    enabled:false
                }
            }, {
                name: '数量',
                data: D_3_1_outer,
                size: '80%',
                innerSize: '80%',
                dataLabels: {
                    enabled:false
                },
                id: 'versions'
            }]
        });

    }

/**全场工作计划**/
                innerData = data.D_3_1.innerData;
                outterData = data.D_3_1.outterData;
                for( i=0;i<innerData.length;i++){

                    D_3_1_inner.push({
                          name: innerData[i].name,
                          y:innerData[i].value
                    });
                }
                for( i=0;i<outterData.length;i++){

                    D_3_1_outer.push({
                          name: outterData[i].name,
                          y:outterData[i].value
                    });
                }

效果图

官方文档:
https://api.hcharts.cn/highcharts

总结

感谢读者的阅读