zoukankan      html  css  js  c++  java
  • Echarts的option中的data问题

    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%',
    '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:'搜索引擎'}
    ]
    }
    ]
    };

    上述data部分,是大数组套多个object,直接用字符串拼成上面的格式是不对的。

    var str = new Array();
    for(var i = 0;i<label.length;i++){
    var str3 = new Object();
    str3.name=label[i];
    str3.value=data[i];
    str.push(str3)
    }

    然后将上面第一部分标红代码

    data:[
    {value:335, name:'直接访问'},
    {value:310, name:'邮件营销'},
    {value:234, name:'联盟广告'},
    {value:135, name:'视频广告'},
    {value:1548, name:'搜索引擎'}
    ]

    改成:

    data:str

    轻松搞定。

    即:动态填充option数据。

  • 相关阅读:
    hybrid项目h5页路由回退问题解决
    各个端类型判断
    图片展示方法总结
    微信小程序简易table组件实现
    微信小程序动画技巧
    git常用命令
    小程序跳转
    excel日期插件
    excel省市区三级分类级联
    mysql字符串分割操作
  • 原文地址:https://www.cnblogs.com/zhzhang/p/5134272.html
Copyright © 2011-2022 走看看