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

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

Echarts的option中的data问题的更多相关文章

  1. echarts设置option中的数据对象优化

    if(tab.name == 'first'){ myChart.setOption({ legend: { selected:{ [this.playNumber]:true, [this.cove ...

  2. ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决

    1. 我们在日常的开发中使用Echarts时,不像在学习的过程中是自己在option中的配置项填写图表需要的参数,而是通过ajax请求后台,获取数据后,使用javascript来动态的修改数据,但是有 ...

  3. echarts中显示效果option中必有的属性

    写一个最简单的效果让option中不可缺少的属性. var option = { xAxis:[ //x轴,数组对象,其下至少有一个对象 {.....} ], yAxis:[//y轴,数组对象,其下可 ...

  4. 一个解析json串并组装echarts的option的函数解析

    缘起: 在组装echart页面的时候,遇到这样一个问题,它是一个需要在循环内层的时候,同时循环外层,在内层循环中就要将外层获取的值存入,导致了一种纠缠状态,费了老劲儿,终于得到如下解决.记录之,绿色为 ...

  5. echarts在vue中使用的感悟

    echarts在vue中使用的感悟 echarts作为图表展示的强大存在,每当使用后台系统,或多或少都会使用到,但是作为菜鸟的我,则是一路采坑,各种头大,比比皆是,为了避免下次再犯同样的错误,特意记录 ...

  6. Echarts在java中使用

    index.jsp <%@ page language="java" import="java.util.*" pageEncoding="UT ...

  7. QStandardItemModel的data线程安全(在插入数据时,临时禁止sizeHint去读model中的data)

    版权声明:本文为博主原创文章,欢迎转载,转载请注明出处 https://blog.csdn.net/MatchYang/article/details/52988257 在直接使用QStandardI ...

  8. Echarts在Vue中的使用

    1.使用 cnpm 或 npm 安装 Echarts cnpm方式 cnpm install echarts -S 或者 npm方式 npm install echarts --save 2.在项目文 ...

  9. echarts在.Net中使用实例(一) 简单的Demo

    前言 这个必须要有前言,即便很短,对于有强迫症的人来说不容易啊.言归正传,之前做图一直使用rdlc自带的格式,虽然任务完成,但是一直觉得不太美观, 空余时间开始找其他的插件,终于找到了Highchar ...

随机推荐

  1. Cocos2dx 学习记录 [2] 关于混合和高亮一些知识点的体会

    网上有一篇博客讲的是高亮的http://www.cnblogs.com/mrblue/p/3455775.html 就是这篇,尽管代码简单,但对于刚開始学习的人的我,看的还是有些吃力的,毕竟有些内容不 ...

  2. docker创建自己的镜像并配置nginx

    前言 最近在研究docker,记录一下如何创建一个属于自己的镜像 本次使用linux版本为centos7.4(centos6也可以使用docker,只不过有部分功能只有7才有) 本次创建的镜像为cen ...

  3. 【LeetCode】149. Max Points on a Line

    Max Points on a Line Given n points on a 2D plane, find the maximum number of points that lie on the ...

  4. python练习笔记——map | sum | pow 的应用

    1 函数简要 map 函数  | sum 函数  |  pow函数  | lambda函数 2 简要计算 2.1 1^2 + 2^2 + 3^2 .....9^2 方法1 print([pow(x,2 ...

  5. android中调用系统的发送短信、发送邮件、打电话功能

    1 调用发送短信功能: Uri smsToUri = Uri.parse("smsto:");  Intent sendIntent = new Intent(Intent.ACT ...

  6. 怎样让VMware上的虚拟机ping通外网(图解教程)

    近期在实习项目中遇到一个问题. 因測试须要,本人在win7上安装VMWare后在启动两台ubuntuserver.两台主机的网络配置所有採用NAT方式实现连接. 之后一路畅通.主机ping通虚拟机和外 ...

  7. codeforces#254DIV2解题报告

    今天简直大爆发啊... 吃了顿烧烤竟然这么管事. . . .. 本弱渣竟然做出来了3道,并且B题是我第一次在CF中用到算法..(曾经最多也就是贪心. . . ). 题目地址:codeforces#22 ...

  8. nginx实战五

    nginx用户认证 https://coding.net/u/aminglinux/p/nginx/git/blob/master/access/auth.md 当访问一些私密资源时,最好配置用户认证 ...

  9. Java中的static关键字的用法

    1.静态方法 static:通常在一个类中定义一个方法为static,那就是说,无需本类的对象即可调用此方法 声明为static的方法有以下几条限制: (1)它们仅能调用其他的static方法. (2 ...

  10. 浅谈Javascript中的void操作符

    由于JS表达式偏啰嗦,于是最近便开始采用Coffeescript来减轻负担.举个栗子,当我想取屋子里的第一条dog时,首先要判断house对象是否存在,然后再判断house.dogs是否存在,最后取h ...