echarts实现通用大数据可视化看板大屏效果代码
代码语言:html
所属分类:其他
代码描述:echarts实现通用大数据可视化看板大屏效果代码,地图数据实时变动,有交互动画。
代码标签: echarts 通用 大数据 可视化 看板 大屏
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echart-china.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".loading").fadeOut()
});
$(function() {
a();
b();
c();
d();
function a() {
var e = echarts.init(document.getElementById("echart1"));
option = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series: [{
name: "占比情况",
type: "pie",
radius: "50%",
center: ["50%", "50%"],
clockwise: false,
data: [{
value: 25,
name: "公司1"
}, {
value: 15,
name: "公司2"
}, {
value: 8,
name: "公司3"
}],
label: {
normal: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: 14,
}
}
},
labelLine: {
normal: {
show: false
}
},
itemStyle: {
normal: {},
emphasis: {
borderWidth: 0,
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}],
color: ["#62c98d", "#2f89cf", "#4cb9cf"],
};
e.setOption(option);
window.addEventListener("resize", function() {
e.resize()
})
}
function b() {
var e = echarts.init(document.getElementById("echart2"));
var g = [
[4, 3, 5, 9, 1, 8, 3, 7, 2, 4, 6, 4],
[5, 5, 7, 3, 6, 8, 9, 4, 3, 7, 2, 2],
];
var h = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
var i = ["计划数量", "销售金额"];
var f = [];
$.each(g, function(j, l) {
var k = {
name: i[j],
type: "bar",
itemStyle: {
normal: {
color: ""
}
},
barWidth: "30",
data: l
};
f.push(k)
});
option = {
legend: {
data: i,
type: "scroll",
textStyle: {
color: "#fff"
},
top: "0"
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
color: ["#62c98d", "#2f89cf"],
grid: {
top: "14%",
left: "15",
right: "35",
bottom: "12%",
containLabel: true
},
xAxis: [{
type: "category",
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
}
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
},
data: h,
}],
yAxis: [{
name: "",
type: "value",
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: "#2f2a7a"
}
},
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)"
}
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
},
}],
dataZoom: [{
show: true,
height: 12,
xAxisIndex: [0],
bottom: 5,
start: 10,
end: 80,
handleIcon: "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
handleSize: "110%",
handleStyle: {
color: "#d3dee5",
},
textStyle: {
color: "#fff"
},
borderColor: "rgba(255,255,255,.3)"
}],
series: f
};
e.setOption(option);
window.addEventListener("resize", function() {
e.resize()
})
}
function c() {
var i = echarts.init(document.getElementById("echart3").........完整代码请登录后点击上方下载按钮下载查看
网友评论0