通用大数据可视化看板模板效果
代码语言：html
所属分类：布局界面
代码描述：通用大数据可视化看板模板效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>山西省交通大数据分析平台</title>
<!--设置是否为缩放模式 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bootstrap.4.3.1.min.js"></script>
<!--echarts JS-->
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/echarts.js"></script>
<!-- 轮播swiper文件 -->
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/swiper.min.css">
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/swiper.min.js"></script>
<!--界面样式-->
<script >
//交通流量
var data = {
id: 'multipleBarsLines',
legendBar: ['高速公路', '城镇公路'],
symbol: ' ', //数值是否带百分号 --默认为空 ''
legendLine: ['环比', '同比'],
xAxis: ['2014', '2015', '2016', '2017', '2018',
'2019'
],
yAxis: [
[8, 10, 10, 11, 4, 13],
[10, 7, 8, 8, 7, 9]
],
lines: [
[10, 10, 9, 11, 7, 4],
[6, 12, 12, 2, 4, 4]
],
barColor: ['#009883', '#e66922'], //柱子颜色 必填参数
lineColor: ['#fd6665', '#fba73b'], // 折线颜色
}
var myData = (function test() {
let yAxis = data.yAxis || []
let lines = data.lines || []
let legendBar = data.legendBar || []
let legendLine = data.legendLine || []
var symbol = data.symbol || ' '
let seriesArr = []
let legendArr = []
yAxis && yAxis.forEach((item, index) => {
legendArr.push({
name: legendBar && legendBar.length > 0 && legendBar[index]
})
seriesArr.push({
name: legendBar && legendBar.length > 0 && legendBar[index],
type: 'bar',
barGap: '0.5px',
data: item,
barWidth: data.barWidth || 12,
label: {
normal: {
show: false,
formatter: '{c}' + symbol,
position: 'top',
textStyle: {
color: '#000',
fontStyle: 'normal',
fontFamily: '微软雅黑',
textAlign: 'left',
fontSize: 11,
},
},
},
itemStyle: { //图形样式
normal: {
barBorderRadius:0,
borderWidth:1,
borderColor:'#ddd',
color: data.barColor[index]
},
}
})
})
lines && lines.forEach((item, index) => {
legendArr.push({
name: legendLine && legendLine.length > 0 && legendLine[index]
})
seriesArr.push({
name: legendLine && legendLine.length > 0 && legendLine[index],
type: 'line',
data: item,
itemStyle: {
normal: {
color: data.lineColor[index],
lineStyle: {
width: 2,//折线宽度
type: 'solid',
}
}
},
label: {
normal: {
show: false, //折线上方label控制显示隐藏
position: 'top',
}
},
symbol: 'circle',
symbolSize: 5
})
})
return {
seriesArr,
legendArr
}
})()
option1 = {
grid: {
left: '0',
top: '30',
right: '0',
bottom: '10',
containLabel: true
},
legend: {
top: 0,
textStyle: {
color: "#fff",
},
itemWidth: 10, // 设置宽度
itemHeight: 10, // 设置高度
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
xAxis: {
type: 'category',
data: ["字段1","字段2","字段3","字段4","字段5","字段6"],
axisTick: { //---坐标轴 刻度
show: true, //---是否显示
},
axisLine: { //---坐标轴 轴线
show: true, //---是否显示
lineStyle: {
color: 'rgba(255,255,255,.1)',
width: 1,
type: 'dotted',
},
},
axisLabel: {//X轴文字
textStyle: {
fontSize: 12,
color: '#fff'
},
},
},
yAxis: {
type: 'value',
splitLine: {//分割线
show: true,
lineStyle: {
color: 'rgba(255,255,255,.1)',
width: 1,
type: 'dotted'
}
},
axisLabel: {//Y轴刻度值
formatter: '{value}',
textStyle: {
fontSize: 12,
color: '#fff'
},
},
axisLine: { //---坐标轴 轴线
show: false, //---是否显示
},
},
series: [{
name: '原方案',
type: 'bar',
data: [3, 7, 4, 9, 3, 5],
barWidth: 15,
barGap: 0.5, //柱子之间间距 //柱图宽度 两种情况都要设置，设置series 中对应数据柱形的itemStyle属性下的emphasis和normal的barBorderRadius属性初始化时候圆角 鼠标移上去圆角
itemStyle: {
normal: {
barBorderRadius: 50,
color: "#446ACF",
}
},
}, {
name: '建议方案',
type: 'bar',
data: [6, 2, 5, 2, 5, 6],
barWidth: 15, //柱图宽度
barGap: 0.5,
itemStyle: {
normal: { //设置颜色的渐变
barBorderRadius: 50,
color: "#4fb69d",
}
},
}]
};
//////////////////////交通流量 end
//交通工具流量
option2 = {
tooltip: {//鼠标指上时的标线
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#fff'
}
}
},
legend: {
icon: 'rect',
itemWidth: 14,
itemHeight: 5,
itemGap: 13,
data: ['小型车', '中型车', '大型车'],
right: '10px',
top: '0px',
textStyle: {
fontSize: 12,
color: '#fff'
}
},
grid: {
x: 35,
y: 25,
x2: 8,
y2: 25,
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#57617B'
}
},
axisLabel: {
textStyle: {
color:'#fff',
},
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}],
yAxis: [{
type: 'value',
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#57617B',
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14
},
textStyle: {
color:'#fff',
},
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.2)',
type:'dotted',
}
}
}],
series: [{
name: '小型车',
type: 'line',
smooth: true,
lineStyle: {
normal: {
width: 2
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(137, 189, 27, 0.3)'
}, {
offset: 0.8,
color: 'rgba(137, 189, 27, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(137,189,27)'
}
},
data: [20,35,34,45,52,41,49,64,24,52.4,24,33]
}, {
name: '中型车',
type: 'line',
smooth: true,
lineStyle: {
normal: {
width: 2
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0, 136, 212, 0.3)'
}, {
offset: 0.8,
color: 'rgba(0, 136, 212, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(0,136,212)'
}
},
data: [97.3,99.2,99.3,100.0,99.6,90.6,80.0,91.5,69.8,67.5,90.4,84.9]
}, {
name: '大型车',
type: 'line',
smooth: true,
lineStyle: {
normal: {
width: 2
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(219, 50, 51, 0.3)'
}, {
offset: 0.8,
color: 'rgba(219, 50, 51, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(219,50,51)'
}
},
data: [84.2,81.0,67.5,62.1,43.7,68.5,51.9,71.8,76.7,67.6,62.9,0]
}, ]
};
//////////////////////交通工具流量 end
//本月发生事件1
var color = ['#e9df3d', '#f79c19', '#21fcd6', '#08c8ff', '#df4131'];
var data = [{
"name": "超速",
"value": 30
},
{
"name": "闯红灯",
"value": 30
},
{
"name": "闯禁行",
"value": 42
},
{
"name": "违停",
"value": 50
},
{
"name": "逆行",
"value": 34
}
];
var max = data[0].value;
data.forEach(function(d) {
max = d.value > max ? d.value : max;
});
var renderData = [{
value: [],
name: "告警类型TOP5",
symbol: 'none',
lineStyle: {
normal: {
color: '#ecc03e',
width: 2
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{
offset: 0,
color: 'rgba(203, 158, 24, 0.8)'
}, {
offset: 1,
color: 'rgba(190, 96, 20, 0.8)'
}],
false)
}
}
}];
data.forEach(function(d, i) {
var value = ['', '', '', '', ''];
value[i] = max,
renderData[0].value[i] = d.value;
renderData.push({
value: value,
symbol: 'circle',
symbolSize: 12,
lineStyle: {
normal: {
color: 'transparent'
}
},
itemStyle: {
normal: {
color: color[i],
}
}
})
})
var indicator = [];
data.forEach(function(d) {
indicator.push({
name: d.name,
max: max,
color: '#fff'
})
})
option3 = {
tooltip: {
show: true,
trigger: "item"
},
radar: {
center: ["50%", "50%"],//偏移位置
radius: "80%",
startAngle: 40, // 起始角度
splitNumber: 4,
shape: "circle",
splitArea: {
areaStyle: {
color: 'transparent'
}
},
axisLabel: {
show: false,
fontSize: 20,
color: "#000",
fontStyle: "normal",
fontWeight: "normal"
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(255, 255, 255, 0.5)"
}
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(255, 255, 255, 0.5)"
}
},
indicator: indicator
},
series: [{
type: "radar",
data: renderData
}]
}
//////////////////////本月发生事件1 end
//本月发生事件2
var color = ['#e9df3d', '#f79c19', '#21fcd6', '#08c8ff', '#df4131'];
var data = [{
"name": "超速",
"value": 15
},
{
"name": "闯红灯",
"value": 14
},
{
"name": "闯禁行",
"value": 23
},
{
"name": "违停",
"value": 2
},
{
"name": "逆行",
"value": 50
}
];
var max = data[0].value;
data.forEach(function(d) {
max = d.value > max ? d.value : max;
});
var renderData = [{
value: [],
name: "告警类型TOP5",
symbol: 'none',
lineStyle: {
normal: {
color: '#ecc03e',
width: 2
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{
offset: 0,
color: 'rgba(203, 158, 24, 0.8)'
}, {
offset: 1,
color: 'rgba(190, 96, 20, 0.8)'
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0