调用dataZoom(数据区域缩放组件)事件的代码:
dataZoom:[{ //数据区域缩放组件
type:'inside', //两种取值 inslide,slide
show:true,
start:20, //数据显示的开始位置
end:70, //数据显示的终止位置
}],
myChart1.on('datazoom',function(params){
console.log(startValue,endValue,startPercent,endPercent);
option2.dataZoom[0].start=startPercent;
option2.dataZoom[0].end=endPercent;
myChart2.setOption(option2);
});
鼠标单击跳转网页:
myChart1.on('click',function(params){
var yt=alert("鼠标单击事件,您刚才单击了:"+params.name);
window.alert("将为您打开一个新窗口,搜索关键词:"+params.name);
window.open('https://www.baidu.com/s?wd='+encodeURIComponent(params.name))
});
window.addEventListener("resize",function(){
myChart1.resize();
});
myChart2.on('click',function(params){
var yt=alert("鼠标单击事件,您刚才单击了:"+params.name);
window.alert("将为您打开一个新窗口,搜索关键词:"+params.name);
window.open('https://www.baidu.com/s?wd='+encodeURIComponent(params.name))
});
window.addEventListener("resize",function(){
myChart2.resize();
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/echarts.js"></script>
</head>
<body>
<div id="main1" style="width: 1500px; height: 400px;background-color: antiquewhite;"></div>
<div id="main2" style="width: 900px; height: 400px;background-color: antiquewhite;"></div>
<script type="text/javascript">
var myChart1=echarts.init(document.getElementById("main1"));
var option1={
// color:['#FF69B4','#00BFFF','blue'],
grid:{
x:35,
},
title: {
text: '湖北专升本计算机专业报考人数',
subtext: '来源:百度',
},
tooltip: {
trigger: 'axis',
},
dataZoom:[{
type:'inside',
show:true,
start:20,
end:70,
}],
legend:{
data:['2022','2023','2024'],
left:422,
color:'red',
top:8
},
xAxis: {
type: 'category',
data: ['江汉大学','湖北工程学院','汉口学院',
'湖北经济学院','湖北科技学院','湖北警官学院','湖北理工学院'],
axisTick:{
show:true,
length:1,
lineStyle:{
}
}
},
yAxis: {
type: 'value'
},
series: [
{
name: '2022',
type: 'bar',
data:[162,46,138,35,28,81,98]
},
{
name: '2023',
type: 'bar',
data:[179,57,148,28,38,76,108]
},
{
name: '2024',
type: 'bar',
data:[129,76,133,15,41,90,78]
}
]
};
var myChart2=echarts.init(document.getElementById("main2"))
var option2={
color:['DarkGreen','red','LimeGreen','blue','Purple','GreenYellow'],
title: {
text: '湖北专升本计算机专业报考率',
},
// backgroundColor: 'rgba(204,204,204,0.7)',
tooltip: {
trigger: 'item',
formatter:"{a}<br/>{b}:{c}({d}%)"
},
legend:{
// left:20,
top:30,
data: ['江汉大学',
'湖北工程学院',
'汉口学院',
'湖北经济学院',
'湖北科技学院',
'湖北警官学院',
'湖北理工学院']
},
series: [{
name: '报考率',
type: 'pie',
selectedMode:'single',
radius:['10%','30%'],
label: {
position: 'inner' // 显示位置
},
labelLine:{
show:false
},
data:[
{value:225,name:'高级语言程序设计'},
{value:201,name:'高等数学'},
{value:179,name:'c语言程序设计'}
]
},
{
name:'专业名称',
type:'pie',
selectedMode:'single',
radius:['40%','55%'],
data:[
{value:179,name:'江汉大学'},
{value:46,name:'湖北工程学院'},
{value:138,name:'汉口学院'},
{value:35,name:'湖北经济学院'},
{value:28,name:'湖北科技学院'},
{value:81,name:'湖北警官学院'},
{value:98,name:'湖北理工学院'}
]
}]
};
myChart1.setOption(option1);// 为myChart1对象加载数据
myChart2.setOption(option2);// 为myChart2对象加载数据
echarts.connect([myChart1,myChart2]);
myChart1.on('datazoom',function(params){
console.log(startValue,endValue,startPercent,endPercent);
option2.dataZoom[0].start=startPercent;
option2.dataZoom[0].end=endPercent;
myChart2.setOption(option2);
});
myChart1.on('click',function(params){
var yt=alert("鼠标单击事件,您刚才单击了:"+params.name);
window.alert("将为您打开一个新窗口,搜索关键词:"+params.name);
window.open('https://www.baidu.com/s?wd='+encodeURIComponent(params.name))
});
window.addEventListener("resize",function(){
myChart1.resize();
});
myChart2.on('click',function(params){
var yt=alert("鼠标单击事件,您刚才单击了:"+params.name);
window.alert("将为您打开一个新窗口,搜索关键词:"+params.name);
window.open('https://www.baidu.com/s?wd='+encodeURIComponent(params.name))
});
window.addEventListener("resize",function(){
myChart2.resize();
});
</script>
</body>
</html>