h***@163.com
h***@163.com
  • 发布:2018-10-16 22:18
  • 更新:2019-09-04 18:02
  • 阅读:20883

【报Bug】echarts图表的legend没有显示

分类:uni-app

在项目中使用echarts的饼图,发现legend没有显示,配置代码如下:

{  
            tooltip: {  
                trigger: 'item',  
                formatter: "{a} <br/>{b}: {c} ({d}%)"  
            },  
            legend: {  
                orient: 'vertical',  
                x: 'left',  
                data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']  
            },  
            series: [  
                {  
                    name:'访问来源',  
                    type:'pie',  
                    radius: ['50%', '70%'],  
                    avoidLabelOverlap: false,  
                    label: {  
                        normal: {  
                            show: false,  
                            position: 'center'  
                        },  
                        emphasis: {  
                            show: true,  
                            textStyle: {  
                                fontSize: '30',  
                                fontWeight: 'bold'  
                            }  
                        }  
                    },  
                    labelLine: {  
                        normal: {  
                            show: false  
                        }  
                    },  
                    data:[  
                        {value:335, name:'直接访问'},  
                        {value:310, name:'邮件营销'},  
                        {value:234, name:'联盟广告'},  
                        {value:135, name:'视频广告'},  
                        {value:1548, name:'搜索引擎'}  
                    ]  
                }  
            ]  
        }

实际效果如图:1是目前的情况,2是百度官方示例

2018-10-16 22:18 负责人:无 分享
已邀请:
8***@qq.com

8***@qq.com

大家去官网下载在线定制的,带你需要的图和一些配置,如(legend,Tooltip)等

拂去其

拂去其

require('echarts/lib/component/legend')

如果你是按需加载的记得引入legend这个component

  • lune

    超级感谢!!我说我都一样了怎么还不出来 orz

    2020-08-25 17:37

  • 埃碳酒绝

    nice啊 兄弟

    2021-02-02 18:26

Neil_HL

Neil_HL

1.将源码工程上传附件

  1. 试试看在微信小程序里是否能正常显示
  • h***@163.com (作者)

    不能,你们给的模板示例也不行

    2018-10-17 13:59

pws

pws

解决办法就是 legend中的data要跟series中的data的name相等 值一样才能显示

  • kidd

    没用,我按照uni-app的hello里面的例子改了官方的代码,都没用

    legend: {

    data: ['蒸发量', '降水量'],

    top: 50,

    left: 'center',

    backgroundColor: 'red',

    z: 100

    },

    2019-03-30 23:30

秋云

秋云

建议使用wx-charts跨端图表插件,仿照F2样式做的,体积小巧、调用简单,支持单页面多图表,可参考demo(一个页面7个图表不卡顿),解决H5端图表显示模糊等问题,支持toolTip及入场动画展示。已上传插件市场,欢迎各位下载,觉得好用5星好评哦

wx-charts跨端图表

https://ext.dcloud.net.cn/plugin?id=271

wx-charts图表

该问题目前已经被锁定, 无法添加新回复