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%',
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问题的更多相关文章
- echarts设置option中的数据对象优化
if(tab.name == 'first'){ myChart.setOption({ legend: { selected:{ [this.playNumber]:true, [this.cove ...
- ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决
1. 我们在日常的开发中使用Echarts时,不像在学习的过程中是自己在option中的配置项填写图表需要的参数,而是通过ajax请求后台,获取数据后,使用javascript来动态的修改数据,但是有 ...
- echarts中显示效果option中必有的属性
写一个最简单的效果让option中不可缺少的属性. var option = { xAxis:[ //x轴,数组对象,其下至少有一个对象 {.....} ], yAxis:[//y轴,数组对象,其下可 ...
- 一个解析json串并组装echarts的option的函数解析
缘起: 在组装echart页面的时候,遇到这样一个问题,它是一个需要在循环内层的时候,同时循环外层,在内层循环中就要将外层获取的值存入,导致了一种纠缠状态,费了老劲儿,终于得到如下解决.记录之,绿色为 ...
- echarts在vue中使用的感悟
echarts在vue中使用的感悟 echarts作为图表展示的强大存在,每当使用后台系统,或多或少都会使用到,但是作为菜鸟的我,则是一路采坑,各种头大,比比皆是,为了避免下次再犯同样的错误,特意记录 ...
- Echarts在java中使用
index.jsp <%@ page language="java" import="java.util.*" pageEncoding="UT ...
- QStandardItemModel的data线程安全(在插入数据时,临时禁止sizeHint去读model中的data)
版权声明:本文为博主原创文章,欢迎转载,转载请注明出处 https://blog.csdn.net/MatchYang/article/details/52988257 在直接使用QStandardI ...
- Echarts在Vue中的使用
1.使用 cnpm 或 npm 安装 Echarts cnpm方式 cnpm install echarts -S 或者 npm方式 npm install echarts --save 2.在项目文 ...
- echarts在.Net中使用实例(一) 简单的Demo
前言 这个必须要有前言,即便很短,对于有强迫症的人来说不容易啊.言归正传,之前做图一直使用rdlc自带的格式,虽然任务完成,但是一直觉得不太美观, 空余时间开始找其他的插件,终于找到了Highchar ...
随机推荐
- codeforces Epic Game 题解
Simon and Antisimon play a game. Initially each player receives one fixed positive integer that does ...
- Openerp 7.0消息推送
在一个文档的state变化时,需要将变化情况告知关注用户,通过研究account.invoice的代码,发现是经过如下过程实现此功能的: 1.添加一个消息阶段: <record id=" ...
- eclipse javaWeb项目如何引入jar包
eclipse javaWeb项目如何引入jar包 CreateTime--2018年4月19日08:54:24 Author:Marydon 1.判断当前jar包是否已经引入到项目当中的3种方式 ...
- python学习笔记之基础数据和控制
注释: 单行注释 # 多行注释''' ''' 注意:当注释中有汉字时需要在python文件的第一行添加如下内容之一:#coding:gbk或#coding:utf-8或##-*- coding ...
- python之函数用法file()
# -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法file() #file() #说明:file()内建函数它的功能等于open(),但 ...
- tomcat7.0.27的bio,nio.apr高级运行模式(转)
一 前言 tomcat的运行模式有3种.修改他们的运行模式.3种模式的运行是否成功,可以看他的启动控制台,或者启动日志.或者登录他们的默认页面http://localhost:8080/查看其中的服务 ...
- [转载][转]修改/proc目录下的参数优化网络性能
原文地址:[转]修改/proc目录下的参数优化网络性能作者:雪人 网络优化 注意: 1. 参数值带有速度(rate)的参数不能在loopback接口上工作. 2.因为内核是以HZ为单位的内部时钟来定义 ...
- 如何解决普通用户使用sudo找不到命令
一.在linux的普通用户下,要使用root权限的命令需要使用sudo [dev@dev1 client_api]# sudo git pull origin develop sudo: git: c ...
- java多线程(五)之总结(转)
引 如果对什么是线程.什么是进程仍存有疑惑,请先Google之,因为这两个概念不在本文的范围之内. 用多线程只有一个目的,那就是更好的利用cpu的资源,因为所有的多线程代码都可以用单线程来实现.说这个 ...
- HDUOJ--2079选课时间(题目已修改,注意读题)
选课时间(题目已修改,注意读题) Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...