echarts中一个option配置两个图形（饼图，柱图）

最新推荐文章于 2024-12-11 14:43:27 发布

原创最新推荐文章于 2024-12-11 14:43:27 发布 · 7.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #柱图 #饼图

echarts 专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何使用Echarts在同一图表区域内配置并显示饼图和柱状图，通过示例代码详细解析option的设置方法，帮助读者理解如何实现这种复合图表的绘制。

var arr_name = new Array();
            var arr_value = new Array();
            for (var i = 0; i < data.length; i++) {
                arr_name.push(data[i].name);
                arr_value.push(data[i].value);
            }
var option = {
                grid:
                    [{
                        top: '70%',
                        width: '50%',
                        bottom: '80%',
                        left: 10,
                        containLabel: true
                    }],
                title: {
                    text: '用户登录监控',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
//                    柱图 ==================================
                xAxis: [
                    {
                        type: 'category',
                        data: arr_name,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                    }
                ],
//                     ==================================
                series: [
//                        柱图添加数据
                    {
                        name: '活跃时间（分）',
                        type: 'bar',
                        barWidth: '30%',
                        data: arr_value
                    },
//                        饼图添加数据
                    {
                        name: '活跃时间（分）',
                        type: 'pie',
                        radius: '50%',
                        center: ['70%', '50%'],
                        avoidLabelOverlap: false,
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        data: data,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };