ECharts在JAVA WEB中饼图出不来

原创已于 2024-01-01 08:07:42 修改 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java Web #ECharts #饼图

于 2018-11-27 09:02:51 首次发布

java 同时被 2 个专栏收录

30 篇文章

订阅专栏

html

10 篇文章

订阅专栏

本文分享了一次使用ECharts绘制饼图时遇到的问题及解决过程。作者在尝试绘制一个展示站点用户访问来源的饼图时，发现图表无法正常显示。经过检查，发现缺少了饼图的系列数据定义，补充这一部分后，问题得以解决。

如下图所示，一套操作好了，饼图出不来：

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0tuaWdodF9LZXk=,size_16,color_FFFFFF,t_70

代码如下：

  var option =    {
                title : {
                    text: '某站点用户访问来源',
                    subtext: '纯属虚构',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient : 'vertical',
                    x : 'left',
                    data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'left',
                                    max: 1548
                                }
                            }
                        },
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                series : [
                    {
                        name:'访问来源',
                        type:'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[
                            {value:335, name:'直接访问'},
                            {value:310, name:'邮件营销'},
                            {value:234, name:'联盟广告'},
                            {value:135, name:'视频广告'},
                            {value:1548, name:'搜索引擎'}
                        ]
                    }
                ]
            };

后来找了找，原因如下：【少了一个饼图的定义哈】大意了