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. doGet和doPost区别

    1,form运行方式 当form框里面的method为get时,执行doGet方法当form框里面的method为post时,执行doPost方法 2,生成方式 get方式有四种:1)直接在URL地址 ...

  2. java Socket Tcp 浏览器和服务器(一)

    自定义服务端,使用已有的客户端IE,了解一下客户端给服务端发了什么请求? 发送的请求是: GET / HTTP/1.1  请求行  请求方式  /myweb/1.html  请求的资源路径   htt ...

  3. 架构-LAMP特级学习(网站大访问量解决方案)

    网站运营要面对的四个问题总结: 1.大访问量(主用负载均衡技术) 2.大存储量 3.访问速度 4.服务器监控 一.大访问量解决方案 超级计算机 = 负载均衡 + 集群 0.反向代理(Nginx等实现) ...

  4. java.lang.UnsupportedClassVersionError: org/hibernate/SessionFactory : Unsupported major.minor version 52.0

    问题: 在学习hibernate的过程中,涉及导入jar包的问题,写该文的时候是从官网下载的最新的hibernate的jar包hibernate-release-5.2.10.Final .在测试时, ...

  5. windows named pipe 客户端 服务器

    可以实现多客户端对一服务端,服务端为客户端提供服务. 其实一服务端对应每一个client pipe都新建立了一个pipe.windows允许建立多个同名pipe 效果: 服务端代码: #define ...

  6. c语言格式大整理

    1.C语言中,非零值为真,真用1表示:零值为假,假用0表示. 2.转义字符参考: \a 蜂鸣,响铃 \b 回退:向后退一格 \f 换页 \n 换行 \r 回车,光标到本行行首 \t 水平制表 \v 垂 ...

  7. 深入理解SpringBoot配置

    一.application.properties的位置 1.当前目录的 "/config"的子目录下 2.当前目录下 3.classpath根目录的"/config&qu ...

  8. Hadoop DistCp 使用指南

    原文地址:http://hadoop.apache.org/docs/r1.0.4/cn/distcp.html 概述 使用方法 基本使用方法 选项 选项索引 更新和覆盖 附录 Map数目 不同HDF ...

  9. 程序猿修仙之路--数据结构之你是否真的懂数组? c#socket TCP同步网络通信 用lambda表达式树替代反射 ASP.NET MVC如何做一个简单的非法登录拦截

    程序猿修仙之路--数据结构之你是否真的懂数组?   数据结构 但凡IT江湖侠士,算法与数据结构为必修之课.早有前辈已经明确指出:程序=算法+数据结构  .要想在之后的江湖历练中通关,数据结构必不可少. ...

  10. Linux进程学习 - 孤儿进程和守护进程

    孤儿进程和守护进程 通过前面的学习我们了解了如何通过fork()函数和vfork()函数来创建一个进程.现在 我们继续深入来学习两个特殊的进程:孤儿进程和守护进程 一.孤儿进程 1.什么是 孤儿进程如 ...