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 ...
随机推荐
- Charles学习（二）之使用Map local代理本地静态资源以及配置网页代理在Mac浏览器上调试移动端
前言 我们在开发的过程肯定是一边写代码,一边查看自己的代码写的是否存在问题,那么问题来了,有两种情况 情况一:我们可以本地起服务,那么我们就可以在本地检查自己的代码,查看运行结果 情况二:本地无法起服 ...
- 三剑客-awk（简写）
特殊要点:$0 表示整个当前行$1 每行第一个字段NF 字段数量变量NR 每行的记录号,多文件记录递增OFS 输出字段分隔符, 默认也是空格,可以改为制表符等ORS 输出的记录分隔符,默认为换行符,即 ...
- java实现spark常用算子之distinct
import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaRDD;import org.apache.spark.a ...
- 关于ES5中的prototype与ES6中class继承的比较
ES5:继承: 1.ES5:继承 通过原型链实现继承.子类的prototype为父类对象的一个实例,因此子类的原型对象包含指向父类的原型对象的指针,父类的实例属性成为子类原型属性 2.ES6 的继承 ...
- mybatis查询返回的对象不为null，但是属性值为null
返回的对象不为null,但是属性值为null 代码如下: <resultMap id="BaseResultMap" type="com.trhui.ebook.d ...
- 线程安全的Singleton要点
1.privat static Singleton 要加votatile关键字修饰,防止对象的初始化代码与引用赋值代码进行重排序. 2.getInstance方法,最外层要加if (instance ...
- 第十篇.2、python并发编程之多进程
一 multiprocessing模块介绍 python中的多线程无法利用多核优势,如果想要充分地使用多核CPU的资源(os.cpu_count()查看),在python中大部分情况需要使用多进程.P ...
- ubuntu下usb抓包方法步骤--usbmon
开发或者调试USB设备相关的工具或者驱动,一个调试的利器就是usbmon抓包. 在ubuntu下使用步骤如下: 1 运行命令 sudo mount -t debugfs none /sys/ke ...
- target_link_libraries每次能连接1个？？？
target_link_libraries(usb-1.0)target_link_libraries(cyusb)
- 递归型SPFA+二分答案 || 负环 || BZOJ 4773
题解: 基本思路是二分答案,每次用Dfs型SPFA验证该答案是否合法. 一点细节我注释在代码里了. 代码: #include<cstdio> #include<cstring> ...