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数据。

  • 相关阅读:
    netty解决TCP的拆包和粘包的解决办法
    HTML图片热区map area的用法
    JWT应用
    React-router4简约教程
    axios中文文档
    如何区分Babel中的stage-0,stage-1,stage-2以及stage-3(一)
    python datetime offset-aware与offset-navie相互转换
    DJango跨域中间键
    Javacript实现倒计时
    CAN协议,系统结构和帧结构
  • 原文地址:https://www.cnblogs.com/zhzhang/p/5134272.html
Copyright © 2011-2022 走看看