490 lines
15 KiB
JavaScript
490 lines
15 KiB
JavaScript
let myChart = echarts.init(document.getElementById('echarts-one'));
|
|
let myChart12 = echarts.init(document.getElementById('echarts-one1'));
|
|
let myChart2 = echarts.init(document.getElementById('echarts-two'));
|
|
|
|
function initEchartsOne(value) {
|
|
let option = {
|
|
backgroundColor: 'transparent',
|
|
title: [
|
|
{
|
|
text: value + '%',
|
|
x: 'center',
|
|
y: '40%',
|
|
textStyle: {
|
|
fontSize: 24,
|
|
fontWeight: '600',
|
|
fontFamily: 'Alibaba PuHuiTi R',
|
|
color: '#333',
|
|
},
|
|
},
|
|
{
|
|
text: '今日任务完成率',
|
|
x: 'center',
|
|
y: '54%',
|
|
textStyle: {
|
|
fontSize: 14,
|
|
fontFamily: 'Alibaba PuHuiTi R',
|
|
color: '#333',
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
type: 'liquidFill',
|
|
radius: '63%',
|
|
center: ['50%', '50%'],
|
|
amplitude: 10,
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(27, 192, 179, 0.22)',
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(27, 192, 179, 0.22)',
|
|
},
|
|
],
|
|
},
|
|
data: [0.5, 0.5, 0.44],
|
|
backgroundStyle: {
|
|
borderWidth: 1,
|
|
color: 'rgba(27, 192, 179, 0.06)',
|
|
},
|
|
label: {
|
|
normal: {
|
|
formatter: '',
|
|
},
|
|
},
|
|
outline: {
|
|
show: false,
|
|
},
|
|
},
|
|
{
|
|
type: 'pie',
|
|
clockWise: true,
|
|
hoverAnimation: false,
|
|
radius: ['76%', '80%'],
|
|
center: ['50%', '50%'],
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: false,
|
|
},
|
|
},
|
|
},
|
|
data: [
|
|
{
|
|
value: 100,
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0.2, 1, 0.3, 0, [
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(54, 72, 71, 1)',
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(17, 192, 178, 1)',
|
|
},
|
|
]),
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
type: 'pie',
|
|
silent: true,
|
|
hoverAnimation: false,
|
|
radius: ['90%', '92%'],
|
|
center: ['50%', '50%'],
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: false,
|
|
},
|
|
},
|
|
},
|
|
data: _pie(),
|
|
},
|
|
],
|
|
};
|
|
|
|
function _pie() {
|
|
let dataArr = [];
|
|
for (var i = 0; i < 100; i++) {
|
|
if (i % 2 === 0) {
|
|
dataArr.push({
|
|
value: 10,
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgba(17, 192, 178, 1)',
|
|
},
|
|
},
|
|
});
|
|
} else {
|
|
dataArr.push({
|
|
value: 10,
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgba(0,0,0,0)',
|
|
},
|
|
},
|
|
});
|
|
}
|
|
}
|
|
return dataArr;
|
|
}
|
|
|
|
myChart.setOption(option, true);
|
|
}
|
|
function initEchartsOne1(value) {
|
|
let option = {
|
|
backgroundColor: 'transparent',
|
|
title: [
|
|
{
|
|
text: value + '%',
|
|
x: 'center',
|
|
y: '40%',
|
|
textStyle: {
|
|
fontSize: 24,
|
|
fontWeight: '600',
|
|
fontFamily: 'Alibaba PuHuiTi R',
|
|
color: '#333',
|
|
},
|
|
},
|
|
{
|
|
text: '预警处理完成率',
|
|
x: 'center',
|
|
y: '54%',
|
|
textStyle: {
|
|
fontSize: 14,
|
|
fontFamily: 'Alibaba PuHuiTi R',
|
|
color: '#333',
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
type: 'liquidFill',
|
|
radius: '63%',
|
|
center: ['50%', '50%'],
|
|
amplitude: 10,
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(27, 192, 179, 0.22)',
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(27, 192, 179, 0.22)',
|
|
},
|
|
],
|
|
},
|
|
data: [0.5, 0.5, 0.44],
|
|
backgroundStyle: {
|
|
borderWidth: 1,
|
|
color: 'rgba(27, 192, 179, 0.06)',
|
|
},
|
|
label: {
|
|
normal: {
|
|
formatter: '',
|
|
},
|
|
},
|
|
outline: {
|
|
show: false,
|
|
},
|
|
},
|
|
{
|
|
type: 'pie',
|
|
clockWise: true,
|
|
hoverAnimation: false,
|
|
radius: ['76%', '80%'],
|
|
center: ['50%', '50%'],
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: false,
|
|
},
|
|
},
|
|
},
|
|
data: [
|
|
{
|
|
value: 100,
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0.2, 1, 0.3, 0, [
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(54, 72, 71, 1)',
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(17, 192, 178, 1)',
|
|
},
|
|
]),
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
type: 'pie',
|
|
silent: true,
|
|
hoverAnimation: false,
|
|
radius: ['90%', '92%'],
|
|
center: ['50%', '50%'],
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: false,
|
|
},
|
|
},
|
|
},
|
|
data: _pie(),
|
|
},
|
|
],
|
|
};
|
|
|
|
function _pie() {
|
|
let dataArr = [];
|
|
for (var i = 0; i < 100; i++) {
|
|
if (i % 2 === 0) {
|
|
dataArr.push({
|
|
value: 10,
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgba(17, 192, 178, 1)',
|
|
},
|
|
},
|
|
});
|
|
} else {
|
|
dataArr.push({
|
|
value: 10,
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgba(0,0,0,0)',
|
|
},
|
|
},
|
|
});
|
|
}
|
|
}
|
|
return dataArr;
|
|
}
|
|
|
|
myChart12.setOption(option, true);
|
|
}
|
|
|
|
function initEchartsTwo(val) {
|
|
let demoData = {
|
|
name: '违章发现率',
|
|
value: val,
|
|
};
|
|
let option = {
|
|
backgroundColor: 'transparent',
|
|
title: [{
|
|
text: '{num|' + demoData.value + '%}',
|
|
x: '50%',
|
|
y: '58%',
|
|
textAlign: 'center',
|
|
textStyle: {
|
|
rich: {
|
|
num: {
|
|
fontWeight: '600',
|
|
color: '#02C2A2',
|
|
fontFamily: 'Alibaba PuHuiTi R',
|
|
fontSize: 24,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
text: '违章发现率',
|
|
x: 'center',
|
|
y: '72%',
|
|
textStyle: {
|
|
fontSize: 15,
|
|
fontFamily: 'Alibaba PuHuiTi R',
|
|
color: '#02C2A2',
|
|
}
|
|
}],
|
|
series: [
|
|
{
|
|
type: 'gauge',
|
|
radius: '135%', // 1行3个
|
|
center: ['50%', '90%'],
|
|
splitNumber: 10,
|
|
// min: 0,
|
|
max: 100,
|
|
startAngle: 180,
|
|
endAngle: 0,
|
|
z: 99,
|
|
// 线
|
|
axisLine: {
|
|
lineStyle: {
|
|
width: 1,
|
|
color: [[1, 'rgba(255,255,255,0)']],
|
|
},
|
|
detail: {
|
|
formatter: '{value}',
|
|
},
|
|
data: [
|
|
{
|
|
value: 50,
|
|
name: 'SCORE',
|
|
},
|
|
],
|
|
},
|
|
//刻度标签。
|
|
axisTick: {
|
|
show: true,
|
|
splitNumber: 6, //刻度的段落数
|
|
lineStyle: {
|
|
color: '#02C2A2',
|
|
width: 2, //刻度的宽度
|
|
shadowColor: '#67FFFC',
|
|
shadowBlur: 2,
|
|
},
|
|
length: 2, //刻度的长度
|
|
},
|
|
splitLine: {
|
|
//文字和刻度的偏移量
|
|
show: true,
|
|
length: -10, //长度
|
|
lineStyle: {
|
|
color: '#02C2A2',
|
|
width: 4,
|
|
},
|
|
},
|
|
// //刻度线文字
|
|
axisLabel: {
|
|
show: true,
|
|
color: '#02C2A2',
|
|
fontSize: 16,
|
|
fontFamily: 'Alibaba PuHuiTi R',
|
|
distance: -30,
|
|
},
|
|
data: [
|
|
{
|
|
value: demoData.value,
|
|
name: 'SCORE',
|
|
itemStyle: {
|
|
color: '#02C3A2',
|
|
},
|
|
},
|
|
],
|
|
pointer: {
|
|
show: true,
|
|
length: '12%',
|
|
radius: '50%',
|
|
width: 5, //指针粗细
|
|
offsetCenter: [0, -108]
|
|
},
|
|
detail: {
|
|
show: false
|
|
},
|
|
title: {
|
|
// 仪表盘标题。
|
|
show: false,
|
|
},
|
|
},
|
|
{
|
|
name: demoData.name,
|
|
type: 'pie',
|
|
radius: ['90%', '110%'],
|
|
center: ['50%', '90%'],
|
|
startAngle: 180,
|
|
endAngle: 0,
|
|
color: [
|
|
{
|
|
type: 'linear',
|
|
x: 1,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 0,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: 'transparent', // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 0.5,
|
|
color: '#64BDEB', // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#33A391', // 100% 处的颜色
|
|
},
|
|
|
|
],
|
|
},
|
|
'transparent',
|
|
],
|
|
hoverAnimation: true,
|
|
legendHoverLink: false,
|
|
z: 10,
|
|
labelLine: {
|
|
normal: {
|
|
show: false,
|
|
},
|
|
},
|
|
data: [
|
|
{
|
|
value: (50 * (demoData.value + 10)) / 100,
|
|
},
|
|
{
|
|
value: 100 - (50 * (demoData.value + 10)) / 100,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
type: 'pie',
|
|
hoverAnimation: false,
|
|
label: {
|
|
show: false,
|
|
},
|
|
center: ['50%', '90%'],
|
|
radius: ['0%', '80%'],
|
|
startAngle: 180,
|
|
data: [
|
|
{
|
|
value: 100,
|
|
itemStyle: {
|
|
normal: {
|
|
color: {
|
|
type: 'radial',
|
|
x: 0.5,
|
|
y: 0.5,
|
|
r: 0.5,
|
|
colorStops: [
|
|
{ offset: 0, color: '#00C2EB' },
|
|
{ offset: 1, color: '#094461' },
|
|
],
|
|
},
|
|
opacity: 0.2,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
value: 100,
|
|
color: 'transparent',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
|
|
myChart2.setOption(option, true);
|
|
} |