<!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);
}
return a;
};
for (let i = 0; i < l; i++) {
let newRoof = addFloor(roofs[r(11)], r(h));
if (Math.random() < .5) {
newRoof.
基于JavaScript的ECharts扩展示例（词云，水球图，烟花秀，关系图谱）.rar （14个子文件） 
基于JavaScript的ECharts扩展示例（词云，水球图，烟花秀，关系图谱） css 
app.css 2KB bootstrap.min.css 118KB img 
panel.png 5KB header-right.png 2KB
thumb.jpg 77KB bg06.png 274KB header-left.png 2KB
loading.gif 108KB
index.html 46KB js echarts-3.8.5.min.js 632KB jquery-3.3.1.min.js 85KB echarts-wordcloud.min.js 125KB echarts-liquidfill.min.js 119KB echarts-map-china.js 59KB资源评论
爱吃苹果的Jemmy
- 粉丝: 85
- 资源: 1134
最新资源
- Delphi 12 控件之FlashAV FFMPEG VCL Player For Delphi v7.0 for D10-D11 Full Source.7z
- Delphi 12 控件之DevExpressVCLProducts-24.2.3.exe.zip
- Mysql配置文件优化内容 my.cnf
- 中国地级市CO2排放数据（2000-2023年）.zip
- smart200光栅报警程序
- 企业信息部门2024年终工作总结与2025规划方案
- 串口AT命令发送工具，集成5G模组常用At命令
- 通过python实现归并排序示例代码.zip
- 复旦大学张奇：2023年大规模语言模型中的多语言对齐与知识分区研究
- 通过python实现一个堆排序示例代码.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
