应用场景：大屏展示，实时获取数据轮播
应用项目：陕西县级融媒体大屏
效果：运行源码看效果
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>echarts-auto-tooltip</title>
<script src="https://zycftcenter.gdwlcloud.com:90/yangxian/screen/js/echarts.common.min.js"></script>
<script type="text/javascript" src="https://zycftcenter.gdwlcloud.com:90/yangxian/screen/js/echarts-auto-tooltip.js"></script>
<style>
*{
margin:0;
padding:0;
}
body {
width:1920px;
height:1080px;
overflow: hidden;
}
#pie, #line {
display: inline-block;
}
#pie {
margin-right: 40px;
border: 1px solid #eee;
border-radius: 8px;
display:none !important;
}
#line {
border: 1px solid #eee;
border-radius: 8px;
}
.bg{
width:1920px;
height:1080px;
background:url('https://zycftcenter.gdwlcloud.com:90/shenmu/screen/images/9_02.png');
background-size:1920px 1080px;
}
.title{
font-size: 62px;
color: #3fbaff;
/* line-height: 291px; */
height: 130px;
/* padding-left: 118px; */
float: left;
/* min-width: 300px; */
background: url(https://zycftcenter.gdwlcloud.com:90/daping/daping/images/title.png);
background-size: 460px 130px;
width: 460px;
position: absolute;
top: 35px;
left: 70px;
line-height: 145px;
text-indent: 36px;
letter-spacing: 4px;
}
#line{
position: absolute;
left:100px;
top:200px;
}
</style>
</head>
<body>
<div class="bg">
<h2 class="title">采集分析</h2>
<div id="line" style="width: 1700px;height:800px;border:0px"></div>
</div>
<script src="https://zycftcenter.gdwlcloud.com:90/jushi/js/jquery-1.11.1.min.js"></script>
<script>
$(function(){
$.ajax({
type : 'get',
url : 'http://zycfapi.gdwlcloud.com/daping/clue_trace.php?channeltotal=17196,17246,17255&channelid=&model=2',
dataType:"jsonp", //数据格式设置为jsonp
jsonp:"callback",
success :function(data) {
console.log(data)
console.log(data.result.data[0].data)
let myChart = echarts.init(document.getElementById('line'));
let option = {
title : {
text: '',
subtext: ''
},
tooltip : {
trigger: 'axis'
},
legend: {
show:true,
itemGap: 70,
orient:'horizontal',
// borderColor:'#df3434',
// borderWidth:2,
data:[
{
name:data.result.legend[0],
textStyle:{
fontSize:42,
fontWeight:100,
color:'#fff'
},
// icon:'stack'
},
{
name:data.result.legend[1],
textStyle:{
fontSize:42,
fontWeight:100,
color:'#fff'
},
// icon:'pie'
},
{
name:data.result.legend[2],
textStyle:{
fontSize:42,
fontWeight:100,
color:'#fff'
},
// icon:'pie'
}
]
},
toolbox: {
show : false,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data :data.result.xAxis,
axisLabel: {
textStyle: {
//color: '#0484cf',//坐标值得具体的颜色
fontSize: '30'
}
},
axisLine: {
lineStyle: {
color: '#fff'
}
},
}
],
yAxis : [
{
type : 'value',
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: '20'
}
},
axisLine: {
lineStyle: {
color: '#fff'
}
},
}
],
tooltip : {
enterable:false,
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter:function(params)//数据格式
{
var relVal = '<p style="font-size:30px;height:40px;line-height:40px">'+params[0].name+'</p>'+'<br/>';
relVal +='<p style="font-size:30px;color:#3fbaff;font-weight:900">'+params[0].seriesName+ ' : ' + params[0].value+'</p>'+'<br/>'
relVal +='<p style="font-size:30px;color:#1ab820;font-weight:900">'+params[1].seriesName+ ' : ' +params[1].value+'</p>'+'<br/>'
relVal +='<p style="font-size:30px;color:#c7f460;font-weight:900">'+params[2].seriesName+ ' : ' +params[2].value+'</p>'+'<br/>'
return relVal;
}
},
series : [
{
name:data.result.legend[0],
type:'bar',
data:data.result.data[0].data,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#3fbaff" // 0% 处的颜色
}, {
offset: 0.6,
color: "#3fbaff" // 60% 处的颜色
}, {
offset: 1,
color: "#ccc" // 100% 处的颜色
}], false)
}
}
},
{
name:data.result.legend[1],
type:'bar',
data:data.result.data[1].data,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#1ab820" // 0% 处的颜色
}, {
offset: 0.6,
color: "#1ab820" // 60% 处的颜色
}, {
offset: 1,
color: "#ccc" // 100% 处的颜色
}], false)
}
}
},
{
name:data.result.legend[2],
type:'bar',
data:data.result.data[2].data,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#c7f460"
}, {
offset: 0.6,
color: "#c7f460" // 60% 处的颜色
}, {
offset: 1,
color: "#ccc" // 100% 处的颜色
}], false)
}
}
}
]
};
myChart.setOption(option);
tools.loopShowTooltip(myChart, option, {loopSeries: true});
}
})
})
</script>
</body>
</html>
网友评论