<!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效果很好，可以直接运行
