echart 打开新世界的大门
实时折线图
option = {
backgroundColor:'#2B2B2B',
tooltip: {
trigger: 'axis'
},
legend: {
data:['频率'],
textStyle:{
color:'#FFF',
fontSize:20
}
},
xAxis: {
type: 'category',
boundaryGap: false,
splitLine:{
show:true,
lineStyle:{
type:'dotted'
}
},
axisLabel:{
textStyle:{
color:'#FFF',
fontSize:20
}
},
axisLine:{
lineStyle:{
color:'#FFF'
}
},
data: ['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00','23:59']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} Hz',
textStyle:{
color:'#FFF',
fontSize:20
}
},
min:48.75,
max:51.25,
axisLine:{
lineStyle:{
color:'#FFF'
}
},
splitLine:{
show:true,
lineStyle:{
type:'dotted'
}
}
},
series: [
{
name:'频率',
type:'line',
symbol:'circle',
itemStyle:{
normal:{
color:'#00FF00'
}
},
data:[],
markPoint: {
symbolSize:1,
data: [
{type: 'max', name: '最大值',itemStyle:{normal:{color:'#00FF00'}}},
{type: 'min', name: '最小值',itemStyle:{normal:{color:'#00FF00'}}}
],
label:{normal:{textStyle:{color:'#00ff00',fontSize:25}}}
},
lineStyle:{
normal:{
color:'#00FF00',
width:3
}
},
markLine: {
lineStyle:{
normal:{
type:'solid',
width:2
}
},
data: [
{type: 'average', name: '平均值',itemStyle:{normal:{color:'#FFFFFF'}}}
],
label:{normal:{textStyle:{color:'#FFF',fontSize:20}}}
}
},
{
name:'最大值',
type:'line',
symbol:'circle',
symbolSize:1,
itemStyle:{
normal:{
color:'red'
}
},
lineStyle:{normal:{width:2}},
data:[51, 51, 51, 51, 51, 51, 51,51,51,51,51,51,51,51, 51, 51, 51, 51, 51, 51,51,51,51,51,51,51],
},
{
name:'最小值',
type:'line',
symbol:'circle',
symbolSize:1,
itemStyle:{
normal:{
color:'red'
}
},
lineStyle:{normal:{width:2}},
data:[49, 49, 49, 49, 49, 49, 49,49,49,49,49,49,49,49, 49, 49, 49, 49, 49, 49,49,49,49,49,49,49],
}
]
};
var index=0;
setInterval(function () {
if (index<=24) {
option.series[0].data.push(Math.random().toFixed(2) * 2+49);
} else {
option.series[0].data=[];
index=0;
}
index++;
myChart.setOption(option, true);
},1000);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echart学习</title>
</head>
<body> <p>------------------------</p> <div id="main2" style="height:400px"></div> <!--
<script src="js/echarts-all.js" charset="utf-8"></script>-->
<script src="https://cdn.bootcss.com/echarts/3.8.5/echarts-en.common.js"></script>
<script type="text/javascript"> var myChart22 = echarts.init(document.getElementById('main2'));
var option22 = {
backgroundColor: '#2B2B2B',
tooltip: {
trigger: 'axis'
},
legend: {
data: ['频率'],
textStyle: {
color: '#FFF',
fontSize: 20
}
},
xAxis: {
type: 'category',
boundaryGap: false,
splitLine: {
show: true,
lineStyle: {
type: 'dotted'
}
},
axisLabel: {
textStyle: {
color: '#FFF',
fontSize: 20
}
},
axisLine: {
lineStyle: {
color: '#FFF'
}
},
data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '23:59']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} Hz',
textStyle: {
color: '#FFF',
fontSize: 20
}
},
min: 48.75,
max: 51.25,
axisLine: {
lineStyle: {
color: '#FFF'
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dotted'
}
}
},
series: [{
name: '频率',
type: 'line',
symbol: 'circle',
itemStyle: {
normal: {
color: '#00FF00'
}
},
data: [],
markPoint: {
symbolSize: 1,
data: [{
type: 'max',
name: '最大值',
itemStyle: {
normal: {
color: '#00FF00'
}
}
},
{
type: 'min',
name: '最小值',
itemStyle: {
normal: {
color: '#00FF00'
}
}
}
],
label: {
normal: {
textStyle: {
color: '#00ff00',
fontSize: 25
}
}
}
},
lineStyle: {
normal: {
color: '#00FF00',
width: 3
}
},
markLine: {
lineStyle: {
normal: {
type: 'solid',
width: 2
}
},
data: [{
type: 'average',
name: '平均值',
itemStyle: {
normal: {
color: '#FFFFFF'
}
}
}],
label: {
normal: {
textStyle: {
color: '#FFF',
fontSize: 20
}
}
}
}
},
{
name: '最大值',
type: 'line',
symbol: 'circle',
symbolSize: 1,
itemStyle: {
normal: {
color: 'red'
}
},
lineStyle: {
normal: {
width: 2
}
},
data: [51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51], },
{
name: '最小值',
type: 'line',
symbol: 'circle',
symbolSize: 1,
itemStyle: {
normal: {
color: 'red'
}
},
lineStyle: {
normal: {
width: 2
}
},
data: [49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49], }
]
}; var index22 = 0;
setInterval(function() {
if (index22 <= 24) {
option22.series[0].data.push(Math.random().toFixed(2) * 2 + 49);
} else {
option22.series[0].data = [];
index22 = 0;
}
index22++;
myChart22.setOption(option22, true);
}, 1000); </script>
</body>
</html>
彩虹效果
app.title = '随便玩玩儿,嘻嘻'; var red = '#F00';
var orange = '#F60';
var yellow = '#FF0';
var green = '#0C0';
var cyan = '#17D4DE';
var blue = '#2616D9';
var purple = '#B013DC';
var white = '#EFEFEF';
var sky = '#88FFFF';
var brown = '#D2691E'; var duration = 5000; option = {
title: {
text: '彩虹',
subtext: '作者: 断浪',
},
backgroundColor: '#88FFFF',
series: [
//红
{
type: 'pie',
animationDuration: duration,
itemStyle: {
color: function(data) {
return data.dataIndex == 1 ? sky : red;
}
},
legendHoverLink: false, //是否联动高亮 defult:true
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
labelLine: {
show: false
},
hoverOffset: 0, //高亮时的偏移区域 defult:10
center: ['50%', '70%'],
radius: [280, 250],
startAngle: 180, //起始角度
data: [{
name: 'red',
value: 10
},
{
name: 'land1',
value: 10
}
]
},
//橙
{
type: 'pie',
animationDuration: duration,
itemStyle: {
color: function(data) {
return data.dataIndex == 1 ? sky : orange;
}
},
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
labelLine: {
show: false
},
legendHoverLink: false, //是否联动高亮 defult:true
hoverOffset: 0, //高亮时的偏移区域 defult:10
center: ['50%', '70%'],
radius: [250, 220],
startAngle: 180, //起始角度
data: [{
name: 'orange',
value: 10
},
{
name: 'land2',
value: 10
}
]
},
//黄
{
type: 'pie',
animationDuration: duration,
itemStyle: {
color: function(data) {
return data.dataIndex == 1 ? sky : yellow;
}
},
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
labelLine: {
show: false
},
legendHoverLink: false, //是否联动高亮 defult:true
hoverOffset: 0, //高亮时的偏移区域 defult:10
center: ['50%', '70%'],
radius: [220, 190],
startAngle: 180, //起始角度
data: [{
name: 'yellow',
value: 10
},
{
name: 'land3',
value: 10
}
]
},
//绿
{
type: 'pie',
animationDuration: duration,
itemStyle: {
color: function(data) {
return data.dataIndex == 1 ? sky : green;
}
},
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
labelLine: {
show: false
},
legendHoverLink: false, //是否联动高亮 defult:true
hoverOffset: 0, //高亮时的偏移区域 defult:10
center: ['50%', '70%'],
radius: [190, 160],
startAngle: 180, //起始角度
data: [{
name: 'green',
value: 10
},
{
name: 'land4',
value: 10
}
]
},
//青
{
type: 'pie',
animationDuration: duration,
itemStyle: {
color: function(data) {
return data.dataIndex == 1 ? sky : cyan;
}
},
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
labelLine: {
show: false
},
legendHoverLink: false, //是否联动高亮 defult:true
hoverOffset: 0, //高亮时的偏移区域 defult:10
center: ['50%', '70%'],
radius: [160, 130],
startAngle: 180, //起始角度
data: [{
name: 'green',
value: 10
},
{
name: 'land5',
value: 10
}
]
},
//蓝
{
type: 'pie',
animationDuration: duration,
itemStyle: {
color: function(data) {
return data.dataIndex == 1 ? sky : blue;
}
},
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
labelLine: {
show: false
},
legendHoverLink: false, //是否联动高亮 defult:true
hoverOffset: 0, //高亮时的偏移区域 defult:10
center: ['50%', '70%'],
radius: [130, 100],
startAngle: 180, //起始角度
data: [{
name: 'blue',
value: 10
},
{
name: 'land6',
value: 10
}
]
},
//紫
{
type: 'pie',
animationDuration: duration,
itemStyle: {
color: function(data) {
return data.dataIndex == 1 ? sky : purple;
}
},
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
labelLine: {
show: false
},
legendHoverLink: false, //是否联动高亮 defult:true
hoverOffset: 0, //高亮时的偏移区域 defult:10
center: ['50%', '70%'],
radius: [100, 70],
startAngle: 180, //起始角度
data: [{
name: 'purple',
value: 10
},
{
name: 'land7',
value: 10
}
]
},
],
};
中间带图片参数
var giftImageUrl = "data:image/png;base64,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";
option = {
backgroundColor: '#fff',
tooltip: {
trigger: 'item',
formatter: "{b} : {d}% <br/> {c}"
},
graphic: {
elements: [{
type: 'image',
style: {
image: giftImageUrl,
width: 130,
height: 130
},
left: 'center',
top: 'center'
}]
},
/*legend: {
orient: 'horizontal',
icon: 'circle',
bottom: 20,
x: 'center', data: ['金融', '房地产', '专业服务业', '批发和零售业', '其他']
},*/
series: [{
type: 'pie',
radius: ['35%', '50%'],
center: ['50%', '50%'],
color: ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'],
data: [{
value: 335,
name: '金融'
},
{
value: 310,
name: '房地产'
},
{
value: 234,
name: '其他'
},
{
value: 235,
name: '批发和\n零售业'
},
{
value: 254,
name: '专业\n服务业'
}
],
labelLine: {
normal: {
show: true,
length: 20,
length2: 20,
lineStyle: {
color: '#12EABE',
width: 2
}
}
},
label: {
normal: {
formatter: '{c|{b}}\n{d|{d}%}',
rich: {
b: {
fontSize: 16,
color: '#12EABE',
align: 'left',
padding: 4
},
d: {
fontSize: 16,
align: 'left',
padding: 2
},
c: {
color: '#333',
fontSize: 16,
align: 'left',
padding: 2
}
}
}
}
}]
};
双曲螺线
var data = [];
for (var circle = 0; circle < 5; ++circle) {
for (var i = 0; i <= 100; i++) {
var theta = i / 100 * 360;
var alpha = circle * 360 + theta;
var r = Math.pow(Math.E, 0.003 * alpha);
data.push([r, theta]);
}
} option = {
title: {
text: '双曲螺线'
},
polar: {},
tooltip: {
trigger: 'item'
},
angleAxis: {
type: 'value',
startAngle: 135,
show: false
},
radiusAxis: {
show: false,
max: 225
},
series: [{
coordinateSystem: 'polar',
name: 'line',
type: 'line',
data: data,
symbolSize: 0,
symbol: 'circle',
areaStyle: {
normal: {
color: new echarts.graphic.RadialGradient(0.64, 0.5, 1, [{
offset: 0.1,
color: 'rgba(255, 0, 0, 0.5)'
}, {
offset: 1,
color: 'rgba(255, 255, 0, 0)'
}], false)
}
},
lineStyle: {
normal: {
color: '#C25353',
width: 3
}
}
}]
};
echart 结合 百度地图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body> <div id="main" style="width: 100%;height:900px;"></div> <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=k0sIRS3WbKwkon8rdEwGBPVeGq38QWDD"></script>
<script src="https://cdn.bootcss.com/echarts/3.8.4/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/3.7.2/extension/bmap.min.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main')); var data = [
{name: '海门', value: 99},
{name: '鄂尔多斯', value: 122},
{name: '招远', value: 162},
{name: '舟山', value: 112}, ]; var geoCoordMap = {
'海门':[121.15,31.89],
'鄂尔多斯':[109.781327,39.608266],
'招远':[120.38,37.35],
'舟山':[122.207216,29.985295], }; var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
}; option = {
backgroundColor: '#404a59',
title: {
text: '',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip : {
trigger: 'item'
},
bmap: {
center: [104.114129, 37.550339],
zoom: 5,
roam: true
}, series : [
{
name: 'Top 4',
type: 'effectScatter',
coordinateSystem: 'bmap',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 6)),
symbolSize: function (val) {
return val[2] / 2;
},
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#ff0000',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1 }
]
}; myChart.setOption(option); // 获取百度地图实例，使用百度地图自带的控件
var bmap = myChart.getModel().getComponent('bmap').getBMap();
bmap.addControl(new BMap.MapTypeControl()); //调用百度的方法，使用bmap对象
var point = new BMap.Point(116.404, 39.915);
bmap.centerAndZoom(point, 6); //创建小狐狸
var pt = new BMap.Point(116.417, 39.909);
var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157));
var marker2 = new BMap.Marker(pt,{icon:myIcon}); // 创建标注
bmap.addOverlay(marker2); // 将标注添加到地图中 //var geolocation = new BMap.Geolocation();//定位
//geolocation.getCurrentPosition(function(r){
// if(this.getStatus() == BMAP_STATUS_SUCCESS){
// var mk = new BMap.Marker(r.point);
// map.addOverlay(mk);
// map.panTo(r.point);
// InitMAP(r.point.lng,r.point.lat)
// alert('您的位置：'+r.point.lng+','+r.point.lat);
// }
// else {
// alert('failed'+this.getStatus());
// InitMAP(120.331398,30.897445)
// }
//}); </script>
</body>
</html>
geo地图 结合百度地图
echart 打开新世界的大门的更多相关文章
- Python打开新世界的大门-入门篇1
目录 题记 Python技巧.避坑及心得 八种数据类型 循环 函数 Homework 题外话 之前没有写博客的习惯,现在开始写觉得入门也太晚了吧,看看同龄的大哥都写了十几万字.于是 ...
- GoLang——Hello World，打开新世界的大门
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是Go语言系列的第一篇文章,我们来聊聊这门新的语言和它的基础语法. 浅谈Golang 作为程序员而言,往往对于学习新的语言都是有抗拒的. ...
- 在网址前加神秘字母，让你打开新世界(z)
在网址前加神秘字母,让你打开新世界 1.在百度云后面加“wp”可以高速下载百度云资源<ignore_js_op> 2.在任何网址前面加“wn.run”(一定要加到这个网址www的前面)之后 ...
- 打开新世界的第一步：学习servlet
什么是servlet? 是用Java编写的服务器端程序.其主要功能在于交互式地浏览和修改数据,生成动态Web内容. 创建servlet 一.创建一个web project 1)流程:eclipse-F ...
- 文科生打开python的大门
作为唯一的一名教育学院的学生,加入python课程,一定要声明我可不是并不是被迫选课的!虽然是文科生,但是是对编程这种东西很感兴趣的文科生.从站在python门口的张望,到现在悄悄把门打开,越来越感觉 ...
- AI生万物，新世界的大门已敞开
四月是万物复苏的时节,一年一度的GMIC全球移动互联网大会也在这个时间如期而至,在4月26日-28日的会议期间,有超过三百位行业专家进行了精彩的演讲,更有数万名现场观众感受到思维碰撞迸发出的火花. 作 ...
- 第一步，怎么打开react的大门？
前言 其实我的react的实战经验很少,大概是17年-18年写了一个react全家桶的后台管理系统.猜测这个项目应该还一直在使用 在我手里的vue项目就比较多了,技术栈一直是vue全家桶.最近也在深入 ...
- 菜鸟VUER学习记——零0章、打开新的大门
是什么 基于MVVM模型,核心库只关注视图层,通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件的js框架.根据项目的复杂度和需求,渐进的加入插件以达到恰到好处的程度. 解决问题 UI组件化 ...
- 打开CDQ的大门&BZOJ3262
题目传送门 第一次接触CDQ分治,感谢YZ大佬的教导. CDQ分治就是一种奇特的分治方法,它用左区间的区间信息来更新右区间. 设CDQ(L,R,l,r)表示递归到区间[L,R],区间的值为[l,r]. ...
随机推荐
- Java并发编程原理与实战十六：AQS
一.概述 谈到并发,不得不谈ReentrantLock:而谈到ReentrantLock,不得不谈AbstractQueuedSynchronized(AQS)! 类如其名,抽象的队列式的同步器,AQ ...
- idea 永久注册
1.在百度输入http://idea.lanyus.com/ 2.点击这个网址http://idea.lanyus.com/jar/JetbrainsCrack-3.1-release-enc.ja ...
- eclipse初始设置
1.界面显示设置 2.快捷创建的设置 window->Customize Perspective->Shortcuts 3.修改编码为utf-8 Preferences->Gener ...
- IOC轻量级框架之Unity
任何事物的出现,总有它独特的原因,Unity也是如此,在Unity产生之前,我们是这么做的 我们需要在一个类A中引用另一个类B的时候,总是将类B的实例放置到类A的构造函数中,以便在初始化类A的时候,得 ...
- 【转】 jquery easyui datagrid使用，分页、排序、查询
$('#dg').datagrid({ url: "xxx.ashx", pagination: true, p ...
- C# 定时执行方法： System.Timers.Timer用法示例
System.Timers.Timer t = new System.Timers.Timer(5000); //设置时间间隔为5秒 private void Form1_Load(ob ...
- GDB基本用法
基本命令 进入GDB:#gdb test test是要调试的程序,由gcc test.c -g -o test生成.进入后提示符变为(gdb) . 查看源码:(gdb) l 源码会进行行号提示. 如果 ...
- 【译】第五篇 Integration Services：增量加载-Deleting Rows
本篇文章是Integration Services系列的第五篇,详细内容请参考原文. 在上一篇你学习了如何将更新从源传送到目标.你同样学习了使用基于集合的更新优化这项功能.回顾增量加载记住,在SSIS ...
- J - Clairewd’s message HDU - 4300（扩展kmp）
题目链接:https://cn.vjudge.net/contest/276379#problem/J 感觉讲的很好的一篇博客:https://subetter.com/articles/extend ...
- UNIX环境高级编程 第10章 信号
SIGSTOP和SIGKILL区别是:前者是使进程暂时停止,即中止,也就是说使进程暂停,将进程挂起,比如你在终端里面执行一个脚本或者程序,执行到一半,你想暂停一下,你按下ctrl+z,就会导致终端发送 ...