<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<title>ECharts扩展示例</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/app.css" />
</head>
<body class="bg06">
<header class="header">
<h3>ECharts扩展示例</h3>
</header>
<div class="wrapper">
<div class="container-fluid">
<div class="row fill-h">
<div class="col-lg-3 fill-h">
<div class="xpanel-wrapper xpanel-wrapper-1-2">
<div class="xpanel">
<div class="fill-h" id="wordChart"></div>
</div>
</div>
<div class="xpanel-wrapper xpanel-wrapper-1-2">
<div class="xpanel">
<div class="fill-h" id="ballChart"></div>
</div>
</div>
</div>
<div class="col-lg-6 fill-h">
<div class="xpanel-wrapper xpanel-wrapper-1">
<div class="xpanel no-padding no-bg">
<div class="fill-h" id="fireworksChart"></div>
</div>
</div>
</div>
<div class="col-lg-3 fill-h">
<div class="xpanel-wrapper xpanel-wrapper-2-3">
<div class="xpanel">
<div class="fill-h" id="relationChart"></div>
</div>
</div>
<div class="xpanel-wrapper xpanel-wrapper-1-3">
<div class="xpanel">
<div class="fill-h" id="mapChart"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/echarts-3.8.5.min.js"></script>
<script type="text/javascript" src="js/echarts-wordcloud.min.js"></script>
<script type="text/javascript" src="js/echarts-liquidfill.min.js"></script>
<script type="text/javascript" src="js/echarts-map-china.js"></script>
<script type="text/javascript">
$(function() {
/*************** 中国地图 **************/
//初始化echarts实例
const mapChart = echarts.init(document.getElementById("mapChart"));
(function() {
let data = [
{"name": "辽宁", "value": 77},
{"name": "吉林", "value": 42},
{"name": "黑龙江", "value": 72},
{"name": "四川", "value": 81},
{"name": "湖北", "value": 47},
{"name": "福建", "value": 67},
{"name": "深圳", "value": 82},
{"name": "广东", "value": 66},
{"name": "重庆", "value": 24},
{"name": "湖南", "value": 92},
{"name": "上海", "value": 95},
{"name": "江苏", "value": 91},
{"name": "浙江", "value": 94},
{"name": "安徽", "value": 64},
{"name": "北京", "value": 91},
{"name": "天津", "value": 65},
{"name": "山东", "value": 98},
{"name": "山西", "value": 83},
{"name": "河南", "value": 100},
{"name": "河北", "value": 70},
{"name": "内蒙古", "value": 11},
{"name": "江西", "value": 23},
{"name": "贵州", "value": 45},
{"name": "云南", "value": 36},
{"name": "西藏", "value": 9},
{"name": "陕西", "value": 21},
{"name": "甘肃", "value": 54},
{"name": "青海", "value": 48},
{"name": "宁夏", "value": 36},
{"name": "新疆", "value": 24},
{"name": "广西", "value": 68},
{"name": "海南", "value": 99},
{"name": "台湾", "value": 88}
];
let opt = {
visualMap: {
show: false,
orient: 'horizontal',
left: 'left',
top: 'top',
itemWidth: 5,
calculable: true,
seriesIndex: [0],
inRange: {
color: ['#aed8fe', '#57a1fc', '#3a73b8', '#2B32B2']
}
},
geo: {
map: 'china',
roam: false, //开启鼠标缩放和漫游
zoom: 1, //地图缩放级别
selectedMode: false, //选中模式：single | multiple
left: 0,
right: 0,
top: 0,
bottom: 0,
layoutCenter: ['50%', '50%'], //设置后left/right/top/bottom等属性无效
//layoutSize: '100%', //保持地图宽高比
label: {
emphasis: {
show: true,
textStyle: {
fontSize: 10,
color: '#fff'
}
}
}
},
series: [{
type: 'map',
geoIndex: 0,
data: data
}]
};
mapChart.setOption(opt);
})();
/*************** 烟花秀 **************/
//初始化echarts实例
const fireworksChart = echarts.init(document.getElementById("fireworksChart"));
(function() {
let r = function(max) {
let m = max || 10;
return Math.floor(Math.random() * m);
};
let moonAndStars = {
type: 'graph',
data: (function() {
let moonPosition = {
x: 190,
y: 0.5
}
let moon = [{
symbolSize: 70,
x: moonPosition.x,
y: moonPosition.y
}, {
symbolSize: 60,
x: moonPosition.x - 1.5,
y: moonPosition.y - 1.5,
itemStyle: {
normal: {
color: 'rgb(51, 51, 51)'
}
}
}, {
symbolSize: 0,
x: 0,
y: 0
}, {
symbolSize: 0,
x: 200,
y: 100
}];
let num = 100;
let stars = [];
for (let i = 0; i < num; i++) {
stars.push({
symbolSize: r(3),
x: r(200),
y: r(50)
})
}
return moon.concat(stars);
})(),
itemStyle: {
normal: {
color: '#ccc'
}
},
silent: true,
z: -1
};
let roofs = [
/*三角形*/
[1, 2, 3, 4, 5, 4, 3, 2, 1],
/*凸*/
[2, 2, 2, 4, 4, 4, 2, 2, 2],
[2, 2, 2, 4, 20, 4, 2, 2, 2],
[10, 9, 8, 7, 6, 5, 4, 3, 2, 1],
[6, 6, 6, 6, 6, 5, 4, 3, 2, 1],
[0.3, 1, 1.6, 2.5, 3, 3.5, 3.6, 3.7, 3.7, 3.6, 3.5, 3, 2.5, 1.6, 1, 0.3],
[6, 6, 6, 6, 6, 2, 2, 2],
[6, 5.5, 5, 4.5, 4, 3.5, 3, 2.5, 2, 1.5],
[1, 1, 1, 1, 1, 1.5, 2, 2.5, 3, 3.5, 4],
[1, 1, 1, 1, 1, 1, 1],
[4, 4, 4, 2, 2, 2, 4, 4, 4]
];
let build = function(height) {
let arr = [100];
let l = 14;
let h = height || 50;
let addFloor = function(arr, l) {
let a = [];
for (let i = 0; i < arr.length; i++) {
a.push(arr[i] + l);
}
大屏数据可视化案例 - 源码 （113个子文件） 
bootstrap.min.css 118KB bootstrap.min.css 118KB bootstrap.min.css 118KB bootstrap.min.css 118KB app.css 4KB app.css 2KB app.css 2KB app.css 2KB app.css 2KB app.css 2KB app.css 2KB pace.css 369B
loading.gif 108KB loading.gif 108KB loading.gif 108KB pisa.hdr 356KB
index.html 47KB index.html 33KB index.html 16KB index.html 12KB index.html 9KB index.html 9KB index.html 7KB index.html 3KB index.html 2KB
globe.jpg 1.03MB bg09.jpg 901KB thumb.jpg 149KB thumb.jpg 144KB thumb.jpg 96KB thumb.jpg 94KB thumb.jpg 93KB thumb.jpg 83KB thumb.jpg 82KB thumb.jpg 77KB echarts.js 2.64MB echarts.min.js 727KB echarts.min.js 727KB echarts.min.js 727KB echarts.min.js 727KB echarts-gl.min.js 657KB echarts-3.8.5.min.js 632KB echarts-3.8.5.min.js 632KB echarts-3.8.5.min.js 632KB echarts-map-world.js 144KB echarts-wordcloud.min.js 125KB echarts-liquidfill.min.js 119KB jquery-3.3.1.min.js 85KB jquery-3.3.1.min.js 85KB jquery-3.3.1.min.js 85KB jquery-3.3.1.min.js 85KB jquery-3.3.1.min.js 85KB jquery-3.3.1.min.js 85KB jquery-3.3.1.min.js 85KB jquery-3.3.1.min.js 85KB echarts-map-china.js 59KB echarts-map-china.js 59KB echarts-map-china.js 59KB jiangsu.js 23KB jiang1_su1_su1_zhou1.js 18KB echarts-bmap.js 13KB echarts-bmap.js 13KB pace.min.js 12KB echarts-theme-shine.js 4KB echarts-theme-shine.js 4KB echarts-theme-shine.js 4KB countUp.min.js 4KB jiang1su1_su1zhou1_kun1shan1shi4.js 3KB listed-company.json 890KB heatmap.json 535KB bmap.json 198KB industry.json 6KB csrc-industry.json 3KB month-count.json 2KB region-count.json 2KB coord.json 1KB ranking-list.json 1KB count-data.json 189B
bg.png 1.32MB bg05.png 866KB bg07.png 790KB bg02.png 565KB bg02.png 565KB bg01.png 460KB bg03.png 331KB bg04.png 285KB bg08.png 283KB bg06.png 274KB bg06.png 274KB bg.png 208KB bg.png 208KB header.png 97KB header.png 53KB header.png 45KB header.png 45KB panel.png 23KB header.png 11KB panel.png 6KB footer.png 6KB panel.png 5KB共 113 条
- 1
- 2
资源评论
轨迹啊2021-04-08几千年前的垃圾了，讲真的这破网站也不审核吗
下雪的熊2021-03-06效果很好，可以直接运行
般若Neo
- 粉丝: 1290
最新资源
- C语言实训总结报告.docx
- 第五章光纤通信系统演示文稿(1).ppt
- 互联网+背景下的高职院校大学生思政课实践教学分析(1).docx
- 电子商务平台建设规划书(1).pptx
- 2023年公安信息化行业市场需求分析报告及未来五至十年行业预测报告(1).docx
- 面向对象程序设计语言C++第07章-虚函数和多态性市公开课一等奖省赛课获奖(1).pptx
- 基于供应链管理模式的采购管理信息化建设分析(1).docx
- 软件项目委托开发合同(1).docx
- 企业翻译项目软件管理平台(1).docx
- 本科毕设论文-—中学教务管理软件(1).doc
- 对当前中职计算机专业一体化教学的思考(1).docx
- 浅析基于STC12C5A60S2-单片机的电量监测技术研究论文(1).doc
- 电子商务营销更需要整合理念(1).docx
- 基因工程的基本操作程序教案(1).doc
- 用友互联网战略与成果(1).pptx
- 人工智能技术研发合作合同(范本)(1).docx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
