echarts+json笔记
echart_test.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../demo.js"></script>
<title>ECharts</title>
<script src="../echarts.common.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body onload="echarts_test('main', lolo_spec, lo_spec, hi_spec, hihi_spec, meas_spec, freq_spec);">
<input type="button" id="echarts_01" value="echarts_01" onclick="echarts_test('main', lolo_spec, lo_spec, hi_spec, hihi_spec, meas_spec, freq_spec);">
<div id="main" style="height:400px;width:1000px"></div>
<script type="text/javascript">
var json_var ='{"json_var_01":[{index:2, freq:200, lo:120},{index:1, freq:100, lo:150}]}';
var json_data = eval("("+json_var+")");
console.log(json_data);
function down(x, y) {
return (x.freq > y.freq) ? 1 : -1
}
json_data.json_var_01.sort(down);
console.log(json_data); var lolo_spec = [100, 150, 100, 200, 100, 50, 400, 200, 500, 200];
var lo_spec = [200, 220, 200, 300, 300, 90, 500, 400, 700, 300];
var hi_spec = [500, 300, 400, 400, 550, 150, 600, 500, 880, 400];
var hihi_spec = [600, 400, 500, 500, 700, 200, 1000, 700, 1000, 500];
var meas_spec = [241, 260, 280, 400, 500, 100, 930, 560, 750, 350];
var freq_spec = [150, 200, 300, 400, 500, 600, 700, 800, 900, 1000]; </script>
<dir id="branch" style="height:400px;width:1000px"></dir> </body>
demo.js
function demo_f01()
{
alert("demo_f01");
} function echarts_test (id, lolo_spec, lo_spec, hi_spec, hihi_spec, meas_spec, freq_spec)
{
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById(id));
var option = {
title:{
text:'title_name',
show:true,
},
tooltip: {
trigger:'axis',
axisPointer: {
type: 'line'
},
show: true,
},
legend: {
data:['lolo','lo','hi','hihi','meas']
},
xAxis : [
{
type : 'category',
splitLine: {
show: false,
},
data : freq_spec,
}
],
yAxis : [
{
type : 'value',
splitLine: {
show: false,
}
}
],
series : [
{
name:"hihi",
type:"line",
smooth: false,
data: hihi_spec, areaStyle: {
normal: {
opacity:0.5,
color:'#FF0000',
}
}
},
{
name:"hi",
type:"line",
smooth: false,
data: hi_spec,
areaStyle: {
normal: {
opacity:1,
color:'#FFFFFF',
}
}
},
{
name:"meas",
type:"line",
smooth: false,
data: meas_spec,
lineStyle: {
normal: {
opacity:1,
color:'#00BB00',
width:3,
}
}
},
{
name:"lo",
type:"line",
smooth: false,
data: lo_spec,
areaStyle: {
normal: {
opacity:0.5,
color:'#FFD306',
}
}
},
{
name:"lolo",
type:"line",
smooth: false,
data: lolo_spec,
areaStyle: {
normal: {
opacity:1,
color:'#FFFFFF',
}
}
}, ],
dataZoom: [
{
type: 'slider',
xAxisIndex: 0,
start: 0,
end: 100
},
{
type: 'inside',
xAxisIndex: 0,
start: 0,
end: 100
},
], toolbox: {
feature: {
restore:{},
dataView: {
show:true,
readOnly:true,
lang:["Spectrum Data", "close"]
},
saveAsImage: {
show:true,
excludeComponents :['toolbox'],
pixelRatio: 2,
}
}
},
};
//myChart.showLoading();
// 为echarts对象加载数据
myChart.hideLoading();
myChart.setOption(option);
}
echarts+json笔记的更多相关文章
- echarts学习笔记(一)
echarts学习笔记(一) echarts开发步骤 创建一个新的html文件 在html文件head头部信息中导入echarts 声明一个容器(可以理解为画布),用于存放echarts 实例化ech ...
- Echarts学习笔记之饼图
注:ECHarts的相关文件请到ECharts官网下载,下载地址:http://echarts.baidu.com/download.html 1.前台 <div style="ali ...
- Echarts学习笔记
1.Ecahrts使用首先需要引用js文件 Echarts.js 然后定义一个带id的容器(div就可以) 然后就可以初始化echarts了 ↓这是柱形图 <h2 class="con ...
- 【05】JSON笔记
[05]笔记 尽管有许多宣传关于 XML 如何拥有跨平台,跨语言的优势,然而,除非应用于 Web Services,否则,在普通的 Web 应用中,开发者经常为 XML 的解析伤透 ...
- Web jsp开发自学——ajax+servlet+echarts+json+gson 实现ajax传输servlert和echarts的数据，可视化结果
感谢下面的博主,我学习的博客有: https://blog.csdn.net/ITBigGod/article/details/81023802 Jsp+Servlet+Echarts实现动态数据可 ...
- JavaScript高级程序设计第20章JSON 笔记 （学习笔记）
第二十章 JSON 1.Json 可以表示三种类型的值: 1.简单值: 表示数值:5 表示字符串:“hello wrold”注表示字符串时必须使用双引号 2.对象: {“name”:“mi”,”ag ...
- echarts演示笔记
http://echarts.baidu.com/doc/start.html 1.新建一个echarts.html文件,为ECharts准备一个具备大小(宽高)的Dom. <!DOCTYPE ...
- JSON笔记
JSPN示例1: { "firstName": "Brett", "lastName":"McLaughlin", &q ...
- JSON笔记整理
JSON简介: JSON: JavaScript Object Notation(JavaScript 对象表示法) JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML ...
随机推荐
- 099、如何访问Service （Swarm06）
参考https://www.cnblogs.com/CloudMan6/p/7909136.html 前面已经学习了如何部署Service吗,也验证了swarm的failover特性,下面我们要学 ...
- luogu P3826 [NOI2017]蔬菜
luogu 那个第一次购买有\(s_i\)奖励,可以看成是多一种蔬菜\(i+n\),权值为\(w_i+s_i\),每天减少量\(x\)为0个,保质期\(\lceil\frac{c_i}{x_i}\rc ...
- 部署Dashboard，监控应用
部署web UI(dashboard)用于监控node资源 参见文档:https://blog.csdn.net/networken/article/details/85607593 官网:https ...
- mySql 的常用命令
一.数据库操作 1.创建数据库 create database <数据库名>: -- 例如,创建test数据库,create database test; 2.查询所有的数据库 show ...
- 爆路径写后门拿shell的一些姿势
[PhpMyAdmin后台拿Shell]CREATE TABLE `mysql`.`xiaoma` (`xiaoma1` TEXT NOT NULL );INSERT INTO `mysql`.`xi ...
- 常用的商业级和免费开源Web漏洞扫描工具
Scanv 国内著名的商业级在线漏洞扫描.可以长期关注,经常会有免费活动.SCANV具备自动探测发现无主资产.僵尸资产的功能,并对资产进行全生命周期的管理.主动进行网络主机探测.端口探测扫描,硬件特性 ...
- deep_learning_Function_softmax_cross_entropy_with_logits
[TensorFlow]tf.nn.softmax_cross_entropy_with_logits的用法 [TensorFlow]tf.nn.softmax_cross_entropy_with_ ...
- MP4 ISO基础媒体文件格式术语
术语.定义和缩略术语 box 由唯一类型标识符和长度定义的面向对象的构造块(注:在一些标准称为“atom") chunk(块) 一个track连续采样集合 container box 唯一目 ...
- java7连接数据库 网页 添加学生信息测试
石家庄铁道大学2019年秋季 2018 级课堂测试试卷(六)(10分) 课程名称: JAVA语言程序设计 任课教师: 王建民 考试时间: 150 分钟 一. 考试要求: 1登录账号 ...
- Nginx 0.8.x + PHP 5.2.13（FastCGI）搭建胜过Apache十倍的Web服务器
[文章作者:张宴 本文版本:v6.3 最后修改:2010.07.26 转载请注明原文链接:http://blog.zyan.cc/nginx_php_v6/] 前言:本文是我撰写的关于搭建“Nginx ...