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 ...
随机推荐
- 解决mac下brew install报错
Error: Another active Homebrew update process is already in progress.Please wait for it to finish or ...
- Keepalived+Nginx+Tomcat 实现高可用Web集群
https://www.jianshu.com/p/bc34f9101c5e Keepalived+Nginx+Tomcat 实现高可用Web集群 0.3912018.01.08 20:28:59字数 ...
- MySQL两种内核对比
MySQL内核 https://blog.csdn.net/baichoufei90/article/details/83504446 关键字:全文索引 索引外置 两种内核:MyISAM 和InnoD ...
- java 矩阵的运算
首先需要引入包Jama-1.0.2.jar 这个包下封装的对矩阵运算的方法,包括矩阵的加减乘除逆运算等 包下载地址:https://math.nist.gov/javanumerics/jama/ ...
- 阿里云服务器配置https
第一步 在阿里云控制台找到申请ssl证书的地址(我申请的是阿里云免费的证书,申请完要等申请通过,可能要等待一两天) 第二步下载ssl nginx版本的证书 第三步上传证书(包含.key, .pem这两 ...
- JRebel最新破解激活版(IDEA自动部署插件)
参考: https://www.52pojie.cn/thread-906163-1-1.html https://blog.csdn.net/xingbaozhen1210/article/deta ...
- python根据已有数据库生成model.py
有时我们需要根据已存在的数据库进行django开发时,手写model.py是不现实的 先执行下面的语句,在命令行终端会输出所有表的类 python .\manage.py inspectdb 检查无误 ...
- Linux排查磁盘空间顺序解决空间不足问题
1 先查看整个磁盘的情况 df -h 查看整台服务器的硬盘使用情况 cd / 进入根目录 du -s ...
- ShuffleNet系列学习笔记
ShuffleNet是旷世提出的高效轻量化网络,是一款很值得一提的轻量化网络,其相关论文也是很有价值的. ShuffleNet V1 该网络提出于2017年,论文为<ShuffleNet: An ...
- 牛客练习赛44 C 小y的质数 （数论，容斥定理）
链接:https://ac.nowcoder.com/acm/contest/634/C 来源:牛客网 题目描述 给出一个区间[L,R],求出[L,R]中孪生质数有多少对. 由于这是一个区间筛质数的模 ...