上回指路：利用echarts模仿WHO做疫情展示图
接上回项目页面需求更改，需要默认展示更多信息内容，于是提出两种展示方式，第一：在x轴展示区域内加一个类似表格方式展示疫情标题信息；第二：将该展示内容放在对应的y轴区域展示，即一个在X坐标轴以下，一个在X轴以上。利用官网案例演示的大概效果如下所示：
在Y轴对应区域展示（不同于在tooltip，是可以同时存在的另外一种展示形式）
我的实现大致如下：
一、echarts的富文本标签实现
参考链接echarts的富文本标签实现原理大致实现上述效果
多行内容换行展示：换行展示内容
展示框主要利用formatter:function(param)和rich定义各个标签样式结合而成，因为不能自定义html所以只能利用这种方式展示了
我的代码相关片段：
itemStyle:{
normal:{
// extraCssText: 'z-index: 99',
// color:'rgb(0,128,70)',
label:{
show:true,
position:'insideBottom',
distance: 120,
// 默认展示最新一天的详情
formatter:function(param){
if(param.dataIndex==index){
console.log("tips",tips)
var main = '{title|'+ tips.newTitle[0] +'}'+'{abg|}'+'\n'+
'{time|'+ tips.datas +'}'+'\n'
var mainShow = tips.main[0];
// 数据问题--内容为空时直接返回
if (mainShow == undefined) {
return main;
}
var i = 0;
while (mainShow.length > 0 && i <= 5){
if (mainShow.length < 15) {
main += '{main|'+ mainShow +'}'+'\n'
break;
} else if (i >= 5 && mainShow.length >= 15) {
main += '{main|'+ mainShow.substring(0, 10) +'...'+'}'+'\n'
} else {
main += '{main|'+ mainShow.substring(0, 15) +'}'+'\n'
mainShow = mainShow.substring(15)
}
i++;
}
return main;
// return '{title|风险区域降级}{abg|}'+'\n'+
// '{measuresIcon|}{time|21/Feb/20}'+'\n'+
// '{main| 新高苑一期小区明天零时起调为低}'+'\n'+
// '{main|风险本市全部为低风险地区！新高苑}'+'\n'+
// '{main|一期小区明天零时起调为低风险，本市}'+'\n'+
// '{main|全部为低风险地区！新高苑一期小区明}'+'\n'+
// '{main|天零时起调为低风险，本市全部为}'+'\n'+
// '{main|低风险地区！...}';
// '{detail|查阅详情}';
// ' {weatherHead|措施/疫情}{valueHead|标题}'+'\n'+
// '{hr|}'+'\n'+
// ' {measuresIcon|}{value|风险降级地区}'+'\n'+
// ' {policyIcon|}{value|142}';
} else {
return '';
}
},
name: 'my_el',
backgroundColor: '#eee',
borderColor: '#777',
borderWidth: 1,
borderRadius: 4,
rich: {
title: {
// color: '#eee',
fontSize: 14,
color: '#333',
align: 'center'
},
br: {
borderColor: 'red',
width: 1,
borderWidth: 1,
height: 80,
},
abg: {
// backgroundColor: '#333',
backgroundColor: 'cornflowerblue',
width: '100%',
align: 'right',
height: 35,
borderRadius: [4, 4, 0, 0]
},
time: {
fontSize: 16,
color:'#333',
padding:[5,5,5,10],
align: 'left'
},
main:{
fontSize: 14,
color:'#eee',
padding:[2,3,2,3],
align: 'left'
},
detail:{
fontSize: 16,
color:'cornflowerblue',
padding:[5,15,5,5],
align: 'right'
},
weatherHead: {
color: '#eee',
height: 24,
align: 'left'
},
hr: {
borderColor: '#777',
width: '100%',
borderWidth: 0.5,
height: 0,
align: 'left',
},
value: {
color: '#eee',
width: 20,
padding: [0, 20, 0, 30],
align: 'left'
},
valueHead: {
color: '#eee',
width:20,
padding: [0, 20, 0, 30],
align: 'center'
},
rate: {
color: '#eee',
width: 40,
align: 'right',
padding: [0, 10, 0, 0]
},
rateHead: {
color: '#eee',
width: 40,
align: 'center',
padding: [0, 10, 0, 0]
},
// 配置底部x轴内容
measuresIcon: {
height: 15,
align: 'left',
backgroundColor: {
image: measuresIcon // 措施标识
},
},
policyIcon: {
height: 15,
align: 'left',
backgroundColor: {
image: policyIcon // 疫情标识
}
},
},
textStyle:{fontSize:18}
}
}
}二、解决js `setOption` should not be called during main process问题
因为我需要点击x轴后触发更换显示框内容，且显示内容必须跟随坐标轴位置移动，所以会有频繁调用后端查询接口请求，这时候就出现上述问题，解决方式如下：
用ajax请求的到json数据后去更新series中的数据,把实例和Option更改部分都放在ajax函数里就不报错了。
参考解决上述问题链接：
其他可能对你有用方式：
三、echarts点击数据添加跳转链接
参考链接：echarts点击数据添加调整链接
四、点击x轴切换显示框内容
参考博文echarts中事件列表
我的代码相关：
myChart.setOption(option, true);
myChart.on('click',{element: 'my_el'}, function (params) {
console.log("点击参数",params)
if(params.componentType == "series" && params.dataIndex == day){
// 弹框展示-- 后台请求获取当天所有数据
getMain(time);
}
});
// 弹框--请求某天措施疾病内容
function getMain(day) {
$.ajax({
type: 'GET',
url: 'api/policy/',
data: {
time_format: day.split("\-")[0]
},
success: function (rm) {
modalClose();
var datas = rm.result;
// 有措施或政策点击显示轮播图
if (datas.length != 0) {
for (var i = 0; i < datas.length; i++) {
if (datas[i].type == 1) {
tips.title.push("疫情");
} else {
tips.title.push("措施");
}
tips.main.push(datas[i].content);
tips.newTitle.push(datas[i].title);
tips.city.push(datas[i].city);
window.start = {
format: 'YYYY/MM/DD',
insTrigger: true,
maxDate: moment(datas[i].time).format('YYYY/MM/DD')
};
tips.datas = start.maxDate;
}
modalOpen(tips);
}
}
});
}五、其他七七八八的小问题
柱状图遮盖住我的提示框：增加：z:10000, // label展示内容在柱状图上层显示
完整代码段如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script src="js/jquery.min.js"></script>-->
<!--<script src="js/echarts/echarts.js"></script>-->
<link rel="stylesheet" href="css/lib/policy_visual.css"/>
</head>
<body>
<div id="main">
<div id="legend">
<ul>
<li>
<div class="legend-box">
<img src="images/illness.png">
</div>
<span>疫情</span>
</li>
<li>
<div class="legend-box">
<img src="images/measures.png">
</div>
<span>措施</span>
</li>
</ul>
</div>
<div id="policy" class="col-md-6 wow bounceIn" data-wow-delay="0.5s"
style="height:90vh;width: 100vw;left: -6vw">
</div>
<!-- 模态框-->
<div>
<!--添加模态框-->
<div class="modal-box">
<!--顶部-->
<div class="modal-box-top">
<div class="modal-box-title">
<span id="title"></span>
</div>
<!--关闭按钮 ×会被转义成乘号（×）看上去就是关闭符号-->
<!--关闭逻辑-->
<button onclick="modalClose()" class="modal-close" style="border: 0px white ">X
</button>
<!-- <button onclick="modalClose()" class="modal-close">×-->
<!-- </button>-->
</div>
<!--主体-->
<div class="modal-box-content">
<div class="banner" >
<div class="img-wrap">
<ul id="J_List">
</ul>
</div>
<div class="lr-tab">
<img src="images/left.png" class="zuo-btn">
<img src="images/right.png" class="you-btn">
</div>
</div>
</div>
<!--底部-->
<!-- <div class="modal-box-bottom">-->
<!-- <div class="col-xs-6">-->
<!-- <button class="btn btn-primary" id="addConfirm" onclick="modalClose()">确定</button>-->
<!-- </div>-->
<!-- <div class="col-xs-3">-->
<!-- <button class="btn btn-primary" data-dismiss="modal"-->
<!-- aria-hidden="true" onclick="modalClose()">取消</button>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
</div>
</body>
<script>
var measuresIcon = 'images/measures.png';
var policyIcon = 'images/illness.png';
var tips = {
date: "",
newTitle: [],
title: [],
main: [],
city: [],
};
var time = ""; // 初始展示框时间
var index = 0; // 初始展示下标
var day = ""; // 更改下标时间
function getjiangsudata() {
$.ajax({
type: 'GET',
url: 'api/policy/with/visual',
success: function (rm) {
if (rm.code == 1) {
console.log("rm",rm);
data = rm.result;
var dom = document.getElementById("policy");
var myChart = echarts.init(dom);
time = changeAxisLabel(data.timeWithTag);
// 必须嵌套查询某天详情
$.ajax({
type: 'GET',
url: 'api/policy/',
data: {
time_format: time.split("\-")[0]
},
success: function (rm) {
// console.log("rm",rm);
modalClose();
var datas = rm.result;
if (datas.length != 0) {
for (var i = 0; i < datas.length; i++) {
if (datas[i].type == 1) {
tips.title.push("疫情");
} else {
tips.title.push("措施");
}
tips.main.push(datas[i].content);
tips.newTitle.push(datas[i].title);
tips.city.push(datas[i].city);
window.start = {
format: 'YYYY/MM/DD',
insTrigger: true,
maxDate: moment(datas[i].time).format('YYYY/MM/DD')
};
tips.datas = start.maxDate;
}
// console.log("tips1111",tips)
option = {
color: ['#2F83E4', '#23CBFF', '#00E5C1', '#7DE0E6'],
legend: {
data: ['上海', '江苏', '浙江', '安徽'],
left: '40%'
},
tooltip: {
// triggerOn: 'none', // 关闭默认的mouseover调用
// trigger: 'axis',
// enterable: true, // 防止tooltip浮层在折线或柱体等上时，触发mouseover事件
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
// formatter: '一班<br />故障：10H 20%<br />运行：20H 20%<br />暂停：30H 20%<br />离线：25H 20%'
formatter: function (params, ticket, callback) {
// return formatterTipLine(params);
// console.log("开始触发")
var htmlStr = '';
for(var i=0;i<params.length;i++){
var param = params[i];
var xName = param.name;//x轴的名称
var seriesName = param.seriesName;//图例名称
var value = param.value;//y轴值
var color = param.color;//图例颜色
if(i===0){
// 截取时间返回
var index=xName.split("\-");
xName=index[0];
htmlStr += xName + '<br/>';//x轴的名称
}
htmlStr +='<div>';
//为了保证和原来的效果一样，这里自己实现了一个点的效果
htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
// 文本颜色设置--2020-07-23(需要设置,请解注释下面一行)
//htmlStr += '<span style="color:'+color+'">';
//圆点后面显示的文本
htmlStr += seriesName + '：' + value + '人';
// 文本颜色设置--2020-07-23(需要设置,请解注释下面一行)
//htmlStr += '</span>';
htmlStr += '</div>';
}
return htmlStr;
}
},
dataZoom: [
{
show: true,
zoomOnMouseWheel: false,
textStyle: false,
moveOnMouseMove: false,
moveOnMouseWheel:false,
bottom: 5,
height:55,
minSpan:8,
maxValueSpan: 18,
minValueSpan: 2,
type: 'slider',
startValue: data.timeWithTag.length - 18,
endValue: data.timeWithTag.length - 1 ,
zoomLock:true, // 固定两边不允许拖动扩张
},
{
type: 'inside',
zoomOnMouseWheel: false,
moveOnMouseMove: false,
moveOnMouseWheel:false,
},
],
grid:{
y2:140
// y2:210
},
xAxis: {
type: 'category',
triggerEvent: true,
data : data.timeWithTag,
// data: ['1Jan20-p-a','2Jan20','3Jan20-p','4Jan20','5Jan20-p-a','6Jan20','7Jan20','8Jan20-a','9Jan20','10Jan20-a','11Jan20','12Jan20-p-a','13Jan20','14Jan20','15Jan20-p',
// '16Jan20','17Jan20-a','18Jan20','18Jan20-p-a','19Jan20','20Jan20','21Jan20-p','22Jan20','23Jan20-a','24Jan20','25Jan20-p-a','26Jan20','1Jan20-p-a','2Jan20','3Jan20-p','4Jan20','5Jan20-p-a','6Jan20','7Jan20','8Jan20-a','9Jan20','10Jan20-a','11Jan20','12Jan20-p-a','13Jan20','14Jan20','15Jan20-p',
// '16Jan20','17Jan20-a','18Jan20','18Jan20-p-a','19Jan20','20Jan20','21Jan20-p','22Jan20','23Jan20-a','24Jan20','25Jan20-p-a','26Jan20'],
axisLabel:{
formatter: function (value) {
// 只展示日期和图标
if (value.indexOf("-p") != -1 && value.indexOf("-d") != -1) {
var index=value.split("\-");
return index[0] +'\n'+
' {measuresIcon|}'+'\n'+
' {policyIcon|}';
}
else if (value.indexOf("-p") != -1) {
return value.substring(0,value.indexOf("-p")) +'\n'+
' {measuresIcon|}';
} else if (value.indexOf("-d") != -1) {
//疫情
return value.substring(0,value.indexOf("-d")) +'\n'+
' {policyIcon|}';
} else {
return value;
}
// if (value == time) {
// // 展示标题内容
// if (value.indexOf("-p") != -1 && value.indexOf("-d") != -1) {
// var index=value.split("\-");
// return index[0] +'\n'+
// '{br|}'+'\n'+
// '{title|疫情内容}{abg|}'+'\n'+
// ' {weatherHead|措施/疫情}{valueHead|标题}'+'\n'+
// '{hr|}'+'\n'+
// ' {measuresIcon|}{value|风险降级地区}'+'\n'+
// ' {policyIcon|}{value|142}';
// }
// else if (value.indexOf("-p") != -1) {
// return value.substring(0,value.indexOf("-p")) +'\n'+
// '{br|}'+'\n'+
// '{title|疫情内容}{abg|}'+'\n'+
// ' {weatherHead|措施/疫情}{valueHead|标题}'+'\n'+
// '{hr|}'+'\n'+
// ' {measuresIcon|}{value|风险降级地区}';
// } else if (value.indexOf("-d") != -1) {
// //疫情
// return value.substring(0,value.indexOf("-d")) +'\n'+
// '{br|}'+'\n'+
// '{title|疫情内容}{abg|}'+'\n'+
// ' {weatherHead|措施/疫情}{valueHead|标题}'+'\n'+
// '{hr|}'+'\n'+
// ' {policyIcon|}{value|风险降级地区}';
// }
//
// } else {
// // 只展示日期和图标
// if (value.indexOf("-p") != -1 && value.indexOf("-d") != -1) {
// var index=value.split("\-");
// return index[0] +'\n'+
// ' {measuresIcon|}'+'\n'+
// ' {policyIcon|}';
// }
// else if (value.indexOf("-p") != -1) {
// return value.substring(0,value.indexOf("-p")) +'\n'+
// ' {measuresIcon|}';
// } else if (value.indexOf("-d") != -1) {
// //疫情
// return value.substring(0,value.indexOf("-d")) +'\n'+
// ' {policyIcon|}';
// } else {
// return value;
// }
// }
},
// margin: 10,
padding:5,
// rich 这里的用法特殊说明一下 rich 富文本样式 其中upIcon ， downIcon，zeroIcon 对应的是formatter中的变量 formatter 中使用特殊标签{upicon|} 定义变量 而在rich 中使用键值对 设置改变量对应的样式 上面通过自己的设置 stallsObj[value].icon 得到 upIcon 或者 downIcon 或者 zeroIcon
rich: {
// title: {
// color: '#eee',
// align: 'center'
// },
// abg: {
// backgroundColor: '#333',
// width: '100%',
// align: 'right',
// height: 25,
// borderRadius: [4, 4, 0, 0]
// },
// weatherHead: {
// color: '#333',
// height: 24,
// align: 'left'
// },
// br: {
// // borderColor: 'red',
// width: 1,
// borderWidth: 1,
// height: 20,
//
// },
// hr: {
// borderColor: '#777',
// width: '100%',
// borderWidth: 0.5,
// height: 0,
// align: 'left'
// },
// value: {
// width: 20,
// padding: [0, 20, 0, 45],
// align: 'center'
// },
// valueHead: {
// color: '#333',
// width: 20,
// padding: [0, 20, 0, 40],
// align: 'center'
// },
// rate: {
// width: 40,
// align: 'right',
// padding: [0, 10, 0, 0]
// },
// rateHead: {
// color: '#333',
// width: 40,
// align: 'center',
// padding: [0, 10, 0, 0]
// },
// 配置底部x轴内容
measuresIcon: {
height: 15,
align: 'left',
backgroundColor: {
image: measuresIcon // 措施标识
},
},
policyIcon: {
height: 15,
align: 'left',
backgroundColor: {
image: policyIcon // 疫情标识
}
},
},
// x轴字体颜色
textStyle: {
color: '#696B6E',
lineHeight: 20,
fontSize: 12,
interval:0
},
interval:0,
// rotate:40
},
axisTick: false, // 坐标轴刻度隐藏
// x轴颜色
axisLine: {
lineStyle: {
color: '#CED1D6'
}
}
},
yAxis: {
type: 'value'
},
series: [
{
name: '上海',
stack: '确诊数量',
data: data.shanghai,
// data: [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150,
// 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120,
// 200, 150, 80, 70, 110, 130,120, 200, 150,
// 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: 30, // 柱图宽度
barMaxWidth: 30, // 最大宽度
z:10000, // label展示内容在柱状图上层显示
itemStyle:{
normal:{
// extraCssText: 'z-index: 99',
// color:'rgb(0,128,70)',
label:{
show:true,
position:'insideBottom',
distance: 120,
// 默认展示最新一天的详情
formatter:function(param){
if(param.dataIndex==index){
console.log("tips",tips)
var main = '{title|'+ tips.newTitle[0] +'}'+'{abg|}'+'\n'+
'{time|'+ tips.datas +'}'+'\n'
var mainShow = tips.main[0];
// 数据问题--内容为空时直接返回
if (mainShow == undefined) {
return main;
}
var i = 0;
while (mainShow.length > 0 && i <= 5){
if (mainShow.length < 15) {
main += '{main|'+ mainShow +'}'+'\n'
break;
} else if (i >= 5 && mainShow.length >= 15) {
main += '{main|'+ mainShow.substring(0, 10) +'...'+'}'+'\n'
} else {
main += '{main|'+ mainShow.substring(0, 15) +'}'+'\n'
mainShow = mainShow.substring(15)
}
i++;
}
return main;
// return '{title|风险区域降级}{abg|}'+'\n'+
// '{measuresIcon|}{time|21/Feb/20}'+'\n'+
// '{main| 新高苑一期小区明天零时起调为低}'+'\n'+
// '{main|风险本市全部为低风险地区！新高苑}'+'\n'+
// '{main|一期小区明天零时起调为低风险，本市}'+'\n'+
// '{main|全部为低风险地区！新高苑一期小区明}'+'\n'+
// '{main|天零时起调为低风险，本市全部为}'+'\n'+
// '{main|低风险地区！...}';
// '{detail|查阅详情}';
// ' {weatherHead|措施/疫情}{valueHead|标题}'+'\n'+
// '{hr|}'+'\n'+
// ' {measuresIcon|}{value|风险降级地区}'+'\n'+
// ' {policyIcon|}{value|142}';
} else {
return '';
}
},
name: 'my_el',
backgroundColor: '#eee',
borderColor: '#777',
borderWidth: 1,
borderRadius: 4,
rich: {
title: {
// color: '#eee',
fontSize: 14,
color: '#333',
align: 'center'
},
br: {
borderColor: 'red',
width: 1,
borderWidth: 1,
height: 80,
},
abg: {
// backgroundColor: '#333',
backgroundColor: 'cornflowerblue',
width: '100%',
align: 'right',
height: 35,
borderRadius: [4, 4, 0, 0]
},
time: {
fontSize: 16,
color:'#333',
padding:[5,5,5,10],
align: 'left'
},
main:{
fontSize: 14,
color:'#eee',
padding:[2,3,2,3],
align: 'left'
},
detail:{
fontSize: 16,
color:'cornflowerblue',
padding:[5,15,5,5],
align: 'right'
},
weatherHead: {
color: '#eee',
height: 24,
align: 'left'
},
hr: {
borderColor: '#777',
width: '100%',
borderWidth: 0.5,
height: 0,
align: 'left',
},
value: {
color: '#eee',
width: 20,
padding: [0, 20, 0, 30],
align: 'left'
},
valueHead: {
color: '#eee',
width:20,
padding: [0, 20, 0, 30],
align: 'center'
},
rate: {
color: '#eee',
width: 40,
align: 'right',
padding: [0, 10, 0, 0]
},
rateHead: {
color: '#eee',
width: 40,
align: 'center',
padding: [0, 10, 0, 0]
},
// 配置底部x轴内容
measuresIcon: {
height: 15,
align: 'left',
backgroundColor: {
image: measuresIcon // 措施标识
},
},
policyIcon: {
height: 15,
align: 'left',
backgroundColor: {
image: policyIcon // 疫情标识
}
},
},
textStyle:{fontSize:18}
}
}
}
}, {
name: '江苏',
stack: '确诊数量',
data: data.jiangsu,
// data: [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150,
// 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120,
// 200, 150, 80, 70, 110, 130,120, 200, 150,
// 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: 30, // 柱图宽度
barMaxWidth: 30, // 最大宽度
},{
name: '浙江',
stack: '确诊数量',
data: data.zhejiang,
// data: xChange(data.zhejiang,395),
// data: [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150,
// 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120,
// 200, 150, 80, 70, 110, 130,120, 200, 150,
// 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: 30, // 柱图宽度
barMaxWidth: 30, // 最大宽度
},{
name: '安徽',
stack: '确诊数量',
data: data.anhui,
// data: [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150,
// 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120,
// 200, 150, 80, 70, 110, 130,120, 200, 150,
// 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: 30, // 柱图宽度
barMaxWidth: 30, // 最大宽度
}
]
}
if (option && typeof option === "object") {
myChart.setOption(option, true);
myChart.on('click',{element: 'my_el'}, function (params) {
console.log("点击参数",params)
// console.log("点击参数params.dataIndex",params.dataIndex)
// console.log("点击参数day",day)
// console.log("time点击参数",time.split("\-")[0])
// console.log("点击参数",params.value.split("\-")[0])
if(params.componentType == "series" && params.dataIndex == day){
// 弹框展示-- 后台请求获取当天所有数据
getMain(time);
}
});
// 鼠标点击x轴触发--防止抖动
myChart.on('click', function (params,index) {
// console.log("点击参数mousemove",params)
// console.log("点击参数index",index)
if(params.componentType =='xAxis') {
if (params.value != params.value.split("\-")[0]) {
// myChart.clear();
// console.log("之前的时间time",time)
time = params.value;
// console.log("放上去时time",time)
// myChart.setOption(option, true);
// console.log("点击参数data.timeWithTag",data.timeWithTag)
day = selectDay(data.timeWithTag,params.value);
// console.log("更改坐标后day",day);
// console.log("更改坐标后params.value",params.value);
$.ajax({
type: 'GET',
url: 'api/policy/',
data: {
time_format: time.split("\-")[0]
},
success: function (rm) {
// console.log("rm",rm);
modalClose();
var datas = rm.result;
// console.log("dataddd",datas);
// 有措施或政策点击显示轮播图
if (datas.length != 0) {
// 更新点击x轴后更新当天详情
myChart.setOption({
series: [
{
name: '上海',
stack: '确诊数量',
data: data.shanghai,
// data: [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150,
// 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120,
// 200, 150, 80, 70, 110, 130,120, 200, 150,
// 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: 30, // 柱图宽度
barMaxWidth: 30, // 最大宽度
z:10000, // label展示内容在柱状图上层显示
itemStyle:{
normal:{
extraCssText: 'z-index: 99',
// color:'rgb(0,128,70)',
label:{
show:true,
position:'insideBottom',
distance: 120,
formatter:function(param){
// console.log("更改方式param",param);
// console.log("更改方式index",index);
if(param.dataIndex == day){
window.start = {
format: 'YYYY/MM/DD',
insTrigger: true,
maxDate: moment(datas[0].time).format('YYYY/MM/DD')
};
var main = '{title|'+ datas[0].title +'}'+'{abg|}'+'\n'+
'{time|'+ start.maxDate +'}'+'\n'
var mainShow = datas[0].content;
if (mainShow == undefined) {
return main;
}
var i = 0;
while (mainShow.length > 0 && i <= 5){
if (mainShow.length < 15) {
main += '{main|'+ mainShow +'}'+'\n'
break;
} else if (i >= 5 && mainShow.length >= 15) {
main += '{main|'+ mainShow.substring(0, 10) +'...'+'}'+'\n'
} else {
main += '{main|'+ mainShow.substring(0, 15) +'}'+'\n'
mainShow = mainShow.substring(15)
}
i++;
}
return main;
} else {
return '';
}
},
name: 'my_el',
backgroundColor: '#eee',
borderColor: '#777',
borderWidth: 1,
borderRadius: 4,
rich: {
title: {
// color: '#eee',
fontSize: 14,
color: '#333',
align: 'center'
},
br: {
borderColor: 'red',
width: 1,
borderWidth: 1,
height: 80,
},
abg: {
// backgroundColor: '#333',
backgroundColor: 'cornflowerblue',
width: '100%',
align: 'right',
height: 35,
borderRadius: [4, 4, 0, 0]
},
time: {
fontSize: 16,
color:'#333',
padding:[5,5,5,10],
align: 'left'
},
main:{
fontSize: 14,
color:'#eee',
padding:[2,3,2,3],
align: 'left'
},
detail:{
fontSize: 16,
color:'cornflowerblue',
padding:[5,15,5,5],
align: 'right'
},
weatherHead: {
color: '#eee',
height: 24,
align: 'left'
},
hr: {
borderColor: '#777',
width: '100%',
borderWidth: 0.5,
height: 0,
align: 'left',
},
value: {
color: '#eee',
width: 20,
padding: [0, 20, 0, 30],
align: 'left'
},
valueHead: {
color: '#eee',
width:20,
padding: [0, 20, 0, 30],
align: 'center'
},
rate: {
color: '#eee',
width: 40,
align: 'right',
padding: [0, 10, 0, 0]
},
rateHead: {
color: '#eee',
width: 40,
align: 'center',
padding: [0, 10, 0, 0]
},
// 配置底部x轴内容
measuresIcon: {
height: 15,
align: 'left',
backgroundColor: {
image: measuresIcon // 措施标识
},
},
policyIcon: {
height: 15,
align: 'left',
backgroundColor: {
image: policyIcon // 疫情标识
}
},
},
textStyle:{fontSize:18}
}
}
}
}, {
name: '江苏',
stack: '确诊数量',
data: data.jiangsu,
// data: [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150,
// 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120,
// 200, 150, 80, 70, 110, 130,120, 200, 150,
// 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: 30, // 柱图宽度
barMaxWidth: 30, // 最大宽度
},{
name: '浙江',
stack: '确诊数量',
data: data.zhejiang,
// data: xChange(data.zhejiang,395),
// data: [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150,
// 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120,
// 200, 150, 80, 70, 110, 130,120, 200, 150,
// 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: 30, // 柱图宽度
barMaxWidth: 30, // 最大宽度
},{
name: '安徽',
stack: '确诊数量',
data: data.anhui,
// data: [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150,
// 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120,
// 200, 150, 80, 70, 110, 130,120, 200, 150,
// 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: 30, // 柱图宽度
barMaxWidth: 30, // 最大宽度
}
]
});
// setTimeout(() => {
//
// }, 500)
// myChart.setOption(option,true,true);
}
}
});
// xChange(data.zhejiang,384);
// myChart.setOption({
// series: [{
// // 通过饼图表现单个柱子中的数据分布
// data: [detail.data]
// }]
// });
// var offsetX =params.event.offsetX+50;
// var offsetY =params.event.offsetY+50;
// console.log("offsetX",offsetX)
// console.log("offsetY",offsetY)
// myChart.dispatchAction({
// type: 'showTip',
// x: offsetX,
// y: offsetY,
// seriesIndex: 0,
// dataIndex: 1,
// position:[offsetX,offsetY]
// });
// formatterTipLine(params);
}
// if(params.value=="Class0"){
// var offsetX =params.event.offsetX+10;
// var offsetY =params.event.offsetY+10;
// if(params.value="Class1"){
// myChart.dispatchAction({
// type: 'showTip',
// seriesIndex: 0,
// dataIndex: 0,
// position:[offsetX,offsetY]
// });
//
// }
//
// console.info(params);
//
// }
}
});
// myChart.on('mouseover', function (params) {
// // myChart.dispatchAction({
// // type: 'hideTip'
// // });
//
// });
}
}
}
});
}
}
});
}
// 弹框--请求某天措施疾病内容
function getMain(day) {
$.ajax({
type: 'GET',
url: 'api/policy/',
data: {
time_format: day.split("\-")[0]
},
success: function (rm) {
modalClose();
var datas = rm.result;
// 有措施或政策点击显示轮播图
if (datas.length != 0) {
for (var i = 0; i < datas.length; i++) {
if (datas[i].type == 1) {
tips.title.push("疫情");
} else {
tips.title.push("措施");
}
tips.main.push(datas[i].content);
tips.newTitle.push(datas[i].title);
tips.city.push(datas[i].city);
window.start = {
format: 'YYYY/MM/DD',
insTrigger: true,
maxDate: moment(datas[i].time).format('YYYY/MM/DD')
};
tips.datas = start.maxDate;
}
modalOpen(tips);
}
}
});
}
// 获取初始默认显示值
function changeAxisLabel(value) {
console.log("value",value)
for (var i = value.length - 1; i >= 0; i--) {
// console.log("value[i]",value[i])
if (value[i].indexOf("-p") != -1 || value[i].indexOf("-d") != -1) {
index = i;
day = i;
console.log("index",index)
return time = value[i];
}
}
console.log("time",time)
console.log("index",index)
return time;
}
// 获取时间对应下标
function selectDay(data,day) {
for (var i = data.length - 1; i >= 0; i--) {
if (data[i] == day) {
index = i;
return index;
}
}
}
$(document).ready(function () {
getjiangsudata()
});
// 模态框
var maxContents = 0;
var index2 = 0;/*初始化一个变量 指向下彪*/
//创建li标签，包含显示姓名，邮箱，电话号码及删除按钮
function addLi(contents, date, newTitle, city){
var li_1=document.createElement("li");
li_1.setAttribute("class","item");
addSpan(li_1,newTitle);
li_1.appendChild(document.createElement("br"));
addSpan(li_1,date);
addSpan(li_1,city);
li_1.appendChild(document.createElement("br"));
var textarea=document.createElement("textarea");
textarea.innerHTML=contents;
textarea.style.height = "74%";
li_1.appendChild(textarea);
// addSpan(li_1,contents);
document.getElementById("J_List").appendChild(li_1);
}
//为姓名或邮箱等添加span标签，好设置样式
function addSpan(li,text){
var span_1=document.createElement("span");
span_1.innerHTML=text;
li.appendChild(span_1);
}
//显示模态框
function modalOpen(parmes) {
console.log("点击参数",parmes)
// console.log("event点击参数",event)
//获取模态框对象 getElementsByClassName获取到的是一个数组对象
let modal = document.getElementsByClassName("modal-box")[0];
//获取浏览器当前宽高
let documentWidth = window.innerWidth;
let documentHeight = window.innerHeight;
//获取模态框宽度
let modalWidth = modal.offsetWidth;
//模态框距离浏览器右侧的距离就是（浏览器宽度-模态框宽）/ 2.0
//注意，需要把结果转为字符串类型
// modal.style.left = event.offsetX
// $(".modal-box").css("left",event.offsetX);
// console.log("left位置",event.offsetX)
// console.log("left位置",modal.style.left)
// modal.style.left = ((documentWidth - modalWidth) / 2.0).toString();
console.log("documentWidth位置",documentWidth)
console.log("modalWidth位置",modalWidth)
console.log("left位置",modal.style.left)
//设置为可见
$('#title').html(parmes.title[index2])
if (parmes.title[index2] == "疫情") {
$(".modal-box-top").css("background","peachpuff");
$(".modal-close").css("background","peachpuff");
} else {
$(".modal-box-top").css("background","cornflowerblue");
$(".modal-close").css("background","cornflowerblue");
}
// 轮播页数
maxContents = parmes.main.length - 1 ;
console.log("轮播页数",maxContents)
let pageBtn = document.getElementsByClassName("lr-tab")[0];
if (maxContents != 0) {
pageBtn.style.visibility = "visible";
} else {
pageBtn.style.visibility = "hidden";
}
// 循环追加轮播内容
for (var i = 0; i < parmes.main.length; i++) {
console.log("打印li",parmes.main[i])
addLi(parmes.main[i],parmes.date,parmes.newTitle[i],parmes.city[i]);
}
modal.style.visibility = "visible";
$(".item").eq(index2).fadeIn().siblings().fadeOut();
}
//模态框关闭
function modalClose() {
//获取模态框
let modal = document.getElementsByClassName("modal-box")[0];
let pageBtn = document.getElementsByClassName("lr-tab")[0];
pageBtn.style.visibility = "hidden";
index2 = 0;
// 删除追加子元素
var elements = document.getElementsByClassName('item');
for(var i = elements.length - 1; i >= 0; i--) {
elements[i].parentNode.removeChild(elements[i]);
}
//设置为不可见
modal.style.visibility = "hidden";
tips = {
date: "",
newTitle: [],
title: [],
main: [],
city: [],
};
}
//点击切换效果
$(".lr-tab .you-btn").click(function () {
console.log("右轮播",tips.title[index2])
index2 ++;
if (index2 > maxContents){ index2 = 0;}
if (tips.title[index2] == "疫情") {
$(".modal-box-top").css("background","peachpuff");
$(".modal-close").css("background","peachpuff");
} else {
$(".modal-box-top").css("background","cornflowerblue");
$(".modal-close").css("background","cornflowerblue");
}
$('#title').html(tips.title[index2])
$(".item").eq(index2).fadeIn().siblings().fadeOut();
});
$(".lr-tab .zuo-btn").click(function () {
console.log("左轮播",tips.title[index2])
index2 --;
if(index2 < 0){index2 = maxContents;}
if (tips.title[index2] == "疫情") {
$(".modal-box-top").css("background","peachpuff");
$(".modal-close").css("background","peachpuff");
} else {
$(".modal-box-top").css("background","cornflowerblue");
$(".modal-close").css("background","cornflowerblue");
}
$('#title').html(tips.title[index2])
$(".item").eq(index2).fadeIn().siblings().fadeOut();
});
// var time2 = setInterval(function () {
// index2 ++;
// if (index2 > 3){ index2 = 0;}
// $(".item").eq(index2).fadeIn().siblings().fadeOut();
// $(".tab-btn .btn").eq(index2).addClass("active").siblings().removeClass("active");
//
// },4000); //定时器 重复
</script>
</html>
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
