通用大数据可视化看板模板效果
代码语言：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/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": [
51,
32,
82,
42,
81,
],
"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": [
51,
32,
82,
42,
81,
],
"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
//今日实时收费
var shadowColor = '#374b86';
var value = 80;
option5 = {
title: {
//text: `${value}万辆`,
text: `车辆总数`,
subtext: '',
left: 'center',
top: 'center',//top待调整
textStyle: {
color: '#fff',
fontSize: 16,
fontFamily: 'PingFangSC-Regular'
},
subtextStyle: {
color: '#ff',
fontSize: 14,
fontFamily: 'PingFangSC-Regular',
top: 'center'
},
itemGap: -1//主副标题间距
},
series: [{
name: 'pie1',
type: 'pie',
clockWise: true,
radius: ['65%', '70%'],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
hoverAnimation: false,
data: [{
value: value,
name: 'completed',
itemStyle: {
normal: {
borderWidth: 8,
borderColor: {
colorStops: [{
offset: 0,
color: '#1d54f7' || '#00cefc' // 0% 处的颜色
}, {
offset: 1,
color: '#68eaf9' || '#367bec' // 100% 处的颜色
}]
},
color: { // 完成的圆环的颜色
colorStops: [{
offset: 0,
color: '#1d54f7' || '#00cefc' // 0% 处的颜色
}, {
offset: 1,
color: '#68eaf9' || '#367bec' // 100% 处的颜色
}]
},
label: {
show: false
},
labelLine: {
show: false
}
}
}
}, {
name: 'gap',
value: 100 - value,
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0
}
}
}]
}]
}
var shadowColor = '#374b86';
var value = 85;
option6 = {
title: {
//text: `${value}万辆`,
text: `今日上线`,
subtext: '',
left: 'center',
top: 'center',//top待调整
textStyle: {
color: '#fff',
fontSize: 16,
fontFamily: 'PingFangSC-Regular'
},
subtextStyle: {
color: '#ff',
fontSize: 14,
fontFamily: 'PingFangSC-Regular',
top: 'center'
},
itemGap: -1//主副标题间距
},
series: [{
name: 'pie1',
type: 'pie',
clockWise: true,
radius: ['65%', '70%'],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
hoverAnimation: false,
data: [{
value: value,
name: 'completed',
itemStyle: {
normal: {
borderWidth: 8,
borderColor: {
colorStops: [{
offset: 0,
color: '#02df94' || '#25d6bc' // 0% 处的颜色
}, {
offset: 1,
color: '#28d3d0' || '#14dbaa' // 100% 处的颜色
}]
},
color: { // 完成的圆环的颜色
colorStops: [{
offset: 0,
color: '#02df94' || '#25d6bc' // 0% 处的颜色
}, {
offset: 1,
color: '#28d3d0' || '#14dbaa' // 100% 处的颜色
}]
},
label: {
show: false
},
labelLine: {
show: false
}
}
}
}, {
name: 'gap',
value: 100 - value,
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0
}
}
}]
}]
}
var shadowColor = '#374b86';
var value = 46;
option7 = {
title: {
//text: `${value}万辆`,
text: `今日报警`,
subtext: '',
left: 'center',
top: 'center',//top待调整
textStyle: {
color: '#fff',
fontSize: 16,
fontFamily: 'PingFangSC-Regular'
},
subtextStyle: {
color: '#ff',
fontSize: 14,
fontFamily: 'PingFangSC-Regular',
top: 'center'
},
itemGap: -1//主副标题间距
},
series: [{
name: 'pie1',
type: 'pie',
clockWise: true,
radius: ['65%', '70%'],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
hoverAnimation: false,
data: [{
value: value,
name: 'completed',
itemStyle: {
normal: {
borderWidth: 8,
borderColor: {
colorStops: [{
offset: 0,
color: '#eb3600' || '#cc9a00' // 0% 处的颜色
}, {
offset: 1,
color: '#d0a00e' || '#d0570e' // 100% 处的颜色
}]
},
color: { // 完成的圆环的颜色
colorStops: [{
offset: 0,
color: '#eb3600' || '#cc9a00' // 0% 处的颜色
}, {
offset: 1,
color: '#d0a00e' || '#d0570e' // 100% 处的颜色
}]
},
label: {
show: false
},
labelLine: {
show: false
}
}
}
}, {
name: 'gap',
value: 100 - value,
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0
}
}
}]
}]
}
//////////////////////今日实时收费 end
</script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/echart-china.js"></script>
<script>
var allData = {"citys":[{"name":"延寿","value":[128.331644,45.451897,2],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"临江","value":[126.918087,41.811979,2],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"嘉兴","value":[120.755486,30.746129,4],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"四平","value":[124.350398,43.16642,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"营口","value":[122.235418,40.667012,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"密云","value":[116.801346,40.35874,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"威海","value":[122.12042,37.513068,32],"symbolSize":3,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"杭州","value":[120.15507,30.274085,10],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"集安","value":[126.194031,41.125307,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"贵阳","value":[106.630154,26.647661,2],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"抚顺","value":[123.957208,41.880872,3],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"海门","value":[121.181615,31.871173,2],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"珠海","value":[113.576726,22.270715,9],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"河北","value":[114.475704,38.584854,-19],"symbolSize":2,"itemStyle":{"normal":{"color":"#58B3CC"}}},{"name":"深圳","value":[114.057868,22.543099,14],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"黄浦","value":[121.484443,31.231763,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"蓬莱","value":[120.758848,37.810661,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"吉林","value":[126.549572,43.837883,-364],"symbolSize":14,"itemStyle":{"normal":{"color":"#58B3CC"}}},{"name":"甘肃","value":[103.826308,36.059421,-2],"symbolSize":2,"itemStyle":{"normal":{"color":"#58B3CC"}}},{"name":"龙井","value":[129.427066,42.766311,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"茂名","value":[110.925456,21.662999,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"丹东","value":[124.354707,40.0005,2],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"晋中","value":[112.752695,37.687024,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"浙江","value":[120.152792,30.267447,-2],"symbolSize":2,"itemStyle":{"normal":{"color":"#58B3CC"}}},{"name":"海城","value":[122.685217,40.882377,2],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"溆浦","value":[110.594921,27.908281,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"北京","value":[116.407526,39.90403,-14],"symbolSize":2,"itemStyle":{"normal":{"color":"#58B3CC"}}},{"name":"铁岭","value":[123.726166,42.223769,2],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"大同","value":[113.61244,40.040295,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"金坛","value":[119.597897,31.723247,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"齐齐哈尔","value":[126.661669,45.742347,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"咸阳","value":[108.708991,34.329605,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"四川","value":[104.075931,30.651652,-5],"symbolSize":2,"itemStyle":{"normal":{"color":"#58B3CC"}}},{"name":"福田","value":[114.055036,22.52153,2],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"盘锦","value":[122.070714,41.119997,3],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"中山","value":[113.392782,22.517646,4],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"福建","value":[119.295144,26.10078,-1],"symbolSize":2,"itemStyle":{"normal":{"color":"#58B3CC"}}},{"name":"泰顺","value":[119.717649,27.556884,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"宝山","value":[131.401589,46.577167,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"庆安","value":[127.507825,46.880102,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"海淀","value":[116.298056,39.959912,32],"symbolSize":3,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"大兴","value":[116.341395,39.726929,3],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"桦川","value":[130.719081,47.023001,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"惠州","value":[114.416196,23.111847,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"青岛","value":[120.38264,36.067082,52],"symbolSize":3,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"朝阳","value":[116.443108,39.92147,17],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"沈阳","value":[123.431475,41.805698,41],"symbolSize":3,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"菏泽","value":[115.480656,35.23375,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"南通","value":[120.894291,31.980172,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"南充","value":[106.110698,30.837793,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"双城","value":[126.312745,45.383263,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"南京","value":[118.796877,32.060255,17],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"新疆","value":[87.627704,43.793026,-2],"symbolSize":2,"itemStyle":{"normal":{"color":"#58B3CC"}}},{"name":"成都","value":[104.066541,30.572269,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"陕西","value":[108.954239,34.265472,-2],"symbolSize":2,"itemStyle":{"normal":{"color":"#58B3CC"}}},{"name":"黄岛","value":[120.04619,35.872664,2],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"温州","value":[120.699367,27.994267,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"石家庄","value":[114.51486,38.042307,4],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"邢台","value":[114.504844,37.070589,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"赣州","value":[114.93503,25.831829,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"义乌","value":[120.075058,29.306841,3],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"南昌","value":[115.858198,28.682892,2],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"闵行","value":[121.381709,31.112813,18],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"长宁","value":[121.424624,31.220367,7],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"道里","value":[126.616957,45.755777,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"乳山","value":[121.539765,36.919816,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"双流","value":[103.923648,30.574473,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"广州","value":[113.264435,23.129163,13],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"西城","value":[116.365868,39.912289,4],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"佳木斯","value":[130.318917,46.799923,2],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"皇姑","value":[123.44197,41.824796,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"榆树","value":[126.533146,44.840288,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"临汾","value":[111.518976,36.088005,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"上海","value":[121.473701,31.230416,44],"symbolSize":3,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"内蒙古","value":[111.765618,40.817498,-23],"symbolSize":2,"itemStyle":{"normal":{"color":"#58B3CC"}}},{"name":"尚志","value":[128.009895,45.209586,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"湖里","value":[118.146769,24.512905,1],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},{"name":"台州","value":[121.420757,28.656386,.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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