<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#main{
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div id="main"></div>
</body>
<script src="js/jquery-1.9.1.min.js"></script>
<!--1.直接js引入的话，echarts必须用下面的-->
<script src="js/echarts-all.js"></script>
<script>
option = {
tooltip : {
trigger: 'item'
},
toolbox: {
show : true,
orient: 'vertical',
x:'right',
y:'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false}
}
},
series : [
{
tooltip: {
trigger: 'item',
formatter: '{b}'
},
name: '选择器',
type: 'map',
mapType: 'china',
mapLocation: {
x: 'left',
y: 'top',
width: '30%'
},
roam: true,
selectedMode : 'single',
itemStyle:{
//normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '北京', selected:false},
{name: '天津', selected:false},
{name: '上海', selected:false},
{name: '重庆', selected:false},
{name: '河北', selected:false},
{name: '河南', selected:false},
{name: '云南', selected:false},
{name: '辽宁', selected:false},
{name: '黑龙江', selected:false},
{name: '湖南', selected:false},
{name: '安徽', selected:false},
{name: '山东', selected:false},
{name: '新疆', selected:false},
{name: '江苏', selected:false},
{name: '浙江', selected:false},
{name: '江西', selected:false},
{name: '湖北', selected:false},
{name: '广西', selected:false},
{name: '甘肃', selected:false},
{name: '山西', selected:false},
{name: '内蒙古', selected:false},
{name: '陕西', selected:false},
{name: '吉林', selected:false},
{name: '福建', selected:false},
{name: '贵州', selected:false},
{name: '广东', selected:false},
{name: '青海', selected:false},
{name: '西藏', selected:false},
{name: '四川', selected:false},
{name: '宁夏', selected:false},
{name: '海南', selected:false},
{name: '台湾', selected:false},
{name: '香港', selected:false},
{name: '澳门', selected:false}
]
}
],
animation: false
};
var ecConfig = echarts.config; //2.这里不能用模块化写法
var myChart=echarts.init(document.getElementById('main'));
myChart.setOption(option, true); //3.必须要初始化一次
myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
var selected = param.selected;
var selectedProvince;
var name;
for (var i = 0, l = option.series[0].data.length; i < l; i++) {
name = option.series[0].data[i].name;
option.series[0].data[i].selected = selected[name];
if (selected[name]) {
selectedProvince = name;
}
}
if (typeof selectedProvince == 'undefined') {
option.series.splice(1);
option.legend = null;
option.dataRange = null;
myChart.setOption(option, true);
return;
}
option.series[1] = {
name: '随机数据',
type: 'map',
mapType: selectedProvince,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
mapLocation: {
x: '35%'
},
roam: true,
data:[
{name: '重庆市',value: Math.round(Math.random()*1000)},
{name: '北京市',value: Math.round(Math.random()*1000)},
{name: '天津市',value: Math.round(Math.random()*1000)},
{name: '上海市',value: Math.round(Math.random()*1000)},
{name: '香港',value: Math.round(Math.random()*1000)},
{name: '澳门',value: Math.round(Math.random()*1000)},
{name: '巴音郭楞蒙古自治州',value: Math.round(Math.random()*1000)},
{name: '和田地区',value: Math.round(Math.random()*1000)},
{name: '哈密地区',value: Math.round(Math.random()*1000)},
{name: '阿克苏地区',value: Math.round(Math.random()*1000)},
{name: '阿勒泰地区',value: Math.round(Math.random()*1000)},
{name: '喀什地区',value: Math.round(Math.random()*1000)},
{name: '塔城地区',value: Math.round(Math.random()*1000)},
{name: '昌吉回族自治州',value: Math.round(Math.random()*1000)},
{name: '克孜勒苏柯尔克孜自治州',value: Math.round(Math.random()*1000)},
{name: '吐鲁番地区',value: Math.round(Math.random()*1000)},
{name: '伊犁哈萨克自治州',value: Math.round(Math.random()*1000)},
{name: '博尔塔拉蒙古自治州',value: Math.round(Math.random()*1000)},
{name: '乌鲁木齐市',value: Math.round(Math.random()*1000)},
{name: '克拉玛依市',value: Math.round(Math.random()*1000)},
{name: '阿拉尔市',value: Math.round(Math.random()*1000)},
{name: '图木舒克市',value: Math.round(Math.random()*1000)},
{name: '五家渠市',value: Math.round(Math.random()*1000)},
{name: '石河子市',value: Math.round(Math.random()*1000)},
{name: '那曲地区',value: Math.round(Math.random()*1000)},
{name: '阿里地区',value: Math.round(Math.random()*1000)},
{name: '日喀则地区',value: Math.round(Math.random()*1000)},
{name: '林芝地区',value: Math.round(Math.random()*1000)},
{name: '昌都地区',value: Math.round(Math.random()*1000)},
{name: '山南地区',value: Math.round(Math.random()*1000)},
{name: '拉萨市',value: Math.round(Math.random()*1000)},
{name: '呼伦贝尔市',value: Math.round(Math.random()*1000)},
{name: '阿拉善盟',value: Math.round(Math.random()*1000)},
{name: '锡林郭勒盟',value: Math.round(Math.random()*1000)},
{name: '鄂尔多斯市',value: Math.round(Math.random()*1000)},
{name: '赤峰市',value: Math.round(Math.random()*1000)},
{name: '巴彦淖尔市',value: Math.round(Math.random()*1000)},
{name: '通辽市',value: Math.round(Math.random()*1000)},
{name: '乌兰察布市',value: Math.round(Math.random()*1000)},
{name: '兴安盟',value: Math.round(Math.random()*1000)},
{name: '包头市',value: Math.round(Math.random()*1000)},
{name: '呼和浩特市',value: Math.round(Math.random()*1000)},
{name: '乌海市',value: Math.round(Math.random()*1000)},
{name: '海西蒙古族藏族自治州',value: Math.round(Math.random()*1000)},
{name: '玉树藏族自治州',value: Math.round(Math.random()*1000)},
{name: '果洛藏族自治州',value: Math.round(Math.random()*1000)},
{name: '海南藏族自治州',value: Math.round(Math.random()*1000)},
{name: '海北藏族自治州',value: Math.round(Math.random()*1000)},
{name: '黄南藏族自治州',value: Math.round(Math.random()*1000)},
{name: '海东地区',value: Math.round(Math.random()*1000)},
{name
64套网页特效，表白，做特效，个人简历专属，JS特效合集，JavaScript网页特效案例教程PPT，几乎一毛/每个不到
版权申诉
5星 · 超过95%的资源 96 浏览量
2022-04-20
15:47:09
上传
评论 3
收藏 15.41MB ZIP 举报 
64套网页特效，表白，做特效，个人简历专属，JS特效合集，JavaScript网页特效案例教程PPT，几乎一毛/每个不到 （561个子文件） 
bootstrap.css 124KB animate.css 78KB animate.css 69KB animate.min.css 52KB bootstrap-responsive.css 22KB dateRange.css 12KB demo.css 10KB default.css 6KB style.css 4KB jquery.fullPage.css 3KB jquery.fullPage.css 3KB datepicker.css 3KB style.css 3KB jquery.cxcalendar.css 3KB mF_fancy.css 2KB index.css 2KB index.css 2KB demo.css 2KB mF_fscreen_tb.css 2KB mF_slide3D.css 2KB mF_pithy_tb.css 2KB normalize.css 2KB normalize.css 2KB mF_games_tb.css 2KB mF_kiki.css 2KB mF_tbhuabao.css 2KB mF_kdui.css 2KB mF_shutters.css 2KB mF_ladyQ.css 2KB mF_classicHB.css 2KB buyCart.css 2KB mF_classicHC.css 2KB portlets.css 1KB mF_rapoo.css 1KB hualang.css 1KB mF_YSlider.css 1KB mF_liquid.css 1KB mF_taobao2010.css 1KB mF_qiyi.css 1KB mF_sohusports.css 1KB mF_liuzg.css 1KB mF_expo2010.css 1KB mF_quwan.css 1KB mF_peijianmall.css 1KB mF_51xflash.css 1KB slider1.2.css 1KB mF_pconline.css 1KB mF_taobaomall.css 965B mF_dleung.css 957B styles.css 916B mF_luluJQ.css 874B jPages.css 564B jquery.circliful.css 333B Thumbs.db 39KB Thumbs.db 37KB Thumbs.db 13KB Thumbs.db 6KB Thumbs.db 5KB Thumbs.db 5KB knarfart-webfont.eot 4KB m0rse-webfont.eot 3KB codropsicons.eot 2KB
demo.gif 955KB loading.gif 7KB bg.gif 6KB loading.gif 4KB logo.gif 3KB btn.gif 2KB vs.gif 2KB play.gif 1KB btn-blue.gif 1KB btn-bg2.gif 666B btn-gray.gif 649B sh-btn.gif 346B turn.gif 316B ar-right.gif 202B ar-left.gif 193B tit-ar.gif 184B tit-ar.gif 184B caret_active.gif 113B green.gif 113B red.gif 111B btn-bg.gif 102B btn-red.gif 90B ar.gif 60B .gitignore 11B
map.html 30KB index.html 8KB index2.html 8KB index8.html 7KB 贪吃蛇.html 7KB index.html 7KB 字符串综合.html 7KB index.html 6KB fullPage.html 6KB 弹性运动.html 6KB 日历生成.html 6KB 仪表盘.html 5KB 韩雪冬轮播.html 5KB 模拟扔小球.html 5KB共 561 条
- 1
- 2
- 3
- 4
- 5
- 6
资源评论
Yandanzhang02022-09-17发现一个超赞的资源，赶紧学习起来，大家一起进步，支持！
云云，兰斯，艾伦，三笠。2023-01-05资源很实用，对我启发很大，有很好的参考价值，内容详细。
zxh05112023-05-14资源太好了，解决了我当下遇到的难题，抱紧大佬的大腿~
搬砖的小编
- 粉丝: 90
- 资源: 14
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减3.57元 开通VIP
