HeightCharts柱状图和饼状图

HTML：

   <div id="container1"  style="height:350px; " ></div>
    <div id="container2"  ></div>

JS：（引入的有关highcharts的js可在highcharts的官网中获得：https://www.hcharts.cn/demo/highcharts）

   <script src="../js/heightcharts/highcharts.js"></script>  
    <script src="../js/heightcharts/highcharts-3d.js"></script>
    <script src="../js/heightcharts/modules/exporting.js"></script>
    <script type="text/javascript">

$(function () {
           //自定义图的颜色
            Highcharts.setOptions({
                colors: ['#267cb7', '#FF9C30', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
            });
            //饼状图
            $('#container1').highcharts({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    marginRight: 0
                },
                title: {
                    text: '每日全部订单完成率'
                },
                tooltip: {
                    headerFormat: '{series.name}<br>',
                    pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: false
                        },
                        showInLegend: true
                    }
                },
                legend: {//控制图例显示位置  （和 chart: 里面的 marginRight: 0结合使用）
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    borderWidth: 0,
                    x: -500,
                    y:80
                    
                },
                series: [{
                    type: 'pie',
                    name: '占百分比',
                    data: [
                        //{
                        //    name: 'Chrome',
                        //    y: 12.8,
                        //    sliced: true,
                        //    selected: true
                        //},
                      
                         ['已完成',  <%=FinishTotalCoal%>],
                         ['未完成', <%=RoughTotalCoal%>]
                         
                    ]
                }],
            });

  //柱状图
            $('#container2').highcharts({
                chart: {
                    backgroundColor: 'rgba(128, 128, 128, 0.05)',
                    type: 'column',
                    options3d: {
                        enabled: true,
                        alpha: 15,
                        beta: 1,
                        viewDistance: 25,
                        depth: 100
                    },
                    marginTop: 80,
                    marginRight: 40
                },
                title: {
                    text: '每日每个订单完成率'
                },
                xAxis: {
                    categories: [<%=Xline%>]
                },
                yAxis: {
                    allowDecimals: false,
                   min: 0,
                   title: {
                       text: '完成率（%）'
                   }
               },
                tooltip: {
                   
                    pointFormat: '<span style="color:#267cb7">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
                   shared: true
               },
               plotOptions: {
                   column: {
                       stacking: 'percent',
                       depth: 50
                   }
               },
               series: [{
                   name: '未完成',
                   data: [<%=OrderRough%>]
                    
                }, {
                    name: '已完成',
                    data: [<%=OrderFinish%>]
                }],
               legend: {
                   enabled: false,
                   layout: 'vertical',
                   backgroundColor: '#FFFFFF',
                   floating: true,
                   align: 'left',
                   x: 100,
                   verticalAlign: 'top',
                   y: 70
               }
           });


        });

  </script>

其他统计图请参考官网：https://www.hcharts.cn/demo/highcharts