通用大数据可视化看板模板效果
代码语言: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)'
}],
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'
})
})
option31 = {
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
}]
}
//////////////////////本月发生事件2 end
//收费站收费排行1
var spirit = '../images.ksh45.png';
var maxData = 200;
option4 = {
"title": {
"text": " ",
"left": "center",
"y": "10",
"textStyle": {
"color": "#fff"
}
},
"grid": {
"left": 30,
"top": 0,
"bottom": 10
},
"tooltip": {
"trigger": "item",
"textStyle": {
"fontSize": 12
},
"formatter": "{b0}:{c0}"
},
"xAxis": {
"max": 100,
"splitLine": {
"show": false
},
"axisLine": {
"show": false
},
"axisLabel": {
"show": false
},
"axisTick": {
"show": false
}
},
"yAxis": [
{
"type": "category",
"inverse": false,
"data": [
"晋城",
"太旧",
"太原",
"吕梁",
"长治",
],
"axisLine": {
"show": false
},
"axisTick": {
"show": false
},
"axisLabel": {
"margin": -4,
"textStyle": {
"color": "#fff",
"fontSize": 16.25
}
}
},
],
"series": [
{
"type": "pictorialBar",
"symbol": "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAADYElEQVR4nO2dz0sUYRjHP7tIdAmxQ1LdlhCKMohAIsgiyEuHjkUEFQTlpejS/xCCBB06RBGBBKIG4cGyH0qHBKE9eKyFqBQPRQeNCt06vGNY7bq7szPfeZLnAwuzM+/zgw/DDvMu70wOIVveLscJOwycA44A24CfwAfgKXAbeFVvovlC/o/vuVwuTj+x0FWiYdGbgXvA8RrjHgAXgIVaCbMU3SKr1BhtwEtgZx1jTwI7gG7ga5pNNUO+9pBMuEN9klfYD9xMqZdEsCj6AHAiRtxZYFeyrSSHRdGnYsblCD8jJrEoek8TsbsT6yJhLIrelFFsqlgUPZtRbKpYFP2kidjxxLpIGIuiB4AvMeLmgJGEe0kMi6I/AVdjxPVSx91hVlgUDXAXuEaY16jFMnAJeJhqR01iVTTAdeAYUFxjzBRwCLgl6agJrM51rDAO7AP2EmbxthPO8vfAc2Ams84axLpoCGKLrH1mm8eC6KPAGaAL2Fpj7AZgY7T9DfhRY/wc4eflPmH+OjOynI8uEGbpukXlJ4Dz84V8aWWHcj46q4thFzCNTjJRren2UrlLWPM3WYjuAMYIk/tq2oCx9lK5Q11YLboFGARaxXVX0woMtpfK0uuTWvRFoFNcsxKdhF5kqEX3iuuthbQXtehG/gdMG2kvlm/B1xUuWoSLFmFF9CRwg2TnM4pRzskEc8bGiugR4ArhNjkpJqKcJv51sSJ63eOiRbhoES5ahIsW4aJFuGgRLlqEixbhokW4aBEuWoSLFuGiRbhoES5ahIsW4aJFuGgRLlqEWvTHKvs/p1izWu5qvaSCWvTlCvtmgeEUaw5TeUVtpV5SQy16COgBRoHXhMWb3aS7PnAhqjEQ1RwFeuYL+aEUa/5DFmtYHkefOEwQVmcBvKD+FQNvgNN/P+pHiV8MRbhoES5ahIsW4aJFuGgRLlqEixbhokW4aBEuWoSLFuGiRbhoES5ahIsW4aJFuGgRLlqEixbhokVYEx3nudGKXE1jTfS6xUWLcNEiXLQIFy3CRYtw0SJctAgXLcJFi3DRIv430eUq2+axJvp7jePPqmzHySXFmuhHwFKVYzNA/6rv/VR/s9BSlMsM1kTPEN4DPkU4I8vAO6APOAgsrhq7GO3ri8aUo5ipKIep1zv9AtipgOACGIrLAAAAAElFTkSuQmCC",
"symbolRepeat": "fixed",
"symbolMargin": "5%",
"symbolClip": true,
"symbolSize": 22.5,
"symbolPosition": "start",
"symbolOffset": [
20,
0
],
"symbolBoundingData": 300,
"data": [
13,
42,
67,
81,
86,
],
"z": 10
},
{
"type": "pictorialBar",
"itemStyle": {
"normal": {
"opacity": 0.3
}
},
"label": {
"normal": {
"show": false
}
},
"animationDuration": 0,
"symbolRepeat": "fixed",
"symbolMargin": "5%",
"symbol": "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAADYElEQVR4nO2dz0sUYRjHP7tIdAmxQ1LdlhCKMohAIsgiyEuHjkUEFQTlpejS/xCCBB06RBGBBKIG4cGyH0qHBKE9eKyFqBQPRQeNCt06vGNY7bq7szPfeZLnAwuzM+/zgw/DDvMu70wOIVveLscJOwycA44A24CfwAfgKXAbeFVvovlC/o/vuVwuTj+x0FWiYdGbgXvA8RrjHgAXgIVaCbMU3SKr1BhtwEtgZx1jTwI7gG7ga5pNNUO+9pBMuEN9klfYD9xMqZdEsCj6AHAiRtxZYFeyrSSHRdGnYsblCD8jJrEoek8TsbsT6yJhLIrelFFsqlgUPZtRbKpYFP2kidjxxLpIGIuiB4AvMeLmgJGEe0kMi6I/AVdjxPVSx91hVlgUDXAXuEaY16jFMnAJeJhqR01iVTTAdeAYUFxjzBRwCLgl6agJrM51rDAO7AP2EmbxthPO8vfAc2Ams84axLpoCGKLrH1mm8eC6KPAGaAL2Fpj7AZgY7T9DfhRY/wc4eflPmH+OjOynI8uEGbpukXlJ4Dz84V8aWWHcj46q4thFzCNTjJRren2UrlLWPM3WYjuAMYIk/tq2oCx9lK5Q11YLboFGARaxXVX0woMtpfK0uuTWvRFoFNcsxKdhF5kqEX3iuuthbQXtehG/gdMG2kvlm/B1xUuWoSLFmFF9CRwg2TnM4pRzskEc8bGiugR4ArhNjkpJqKcJv51sSJ63eOiRbhoES5ahIsW4aJFuGgRLlqEixbhokW4aBEuWoSLFuGiRbhoES5ahIsW4aJFuGgRLlqEWvTHKvs/p1izWu5qvaSCWvTlCvtmgeEUaw5TeUVtpV5SQy16COgBRoHXhMWb3aS7PnAhqjEQ1RwFeuYL+aEUa/5DFmtYHkefOEwQVmcBvKD+FQNvgNN/P+pHiV8MRbhoES5ahIsW4aJFuGgRLlqEixbhokW4aBEuWoSLFuGiRbhoES5ahIsW4aJFuGgRLlqEixbhokVYEx3nudGKXE1jTfS6xUWLcNEiXLQIFy3CRYtw0SJctAgXLcJFi3DRIv430eUq2+axJvp7jePPqmzHySXFmuhHwFKVYzNA/6rv/VR/s9BSlMsM1kTPEN4DPkU4I8vAO6APOAgsrhq7GO3ri8aUo5ipKIep1zv9AtipgOACGIrLAAAAAElFTkSuQmCC",
"symbolSize": 22.5,
"symbolBoundingData": 300,
"symbolPosition": "start",
"symbolOffset": [
20,
0
],
"data": [
13,
42,
67,
81,
86,
],
"z": 5
}
]
};
// Make dynamic data.
function random() {
return +(Math.random() * (maxData - 10)).toFixed(1);
}
setInterval(function () {
var dynamicData = [random(), random(), random(), random(),random(), random(), random(), random(),random(),random()];
//myChart.setOption({
// series: [{
// data: dynamicData.slice()
// }, {
// data: dynamicData.slice()
// }]
//})
}, 3000)
//////////////////////收费站收费排行2 end
//收费站收费排行2
var spirit = '../images.ksh45.png';
var maxData = 200;
option41 = {
"title": {
"text": " ",
"left": "center",
"y": "10",
"textStyle": {
"color": "#fff"
}
},
"grid": {
"left": 30,
"top": 0,
"bottom": 10
},
"tooltip": {
"trigger": "item",
"textStyle": {
"fontSize": 12
},
"formatter": "{b0}:{c0}"
},
"xAxis": {
"max": 100,
"splitLine": {
"show": false
},
"axisLine": {
"show": false
},
"axisLabel": {
"show": false
},
"axisTick": {
"show": false
}
},
"yAxis": [
{
"type": "category",
"inverse": false,
"data": [
"朔州",
"大同",
"运城",
"忻州",
"临汾",
],
"axisLine": {
"show": false
},
"axisTick": {
"show": false
},
"axisLabel": {
"margin": -4,
"textStyle": {
"color": "#fff",
"fontSize": 16.25
}
}
},
],
"series": [
{
"type": "pictorialBar",
"symbol": "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAADYElEQVR4nO2dz0sUYRjHP7tIdAmxQ1LdlhCKMohAIsgiyEuHjkUEFQTlpejS/xCCBB06RBGBBKIG4cGyH0qHBKE9eKyFqBQPRQeNCt06vGNY7bq7szPfeZLnAwuzM+/zgw/DDvMu70wOIVveLscJOwycA44A24CfwAfgKXAbeFVvovlC/o/vuVwuTj+x0FWiYdGbgXvA8RrjHgAXgIVaCbMU3SKr1BhtwEtgZx1jTwI7gG7ga5pNNUO+9pBMuEN9klfYD9xMqZdEsCj6AHAiRtxZYFeyrSSHRdGnYsblCD8jJrEoek8TsbsT6yJhLIrelFFsqlgUPZtRbKpYFP2kidjxxLpIGIuiB4AvMeLmgJGEe0kMi6I/AVdjxPVSx91hVlgUDXAXuEaY16jFMnAJeJhqR01iVTTAdeAYUFxjzBRwCLgl6agJrM51rDAO7AP2EmbxthPO8vfAc2Ams84axLpoCGKLrH1mm8eC6KPAGaAL2Fpj7AZgY7T9DfhRY/wc4eflPmH+OjOynI8uEGbpukXlJ4Dz84V8aWWHcj46q4thFzCNTjJRren2UrlLWPM3WYjuAMYIk/tq2oCx9lK5Q11YLboFGARaxXVX0woMtpfK0uuTWvRFoFNcsxKdhF5kqEX3iuuthbQXtehG/gdMG2kvlm/B1xUuWoSLFmFF9CRwg2TnM4pRzskEc8bGiugR4ArhNjkpJqKcJv51sSJ63eOiRbhoES5ahIsW4aJFuGgRLlqEi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0