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 ...
随机推荐
- Mysql学习（二）之通过homebrew安装mysql后，为什么在系统偏好设置里没有mysql
原因 用brew install packagename是用来安装命令行工具的,一般不可能影响到图形界面. mysql官方文档是通过dmg文件安装的: The MySQL Installation P ...
- 如何在Python中快速画图——使用Jupyter notebook的魔法函数（magic function)matplotlib inline
如何在Python中快速画图--使用Jupyter notebook的魔法函数(magic function)matplotlib inline 先展示一段相关的代码: #we test the ac ...
- Java中字符串排序
package com.fs.test; import java.util.ArrayList; import java.util.Collections; import java.util.List ...
- vue配置路由时报错 Error in render: "RangeError: Maximum call stack size exceeded"
虽然标题写的是配置路由报错,最终也是通过修改路由解决的,但是导致报错的还有一个主要因素,是因为我增加了一个功能“页面刷新时,根据url高亮左侧导航”,如下图: 1.页面刷新,根据url高亮左侧导航代码 ...
- 多个类用@feignclient标注同一个服务,出错问题:Error starting ApplicationContext. To display the conditions report re-run your application with 'debug' enabled.Caused by: org.springframework.beans.factory.support.Bea..
如果标注了两个或以上类 @FeignClient 标注同一个 服务名称 调用方会主配置类启动会报错 测试类报错 java.lang.IllegalStateException: Failed to l ...
- SpringMVC基础03——常用注解之@RequestMapping
1.用法 SpringMVC使用@RequestMapping注解,为控制器指定可以处理哪些URL请求,并且可以指定处理请求的类型(POST/GET),如果@RequestMapping没有指定请求的 ...
- SSD源码解读——网络测试
之前,对SSD的论文进行了解读,可以回顾之前的博客:https://www.cnblogs.com/dengshunge/p/11665929.html. 为了加深对SSD的理解,因此对SSD的源码进 ...
- ERA-interim
数据介绍整理中... https://software.ecmwf.int/wiki/display/UER/Time-integrated+surface+solar+radiation+downw ...
- filebeat收集nginx的json格式日志
一.在nginx主机上安装filebeat组件 [root@zabbix_server nginx]# cd /usr/local/src/ [root@zabbix_server src]# wge ...
- 标准C语言(3)
操作符用来描述对数字的处理规则根据操作符所需要配合的数字个数把操作符分为单目操作符,双目操作符和三目操作符 C语言里用+,-,*和/表示加减乘除四则运算,它们都是双目操作符,如果参与除法计算的两个数字 ...