通用大数据可视化看板模板效果
代码语言: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