1648023677(1).jpg
<DOCTYPE html>
<html>
<head>
<script src="./echarts.min.js"></script>
<style>
#echarts,.body{
padding: 0;
margin: 0;
width: 800px;
height: 600px;
margin: 0 auto;
position: relative;
}
.next{
color: #f00;
font-size: 36px;
line-height: 36px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 2;
cursor: pointer;
}
.pro{
color: #f00;
font-size: 36px;
line-height: 36px;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 2;
cursor: pointer;
}
</style>
</head>
<body>
<div class="body">
<div id="echarts"></div>
<div class="next"><</div>
<div class="pro">></div>
</div>
</body>
<script>
window.onload = function(){
let list = [];
let list1 = [];
const max = 18;
var index = 0;
var score1 = 60;//及格分1
var score2 = 65;//及格分1
var score3 = 70;//及格分1
let dome = echarts.init(document.getElementById("echarts"));
for(var i=0;i<max;i++){
list.push(parseInt(Math.random()*100)+20);
list1.push(parseInt(Math.random()*100)+20);
}
let color = [
"rgb("+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+")",
"rgb("+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+")",
"rgb("+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+")",
"rgb("+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+")",
"rgb("+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+")",
"rgb("+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+")",
"rgb("+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+")",
"rgb("+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+")",
"rgb("+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+")",
"rgb("+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+")",
"rgb("+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+")",
]
document.getElementsByClassName('next')[0].onclick = function(){
//左切换
if(index==0){
index = max/3;
}else{
index--
}
dome.clear();
init();
}
document.getElementsByClassName('pro')[0].onclick = function(){
//右切换
if(index==max/3){
index = 0;
}else{
index++
}
dome.clear();
init();
}
function init(){
let option = {
title: {
text: 'Rainfall vs Evaporation',
subtext: 'Fake Data'
},
tooltip: {
trigger: 'axis'
},
legend: {
show:false,
data: ['Rainfall', 'Evaporation']
},
toolbox: {
show: true,
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
xAxis:[
{
type: 'category',
data: ['Jan', 'Feb', 'Mar']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Rainfall',
type: 'bar',
barWidth:30,
data: JSON.parse(JSON.stringify(list)).splice(index*3,(index+1)*3),
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
},
itemStyle:{
normal:{
color:function(params){
return color[params.dataIndex]
}
}
},
markLine:{
symbol:'none',
lineStyle:{
width:2,
dashOffset:100
},
symbolOffset:["100%",0],
data:[
[{
name:"标线1起点",
xAxis:0,
x:110,
yAxis:score1,
symbol:"none",
lineStyle:{
width:2,
dashOffset:100
},
},
{
symbolOffset:["100%",0],
name:"标线1终点",
xAxis:'Jan',
x:240,
yAxis:score1,
symbol:"none",
}],
[{
name:"标线2起点",
xAxis:'Jan',
x:330,
yAxis:score2,
symbol:"none",
},
{
name:"标线2终点",
xAxis:"Feb",
yAxis:score2,
x:460,
symbol:"none",
}],[{
x:550,
name:"标线3起点",
xAxis:'Feb',
yAxis:score3,
symbol:"none",
},
{
name:"标线3终点",
xAxis:"Mar",
x:680,
yAxis:score3,
symbol:"none",
}]
]
}
},
{
name: 'Evaporation',
type: 'bar',
barWidth:30,
data: JSON.parse(JSON.stringify(list1)).splice(index*3,(index+1)*3),
itemStyle:{
normal:{
color:function(params){
return color[params.dataIndex]
}
}
},
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
}
}
]
};
console.log(list,list1,option);
dome.setOption(option);
}
init();
}
</script>
</html>
echarts版本5.0以上
网友评论