<html lang="en">
<head>
<meta charset="UTF-8">
<title>echartsTYT</title>
<script src="echarts.js"></script>
</head>
<body>
<div id="view1" style="height: 700%;width: 100%"></div>
<div id="view2" style="height: 700%;width: 100%"></div>
<script>
sdtyt = echarts.init(document.getElementById("view1"))
options1 = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossType:{
color:"#999"
}
}
},
toolbox:{
feature:{
dataView: {
show:true,readOnly:false
},
magicType: {
show: true,
type: ["line","bar"]
},
restore: {
show:true
},
saveAsImage: {
show: true
}
}
},
legend:{
data:["蒸发量","降水量","平均温度"]
},
xAxis:[
{
type:"category",
data:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
axisPointer: {
type: "shadow"
}
}
],
yAxis: [
{
type: "value",
name: "水量",
min: 0,
max: 250,
interval: 5,
axisLabel:{
formatter: "{value}ml"
}
},
{
type: "value",
name: "温度",
min: 0,
max: 25,
interval: 5,
axisLabel:{
formatter: "{value}℃"
}
}
],
series: [
{
name: "蒸发量",
type: "bar",
data: [2.0,4.9,3.5,5.6,7.6,4.9,12.3,23.2,12.4,1.4,4,2]
},
{
name: "降水量",
type: "bar",
data: [23,21,4,5,45,21,1.2,3,5,6,9,19]
},
{
name: "平均温度",
type: "line",
data: [23.6,23,5,6,23,18,14,21,9,7,23.8,3]
}
]
};
sdtyt.setOption(options1)
</script>
<script>
sdtyt = echarts.init(document.getElementById("view2"))
options1 = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossType:{
color:"#999"
}
}
},
toolbox:{
feature:{
dataView: {
show:true,readOnly:false
},
magicType: {
show: true,
type: ["line","bar"]
},
restore: {
show:true
},
saveAsImage: {
show: true
}
}
},
legend:{
data:["蒸发量","降水量","平均温度"]
},
xAxis:[
{
type:"category",
data:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
axisPointer: {
type: "shadow"
}
}
],
yAxis: [
{
type: "value",
name: "水量",
min: 0,
max: 250,
interval: 5,
axisLabel:{
formatter: "{value}ml"
}
},
{
type: "value",
name: "温度",
min: 0,
max: 25,
interval: 5,
axisLabel:{
formatter: "{value}℃"
}
}
],
series: [
{
name: "蒸发量",
type: "bar",
data: [2.0,4.9,3.5,5.6,7.6,4.9,12.3,23.2,12.4,1.4,4,2]
},
{
name: "降水量",
type: "bar",
data: [23,21,4,5,45,21,1.2,3,5,6,9,19]
},
{
name: "平均温度",
type: "line",
data: [23.6,23,5,6,23,18,14,21,9,7,23.8,3]
}
]
};
sdtyt.setOption(options1)
</script>
</body>
</html>