Echarts自定義formatter
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{margin: 0; padding: 0;}
html,body{
width:100%;
height:100%;
background:#f7f7f8;
margin:0 auto;
font-family:-apple-system-font,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
#box{width: 70%;height: 70%;border: 2px solid #000;margin:0 auto;}
.FonterConter{height: 70%;width: 100%;}
#dataGraph{width: 80%;height: 420px;margin: 0 auto;}
.FonterFont{height: 30%;width: 100%;}
.FonterFontDiv{width: 270px;height: 22px;margin: 0 auto;padding-top: 8px;}
.FonterFontDiv input{margin: 0 8px 0 50px;}
.MarInpTO{margin-right: 8px;}
</style>
<body>
<div id="box">
<div class="FonterConter">
<div id="dataGraph">
</div>
</div>
<div class="FonterFont">
<div class="FonterFontDiv">
對比：
<input type="checkbox" name="compare" class="compare" value="tongbi" />同比
<input type="checkbox" name="compare" class="compare" value="huanbi" />環比
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/echarts.min.js" ></script>
<script>
var legNameO="PV",legNameT="",LegNameS="";
var NameOdata=[120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230, 210];
var NameTdata=[], NameSdata=[];
var xAxisData= ['4.4','4.5','4.6','4.7','4.8','4.9','4.10','4.11','4.12','4.14','4.15','4.16','4.17'];
dx(legNameO,legNameT,LegNameS,NameOdata,NameTdata,NameSdata,xAxisData);
$(".compare").click(function(){
var val = []
$(".compare").each(function() {
if($(this).is(":checked")){
val.push($(this).val());
};
});
if(val.length==0){
legNameO="PV";
legNameT="";
LegNameS="";
NameOdata=[120, 132, 21, 134, 10, 30, 110];
NameTdata=[];
NameSdata=[];
xAxisData= ['4.4','4.5','4.6','4.7','4.8','4.9','4.10'];
dx(legNameO,legNameT,LegNameS,NameOdata,NameTdata,NameSdata,xAxisData);
};
if(val.length==1){
if(val[0]=="tongbi"){
legNameO="PV";
legNameT="IP數";
LegNameS="";
NameOdata=[120, 132, 21, 134, 10, 30, 110];
NameTdata=[150, 232, 201, 154, 190, 330, 410];
NameSdata=[];
xAxisData= ['4.4','4.5','4.6','4.7','4.8','4.9','4.10'];
dx(legNameO,legNameT,LegNameS,NameOdata,NameTdata,NameSdata,xAxisData);
};
if(val[0]=="huanbi"){
legNameO="平均";
legNameT="UV";
LegNameS="";
NameOdata=[120, 132, 101, 134, 90, 230, 210];
NameTdata=[220, 182, 191, 234, 290, 330, 310];
NameSdata=[];
xAxisData= ['4.4','4.5','4.6','4.7','4.8','4.9','4.10'];
dx(legNameO,legNameT,LegNameS,NameOdata,NameTdata,NameSdata,xAxisData);
};
};
if(val.length==2){
legNameO="PV";
legNameT="UV";
LegNameS="IP數";
NameOdata=[120, 132, 21, 134, 10, 30, 110];
NameTdata=[220, 182, 191, 234, 290, 330, 310];
NameSdata=[150, 232, 201, 154, 190, 330, 410];
xAxisData= ['4.4','4.5','4.6','4.7','4.8','4.9','4.10'];
dx(legNameO,legNameT,LegNameS,NameOdata,NameTdata,NameSdata,xAxisData);
};
});
function dx(legNameO,legNametT,LegNameS,NameOdata,NameTdata,NameSdata,xAxisData){
var myChart = echarts.init(document.getElementById('dataGraph'));
option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis',
axisPointer : { // 座標軸指示器，座標軸觸發有效
type : 'line' // 默認爲直線，可選爲：'line' | 'shadow'
},
formatter:function(p){
if(p[1].seriesName=="" && p[2].seriesName!=""){
var text = p[0].name+'<br>'+p[0].seriesName+'：'+p[0].value+'<br>'+p[2].seriesName+'：'+p[2].value+'<br>';
};
if(p[1].seriesName!="" && p[2].seriesName==""){
var text = p[0].name+'<br>'+p[0].seriesName+'：'+p[0].value+'<br>'+p[1].seriesName+'：'+p[1].value+'<br>';
};
if(p[1].seriesName=="" && p[2].seriesName==""){
var text = p[0].name+'<br>'+p[0].seriesName+'：'+p[0].value+'<br>';
};
if(p[0].seriesName!="" && p[1].seriesName!="" && p[2].seriesName!=""){
var text = p[0].name+'<br>'+p[0].seriesName+'：'+p[0].value+'<br>'+p[1].seriesName+'：'+p[1].value+'<br>'+p[2].seriesName+'：'+p[2].value+'<br>';
};
return text;
},
},
legend: {
data:[legNameO,legNameT,LegNameS],
right:"3%"
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
// 在座標軸上顯示數據
label:{
normal:{
show: true,
position: 'inside'
}
},
xAxis: {
name:'時間',
nameGap:"5",
type: 'category',
boundaryGap: false,
data: xAxisData
},
yAxis: {
type: 'value'
},
series: [
{
name:legNameO,
type:'line',
stack: '總量',
data:NameOdata
},
{
name:legNameT,
type:'line',
stack: '總量',
data:NameTdata
},
{
name:LegNameS,
type:'line',
stack: '總量',
data:NameSdata
},
]
};
myChart.setOption(option);
};
</script>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章