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

时间: 2024-10-05 05:01:46

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

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

缘起: 在组装echart页面的时候,遇到这样一个问题,它是一个需要在循环内层的时候,同时循环外层,在内层循环中就要将外层获取的值存入,导致了一种纠缠状态,费了老劲儿,终于得到如下解决.记录之,绿色为语句功能注释. /** * @desc 获取用户使用网络数据 * @param index_type * @param chatId */ function getNetWorkData(index_type,chatId,start,end) { // 传递三个参数,index_type为数据类型

echarts在.Net中使用实例(二) 使用ajax动态加载数据

前一篇文章链接:echarts在.Net中使用实例(一) 简单的Demo 通过上一篇文章可以知道和echarts参考手册可知,series字段就是用来存储我们显示的数据,所以我们只需要用ajax来获取series的值就可以. option 名称 描述 {color}backgroundColor 全图默认背景,(详见backgroundColor),支持rgba,默认为无,透明 {Array} color 数值系列的颜色列表,(详见color),可配数组,eg:['#87cefa', 'rgba

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

前言 这个必须要有前言,即便很短,对于有强迫症的人来说不容易啊.言归正传,之前做图一直使用rdlc自带的格式,虽然任务完成,但是一直觉得不太美观, 空余时间开始找其他的插件,终于找到了Highchart和echarts,这一系列主要是针对echarts. 关于Echarts 百度比我更清楚,我就不说了! echarts的实例参考地址:http://echarts.baidu.com/doc/example.html echarts的文档参考地址:http://echarts.baidu.com/

Echarts在java中使用

index.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><% String path = request.getContextPath(); String

mysql中的data下的数据文件(.FRM、.MYD、.MYI)恢复为数据

记一次mysql中的data文件操作经历 想拿到一个项目的最新的数据,做功能升级使用,备份一份数据同时也作为本地测试数据,文件有些大,我直接通过远程的phpmyadmin程序导出,不能愉快的玩耍,直接联系了IDC的同事帮忙导一份sql文件出来一下,结果那哥们没得直接扔给了我data文件,这让我如何是好,这个问题我没遇见过啊.处于面子问题,又不好意思再让他重新发我一份sql文件,只好硬着头皮尝试一下如何恢复成数据. 环境申明 以下操作都是针对windows下的操作 Data文件分析 *.frm是描

Qt模型/视图中的data和headerData

QAbstractItemModel QAbstractItemModel是一个抽象类,该抽象类未实现的纯虚方法有 QModelIndex QAbstractItemModel::index(int row, int column, const QModelIndex & parent = QModelIndex()) const [pure virtual] QModelIndex QAbstractItemModel::parent(const QModelIndex & index)

Css中路径data:image/png;base64的用法详解 (转载)

大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: background-image:url(data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXR FWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJRE FUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIB hH5E

R.net获取R中股票的dataframe中的data

在我之前,没有人研究过这些.so,你们要喊哥哥. engine.Initialize(); engine.Evaluate("library(quantmod)"); engine.Evaluate("getSymbols('AAPL',src='yahoo',from='2004-1-1',to='2014-1-1')"); engine.Evaluate("data<-data.frame(head(AAPL))"); DataFram

Css中路径data:image/png;base64的用法详解

今天查看一些网站的css中发现了 background-image:url(data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXR FWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJRE FUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIB hH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ