在bootstrap的container中实现echart的饼图

最新推荐文章于 2023-07-04 18:54:45 发布

KX_JoyK

最新推荐文章于 2023-07-04 18:54:45 发布

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： echart 文章标签： bootstrap echarts

本文链接：https://blog.youkuaiyun.com/KX_JoyK/article/details/87785831

echart 专栏收录该内容

1 篇文章

订阅专栏

这篇博客展示了如何在Bootstrap的container内嵌入并调整ECharts饼图。通过设置HTML和JS代码，实现了饼图的显示，并确保图表在窗口大小改变时能够自动调整尺寸，以适应Bootstrap的响应式布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html中的代码如下<div id="dash_show" class="container_m"> <div class="row" style="height:60%;margin-top:25px;">
                         <div class="col-md-9">
                             <div id="chart_daily_movement">
                                 <div id="chart_daily_movement" style="width:100%;height:320px;"></div>
                             </div>
                         </div>

JS文件中的代码function generateChart_movement(h, l) {
    var myChart2 = echarts.init(document.getElementById('chart_daily_movement'));
    var resizeWorldMapContainer2 = function () {
        $("#chart_movement_content").width = window.innerWidth * 0.33 + 'px';
        myChart2.resize();
    };
     option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: ['Average Inventory', 'Shipment', ]
            },
            color: ['rgb(5,188,254)', 'rgb(156,220,87)'],
            toolbox: {
                show: false,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'center',
                                max: 1548
                            }
                        }
                    },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                position: 'center',
                                textStyle: {
                                    fontSize: '12',
                                    fontWeight: 'bold'
                                }
                            }
                        }
                    },
                    data: [
                        { value: h, name: 'Average Inventory' },
                        { value: l, name: 'Shipment' },
                    ]
                }
            ]
    };
    var myChart2 = echarts.init(document.getElementById('chart_daily_movement'));
    myChart2.setOption(option);
    window.addEventListener("resize", function () {                         //bootstrap下的resize的实现方法
        myChart2.resize();
    });
}