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 ...
随机推荐
- iview表单验证之正则验证、函数验证
iview表单验证之正则 正则验证: 代码: loginRules: { stringLength: [ { required: true, message: '该字段不能为空', trigger: ...
- vue-复制功能插件-兼容性最好的插件
记录给自己用,不进同一次坑: https://github.com/Inndy/vue-clipboard2
- shell 实用脚本
功能 将当前目录下文件拷贝至另一目录下,且拷贝前先备份 #!/bin/sh #脚本功能 #覆盖文件前先备份 cfsuffix=$(date +%Y%m%d); #备份文件后缀 ]; then #输入参 ...
- (转)linux特殊文件名字删除不了怎么办
1. 文件名含有特殊字符,直接使用 rm 可能删除不了,可以使用如下方法: 1) 使用 ls -i 查处该文件的 inode 号,假设为654321 2) 使用find命令删除 find ./ -in ...
- 重写 equals() 和 hashcode()
重写equals() @Override public boolean equals(Object o) { if (this == o) return true; if (o == null || ...
- 支付宝支付之扫码支付（电脑网站支付）、H5支付（手机网站支付）相关业务流程分析总结
前言 在上一篇文章<微信支付之扫码支付.公众号支付.H5支付.小程序支付相关业务流程分析总结>中,分析和总结了微信支付相关支付类型的业务流程,这里作为与微信支付平起平坐不相伯仲的支付宝支付 ...
- Katalon Studio入门学习之三种获取元素方式
Katalon Studio中元素属性定位有三种方式,分别是XPath.Attributes(元素).CSS(样式),KS的界面展示如右图 打开网站,按F12或进入浏览器设置->更多工具-> ...
- Lambda学习总结(三)--方法引用
一.方法引用 1.1 方法引用含义 在学习了 Lambda 表达式之后,我们通常会使用 Lambda 表达式来创建匿名方法.但有的时候我们仅仅是需要调用一个已存在的方法.如下示例: @Function ...
- window下，nodejs安装http-server，并开启HTTP服务器
1.下载nodejs 官方下载地址:https://nodejs.org/en/ 2.在cmd命令中,输入node -v 输入出版本号,代表安装成功. 3.输入 npm install http-s ...
- nginx跨域设置&文件上传大小限制
在部署项目的时候碰到这么一个问题:XMLHttpRequest cannot load,下面阐述一下这个问题 问题背景: 用nginx+tomcat部署项目.tomcat用的8080端口,nginx用 ...