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,
position: 'top',
}
},
symbol: 'circle',
symbolSize: 5
})
})
return {
seriesArr,
legendArr
}
})()
option1 = {
title: {
show: true,
text: data.title,
subtext: data.subTitle,
link: '1111'
},
tooltip: {
trigger: 'axis',
formatter: function(params) {
var time = '';
var str = '';
for (var i of params) {
time = i.name.replace(/\n/g, '') + '<br/>';
if (i.data == 'null' || i.data == null) {
str += i.seriesName + '：无数据' + '<br/>'
} else {
str += i.seriesName + '：' + i.data + symbol + '%<br/>'
}
}
return time + str;
},
axisPointer: {
type: 'none'
},
},
legend: {
right: data.legendRight || '30%',
top: 0,
right:10,
itemGap: 16,
itemWidth: 10,
itemHeight: 10,
data: myData.legendArr,
textStyle: {
color: '#fff',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12,
}
},
grid: {
x: 0,
y: 30,
x2: 0,
y2: 25,
},
xAxis: {
type: 'category',
data: data.xAxis,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
interval: '0',
textStyle: {
lineHeight:5,
padding: [2, 2, 0, 2],
height: 50,
fontSize: 12,
color:'#fff',
},
rich: {
Sunny: {
height: 50,
padding: [0, 5, 0, 5],
align: 'center',
},
},
formatter: function(params, index) {
var newParamsName = "";
var splitNumber = 5;
var paramsNameNumber = params && params.length;
if (paramsNameNumber && paramsNameNumber <= 4) {
splitNumber = 4;
} else if (paramsNameNumber >= 5 && paramsNameNumber <= 7) {
splitNumber = 4;
} else if (paramsNameNumber >= 8 && paramsNameNumber <= 9) {
splitNumber = 5;
} else if (paramsNameNumber >= 10 && paramsNameNumber <= 14) {
splitNumber = 5;
} else {
params = params && params.slice(0, 15);
}
var provideNumber = splitNumber;
var rowNumber = Math.ceil(paramsNameNumber / provideNumber) || 0;
if (paramsNameNumber > provideNumber) {
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";
var start = p * provideNumber;
var end = start + provideNumber;
if (p == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} else {
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;
}
} else {
newParamsName = params;
}
params = newParamsName
return '{Sunny|' + params + '}';
},
color: '#687284',
},
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: '#F1F3F5',
type: 'solid'
},
interval: 2
},
splitNumber: 4,
},
series: myData.seriesArr
}
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: '#57617B'
}
}
}],
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]
}, ]
};
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
}]
}
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
}]
}
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
}
]
};
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)
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
}
]
};
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)
var shadowColor = '#374b86';
var value = 80;
option5 = {
title: {
text: `车辆总数`,
subtext: '',
left: 'center',
top: 'center',
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'
}, {
offset: 1,
color: '#68eaf9' || '#367bec'
}]
},
color: {
colorStops: [{
offset: 0,
color: '#1d54f7' || '#00cefc'
}, {
offset: 1,
color: '#68eaf9' || '#367bec'
}]
},
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: `今日上线`,
subtext: '',
left: 'center',
top: 'center',
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'
}, {
offset: 1,
color: '#28d3d0' || '#14dbaa'
}]
},
color: {
colorStops: [{
offset: 0,
color: '#02df94' || '#25d6bc'
}, {
offset: 1,
color: '#28d3d0' || '#14dbaa'
}]
},
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: `今日报警`,
subtext: '',
left: 'center',
top: 'center',
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'
}, {
offset: 1,
color: '#d0a00e' || '#d0570e'
}]
},
color: {
colorStops: [{
offset: 0,
color: '#eb3600' || '#cc9a00'
}, {
offset: 1,
color: '#d0a00e' || '#d0570e'
}]
},
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
}
}
}]
}]
}