You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2099 lines
36 KiB
2099 lines
36 KiB
var myChart_xltj, myChart_xlfx, myChart_xlzs1, myChart_grxlda1, myChart_grxlda2, myChart_grxlda3;
|
|
|
|
layui.use('laydate', function () {
|
|
var laydate = layui.laydate;
|
|
//年月选择器
|
|
laydate.render({
|
|
elem: '#test3',
|
|
type: 'month'
|
|
});
|
|
});
|
|
|
|
$(document).ready(function () {
|
|
myChart_xltj = echarts.init(document.getElementById('xltj'));
|
|
myChart_xlfx = echarts.init(document.getElementById('xlfx'));
|
|
myChart_xlzs1 = echarts.init(document.getElementById('xlzs1'));
|
|
myChart_xlzs2 = echarts.init(document.getElementById('xlzs2'));
|
|
myChart_grxlda1 = echarts.init(document.getElementById('grxlda1'));
|
|
myChart_grxlda2 = echarts.init(document.getElementById('grxlda2'));
|
|
myChart_grxlda3 = echarts.init(document.getElementById('grxlda3'));
|
|
//训练统计
|
|
countXLTJ();
|
|
//训练分析
|
|
countXLFX();
|
|
//训练走势
|
|
countXLZS();
|
|
countXLZS2();
|
|
//训练
|
|
countXL1();
|
|
//训练
|
|
countXL2();
|
|
//训练
|
|
countXL3();
|
|
window.onresize = function () {
|
|
myChart_xltj.resize();
|
|
myChart_xlfx.resize();
|
|
myChart_xlzs1.resize();
|
|
myChart_xlzs2.resize();
|
|
myChart_grxlda1.resize();
|
|
myChart_grxlda2.resize();
|
|
myChart_grxlda3.resize();
|
|
}
|
|
|
|
});
|
|
|
|
//训练科目人数
|
|
function countXLKM() {
|
|
|
|
}
|
|
//训练统计
|
|
function countXLTJ() {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
//var myChart = echarts.init(document.getElementById('xltj'));
|
|
const CubeLeft = echarts.graphic.extendShape({
|
|
shape: {
|
|
x: 0,
|
|
y: 0
|
|
},
|
|
buildPath: function (ctx, shape) {
|
|
const xAxisPoint = shape.xAxisPoint
|
|
const c0 = [shape.x, shape.y]
|
|
const c1 = [shape.x - 6, shape.y - 6]
|
|
const c2 = [xAxisPoint[0] - 6, xAxisPoint[1] - 6]
|
|
const c3 = [xAxisPoint[0], xAxisPoint[1]]
|
|
ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
|
|
}
|
|
})
|
|
const CubeRight = echarts.graphic.extendShape({
|
|
shape: {
|
|
x: 0,
|
|
y: 0
|
|
},
|
|
buildPath: function (ctx, shape) {
|
|
const xAxisPoint = shape.xAxisPoint
|
|
const c1 = [shape.x, shape.y]
|
|
const c2 = [xAxisPoint[0], xAxisPoint[1]]
|
|
const c3 = [xAxisPoint[0] + 12, xAxisPoint[1] - 6]
|
|
const c4 = [shape.x + 12, shape.y - 6]
|
|
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
|
|
}
|
|
})
|
|
const CubeTop = echarts.graphic.extendShape({
|
|
shape: {
|
|
x: 0,
|
|
y: 0
|
|
},
|
|
buildPath: function (ctx, shape) {
|
|
const c1 = [shape.x, shape.y]
|
|
const c2 = [shape.x + 12, shape.y - 6]
|
|
const c3 = [shape.x + 6, shape.y - 12]
|
|
const c4 = [shape.x - 6, shape.y - 6]
|
|
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
|
|
}
|
|
})
|
|
echarts.graphic.registerShape('CubeLeft', CubeLeft)
|
|
echarts.graphic.registerShape('CubeRight', CubeRight)
|
|
echarts.graphic.registerShape('CubeTop', CubeTop)
|
|
const VALUE = [15, 17, 20, 25, 14, 17, 22, 16, 15]
|
|
option = {
|
|
title: {
|
|
text: '',
|
|
top: 32,
|
|
left: 18,
|
|
textStyle: {
|
|
color: '#00F6FF',
|
|
fontSize: 24
|
|
}
|
|
},
|
|
grid: {
|
|
left: 20,
|
|
right: 40,
|
|
bottom: '5%',
|
|
top: '10%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['跳绳', '3公里（1.5公里）', '屈腿仰卧起坐', '俯卧撑', '单杠卷身上', '2分钟双杠臂屈伸',
|
|
'搬运重物折返跑', '搬运重物折返跑', '400米救人疏散物资'
|
|
],
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#19568e'
|
|
}
|
|
},
|
|
offset: 10,
|
|
axisTick: {
|
|
show: false,
|
|
length: 6,
|
|
alignWithLabel: true,
|
|
lineStyle: {
|
|
color: '#19568e'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
fontSize: 14,
|
|
rotate: 40,
|
|
color: '#d6f4ff'
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '单位（次）',
|
|
nameTextStyle: {
|
|
color: "#d6f4ff",
|
|
padding: [0, 0, 0, 0],
|
|
fontSize: 14,
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#19568e'
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
fontSize: 14,
|
|
color: '#d6f4ff'
|
|
},
|
|
boundaryGap: ['20%', '20%']
|
|
},
|
|
series: [{
|
|
type: 'custom',
|
|
renderItem: (params, api) => {
|
|
const location = api.coord([api.value(0), api.value(1)])
|
|
return {
|
|
type: 'group',
|
|
children: [{
|
|
type: 'CubeLeft',
|
|
shape: {
|
|
api,
|
|
xValue: api.value(0),
|
|
yValue: api.value(1),
|
|
x: location[0],
|
|
y: location[1],
|
|
xAxisPoint: api.coord([api.value(0), 0])
|
|
},
|
|
style: {
|
|
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#3B80E2'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#2eeeff'
|
|
}
|
|
])
|
|
}
|
|
}, {
|
|
type: 'CubeRight',
|
|
shape: {
|
|
api,
|
|
xValue: api.value(0),
|
|
yValue: api.value(1),
|
|
x: location[0],
|
|
y: location[1],
|
|
xAxisPoint: api.coord([api.value(0), 0])
|
|
},
|
|
style: {
|
|
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#3B80E2'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#2eeeff'
|
|
}
|
|
])
|
|
}
|
|
}, {
|
|
type: 'CubeTop',
|
|
shape: {
|
|
api,
|
|
xValue: api.value(0),
|
|
yValue: api.value(1),
|
|
x: location[0],
|
|
y: location[1],
|
|
xAxisPoint: api.coord([api.value(0), 0])
|
|
},
|
|
style: {
|
|
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#3B80E2'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#2eeeff'
|
|
}
|
|
])
|
|
}
|
|
}]
|
|
}
|
|
},
|
|
data: VALUE
|
|
}]
|
|
}
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart_xltj.setOption(option);
|
|
|
|
|
|
}
|
|
//训练分析
|
|
function countXLFX() {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
|
var data = {
|
|
city: ["巴楚大队", "英吉沙大队", "泽普大队", "莎车大队", "喀什支队", "喀什市大队", "岳普湖大队", "喀什地区支队", "疏勒大队", "疏附大队", "麦盖提大队", "伽师大队",
|
|
"叶城大队"
|
|
],
|
|
num: ["73.64", "77.86", "96.67", "66.88", "89", "72.11", "60", "89.17", "4.43", "73", "71.67", "57.5",
|
|
"81.67", "57.22"
|
|
]
|
|
}
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
lineStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0,
|
|
color: 'rgba(255,255,255,0)' // 0% 处的颜色
|
|
}, {
|
|
offset: 0.5,
|
|
color: 'rgba(255,255,255,1)' // 100% 处的颜色
|
|
}, {
|
|
offset: 1,
|
|
color: 'rgba(255,255,255,0)' // 100% 处的颜色
|
|
}],
|
|
global: false // 缺省为 false
|
|
}
|
|
},
|
|
},
|
|
|
|
},
|
|
grid: {
|
|
top: '18%',
|
|
left: '10%',
|
|
right: '5%',
|
|
bottom: '10%',
|
|
// containLabel: true
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
boundaryGap: true,
|
|
axisLine: { //坐标轴轴线相关设置。数学上的x轴
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#19568e'
|
|
},
|
|
},
|
|
axisLabel: { //坐标轴刻度标签的相关设置
|
|
textStyle: {
|
|
color: '#d6f4ff',
|
|
margin: 15,
|
|
},
|
|
formatter: function (data) {
|
|
return data
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
data: data.city
|
|
}],
|
|
yAxis: [{
|
|
min: 0,
|
|
max: 100,
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#19568e'
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#19568e"
|
|
}
|
|
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#d6f4ff',
|
|
|
|
},
|
|
formatter: function (value) {
|
|
if (value === 0) {
|
|
return value
|
|
}
|
|
return value + '%'
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
}],
|
|
series: [{
|
|
name: '平均成绩',
|
|
type: 'line',
|
|
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
|
showAllSymbol: true,
|
|
symbolSize: 8,
|
|
lineStyle: {
|
|
normal: {
|
|
color: "#00d9f9", // 线条颜色
|
|
},
|
|
borderColor: 'rgba(0,0,0,.4)',
|
|
},
|
|
itemStyle: {
|
|
color: "rgba(14,30,73,1)",
|
|
borderColor: "#00d9f9",
|
|
borderWidth: 2
|
|
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: "top",
|
|
formatter: [
|
|
' {a|{c}%}',
|
|
].join(','),
|
|
rich: {
|
|
a: {
|
|
color: '#fff',
|
|
align: 'center',
|
|
},
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
show: true
|
|
},
|
|
areaStyle: { //区域填充样式
|
|
normal: {
|
|
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: "rgba(0, 217, 249,.3)"
|
|
|
|
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(10, 217, 249, 0)"
|
|
}
|
|
], false),
|
|
shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
|
|
shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
|
}
|
|
},
|
|
data: data.num
|
|
}]
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart_xlfx.setOption(option);
|
|
|
|
}
|
|
//训练走势
|
|
function countXLZS() {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var getname = ['3-12', '3-11', '3-10', '3-09', '3-08', '3-07', '3-06'];
|
|
var getvalue = [23, 18, 15, 22, 14, 17, 22];
|
|
var getdata = [29, 23, 18, 26, 17, 22, 27];
|
|
|
|
|
|
option = {
|
|
legend: {
|
|
show: true,
|
|
right: 14,
|
|
top: 2,
|
|
itemWidth: 14,
|
|
itemHeight: 4,
|
|
textStyle: {
|
|
color: '#d6f4ff',
|
|
fontSize: 14
|
|
},
|
|
data: ['单杠卷身上', '分钟双杠臂屈伸']
|
|
},
|
|
grid: {
|
|
top: '20%',
|
|
right: '5%',
|
|
left: '10%',
|
|
bottom: '15%'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'none'
|
|
},
|
|
formatter: function (params) {
|
|
return '' + params[0].name + '：<br>' + params[0].seriesName + '：' + params[0].value + '<br>' + params[1]
|
|
.seriesName + '：' + params[1].value
|
|
}
|
|
},
|
|
xAxis: [{
|
|
data: getname,
|
|
axisLabel: {
|
|
interval: 0,
|
|
margin: 10,
|
|
color: '#d6f4ffs',
|
|
textStyle: {
|
|
fontSize: 14
|
|
},
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#19568e',
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
}],
|
|
yAxis: [{
|
|
type: 'value',
|
|
name: '单位（个）',
|
|
nameTextStyle: {
|
|
color: "#d6f4ff",
|
|
padding: [0, 0, 0, 0],
|
|
fontSize: 14,
|
|
},
|
|
max: 30,
|
|
min: 0,
|
|
splitNumber: 3,
|
|
axisLabel: {
|
|
color: '#d6f4ff',
|
|
textStyle: {
|
|
fontSize: 14
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#19568e',
|
|
type: 'dashed'
|
|
}
|
|
}
|
|
}],
|
|
animation: false,
|
|
series: [{
|
|
name: '单杠卷身上',
|
|
type: 'bar',
|
|
data: getvalue,
|
|
barWidth: '12px',
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#f2c409' // 0% 处的颜色
|
|
}, {
|
|
offset: 1,
|
|
color: '#f5804d' // 100% 处的颜色
|
|
}], false),
|
|
barBorderRadius: [6, 6, 0, 0],
|
|
}
|
|
},
|
|
}, {
|
|
name: '分钟双杠臂屈伸',
|
|
type: 'bar',
|
|
data: getdata,
|
|
barWidth: '12px',
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#26ffe8' // 0% 处的颜色
|
|
}, {
|
|
offset: 1,
|
|
color: '#4dcbf5' // 100% 处的颜色
|
|
}], false),
|
|
barBorderRadius: [6, 6, 0, 0],
|
|
}
|
|
},
|
|
}]
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart_xlzs1.setOption(option);
|
|
}
|
|
function countXLZS2() {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
|
var obj = {
|
|
data1: [25, 49, 31, 34, 23, 26, 22],
|
|
data2: [99, 80, 110, 101, 91, 78, 102],
|
|
data3: [111, 143, 124, 122, 148, 106, 116],
|
|
time: ['3-12', '3-11', '3-10', '3-09', '3-08', '3-07', '3-06']
|
|
}
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: ['搬运重物折返跑', '负重登10楼', '400米救人疏散物资'],
|
|
textStyle: {
|
|
color: '#d6f4ff',
|
|
fontSize: '14'
|
|
},
|
|
right: 14,
|
|
top: 2,
|
|
itemWidth: 14,
|
|
itemHeight: 5,
|
|
itemGrap: 0
|
|
},
|
|
color: ['#f3b01d', '#37e9ee', '#006fff'],
|
|
grid: {
|
|
left: '6%',
|
|
right: '5%',
|
|
bottom: '3%',
|
|
top: '30',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: obj.time,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#19568e'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
formatter: '{value}',
|
|
textStyle: {
|
|
color: '#d6f4ff',
|
|
fontSize: '14'
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
max: 150,
|
|
min: 0,
|
|
splitNumber: 3,
|
|
name: '单位（s）',
|
|
nameTextStyle: {
|
|
color: "#d6f4ff",
|
|
padding: [0, 0, 0, 0],
|
|
fontSize: 14,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#19568e'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
formatter: '{value}',
|
|
textStyle: {
|
|
color: '#d6f4ff',
|
|
fontSize: '14'
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
},
|
|
series: [{
|
|
name: '搬运重物折返跑',
|
|
type: 'line',
|
|
symbol: 'circle',
|
|
data: obj.data1
|
|
},
|
|
{
|
|
name: '负重登10楼',
|
|
type: 'line',
|
|
symbol: 'circle',
|
|
data: obj.data2
|
|
},
|
|
{
|
|
name: '400米救人疏散物资',
|
|
type: 'line',
|
|
symbol: 'circle',
|
|
data: obj.data3
|
|
}
|
|
]
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart_xlzs2.setOption(option);
|
|
}
|
|
function countXL1() {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
|
var labelData = [];
|
|
var labelData1 = [];
|
|
for (var i = 0; i < 80; ++i) {
|
|
labelData.push({
|
|
value: 1,
|
|
name: i,
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgba(0,209,228,0)',
|
|
}
|
|
}
|
|
});
|
|
}
|
|
for (var i = 0; i < labelData.length; ++i) {
|
|
if (labelData[i].name < 15) {
|
|
labelData[i].itemStyle = {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 1, 0, 0,
|
|
[{
|
|
offset: 0,
|
|
color: '#6dfbff'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#02aeff'
|
|
}
|
|
]
|
|
)
|
|
},
|
|
|
|
}
|
|
}
|
|
}
|
|
for (var i = 0; i < 80; ++i) {
|
|
labelData1.push({
|
|
value: 1,
|
|
name: i,
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgba(0,209,228,0)',
|
|
}
|
|
}
|
|
});
|
|
}
|
|
for (var i = 0; i < labelData1.length; ++i) {
|
|
if (labelData1[i].name < 80) {
|
|
labelData1[i].itemStyle = {
|
|
normal: {
|
|
color: '#464451',
|
|
},
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
function Pie() {
|
|
var dataArr = [];
|
|
for (var i = 0; i < 100; i++) {
|
|
if (i % 10 === 0) {
|
|
dataArr.push({
|
|
name: (i + 1).toString(),
|
|
value: 30,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(0,255,255,1)",
|
|
borderWidth: 0,
|
|
borderColor: "rgba(0,0,0,0)",
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
dataArr.push({
|
|
name: (i + 1).toString(),
|
|
value: 100,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(0,0,0,0)",
|
|
borderWidth: 0,
|
|
borderColor: "rgba(0,0,0,0)"
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
return dataArr
|
|
}
|
|
|
|
function Pie1() {
|
|
var dataArr = [];
|
|
for (var i = 0; i < 100; i++) {
|
|
if (i % 5 === 0) {
|
|
dataArr.push({
|
|
name: (i + 1).toString(),
|
|
value: 20,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(0,255,255,1)",
|
|
borderWidth: 0,
|
|
borderColor: "rgba(0,0,0,0)"
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
dataArr.push({
|
|
name: (i + 1).toString(),
|
|
value: 100,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(0,0,0,0)",
|
|
borderWidth: 0,
|
|
borderColor: "rgba(0,0,0,0)"
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
return dataArr
|
|
}
|
|
|
|
function Pie2() {
|
|
var dataArr = [];
|
|
for (var i = 0; i < 100; i++) {
|
|
if (i % 5 === 0) {
|
|
dataArr.push({
|
|
name: (i + 1).toString(),
|
|
value: 20,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(0,255,255,.3)",
|
|
borderWidth: 0,
|
|
borderColor: "rgba(0,0,0,0)"
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
dataArr.push({
|
|
name: (i + 1).toString(),
|
|
value: 100,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(0,0,0,0)",
|
|
borderWidth: 0,
|
|
borderColor: "rgba(0,0,0,0)"
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
return dataArr
|
|
}
|
|
|
|
function Pie3() {
|
|
var dataArr = [];
|
|
for (var i = 0; i < 100; i++) {
|
|
if (i % 10 === 0) {
|
|
dataArr.push({
|
|
name: (i + 1).toString(),
|
|
value: 30,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(0,255,255,.5)",
|
|
borderWidth: 0,
|
|
borderColor: "rgba(0,0,0,0)"
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
dataArr.push({
|
|
name: (i + 1).toString(),
|
|
value: 100,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(0,0,0,0)",
|
|
borderWidth: 0,
|
|
borderColor: "rgba(0,0,0,0)"
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
return dataArr
|
|
}
|
|
option = {
|
|
title: [{
|
|
text: '99.375',
|
|
x: '48%',
|
|
y: '42%',
|
|
textAlign: 'center',
|
|
textStyle: {
|
|
fontSize: 24,
|
|
fontWeight: 800,
|
|
color: '#01ffea',
|
|
textAlign: 'center',
|
|
},
|
|
}, {
|
|
text: '平均分',
|
|
left: '43%',
|
|
top: '52%',
|
|
textStyle: {
|
|
fontSize: 14,
|
|
fontWeight: '400',
|
|
color: '#dafefe',
|
|
textAlign: 'left', //right
|
|
|
|
|
|
},
|
|
}, {
|
|
text: '3公里（1.5公里）',
|
|
left: '50%',
|
|
top: '87%',
|
|
textAlign: 'center',
|
|
textStyle: {
|
|
fontSize: '16',
|
|
fontWeight: '400',
|
|
color: '#00c0ff',
|
|
textAlign: 'center',
|
|
},
|
|
}],
|
|
polar: {
|
|
radius: ['47%', '42%'],
|
|
center: ['50%', '50%'],
|
|
},
|
|
angleAxis: {
|
|
max: 100,
|
|
show: false,
|
|
startAngle: 0,
|
|
},
|
|
radiusAxis: {
|
|
type: 'category',
|
|
show: true,
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
},
|
|
series: [
|
|
//里第二圈
|
|
{
|
|
name: '',
|
|
type: 'bar',
|
|
roundCap: true, //圆角
|
|
barWidth: 38,
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
color: '#464451',
|
|
},
|
|
data: [75],
|
|
coordinateSystem: 'polar',
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
|
offset: 0,
|
|
color: '#0ff'
|
|
}, {
|
|
offset: 1,
|
|
color: '#02aeff'
|
|
}]),
|
|
}
|
|
}
|
|
},
|
|
//齿轮蓝圈
|
|
{
|
|
hoverAnimation: false,
|
|
name: 'bb',
|
|
type: 'pie',
|
|
z: 2,
|
|
data: labelData,
|
|
radius: ['50%', '60%'],
|
|
center: ['50%', '50%'],
|
|
zlevel: -2,
|
|
itemStyle: {
|
|
normal: {
|
|
borderColor: '#222222',
|
|
borderWidth: 1,
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
position: 'inside',
|
|
show: false,
|
|
}
|
|
},
|
|
},
|
|
//齿轮灰圈
|
|
{
|
|
hoverAnimation: false,
|
|
type: 'pie',
|
|
z: 1,
|
|
data: labelData1,
|
|
radius: ['50%', '60%'],
|
|
center: ['50%', '50%'],
|
|
zlevel: -2,
|
|
itemStyle: {
|
|
normal: {
|
|
borderColor: '#222222',
|
|
borderWidth: 1,
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
position: 'inside',
|
|
show: false,
|
|
}
|
|
},
|
|
},
|
|
//最里圈
|
|
{
|
|
type: 'pie',
|
|
radius: ['38%', '37%'],
|
|
center: ['50%', '50%'],
|
|
data: [{
|
|
hoverOffset: 1,
|
|
value: 100,
|
|
name: '',
|
|
itemStyle: {
|
|
color: '#ff6189',
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
smooth: true,
|
|
lineStyle: {
|
|
width: 0
|
|
}
|
|
}
|
|
},
|
|
hoverAnimation: false,
|
|
},
|
|
{
|
|
label: {
|
|
show: false
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
smooth: true,
|
|
lineStyle: {
|
|
width: 0
|
|
}
|
|
}
|
|
},
|
|
value: 100 - 75,
|
|
hoverAnimation: false,
|
|
itemStyle: {
|
|
color: '#3c3a48',
|
|
},
|
|
}
|
|
]
|
|
},
|
|
//外圈装饰
|
|
{
|
|
type: 'pie',
|
|
zlevel: 0,
|
|
silent: true,
|
|
radius: ['65%', '63.5%'],
|
|
center: ['50%', '50%'],
|
|
z: 1,
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
},
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
data: Pie()
|
|
},
|
|
{
|
|
type: 'pie',
|
|
zlevel: 0,
|
|
silent: true,
|
|
startAngle: -150,
|
|
radius: ['63.5%', '62%'],
|
|
center: ['50%', '50%'],
|
|
z: 1,
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
},
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
data: Pie3()
|
|
},
|
|
{
|
|
type: 'pie',
|
|
zlevel: 0,
|
|
silent: true,
|
|
startAngle: -140,
|
|
radius: ['65%', '63.5%'],
|
|
center: ['50%', '50%'],
|
|
z: 1,
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
},
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
data: Pie()
|
|
},
|
|
{
|
|
type: 'pie',
|
|
zlevel: 0,
|
|
silent: true,
|
|
radius: ['63%', '61.5%'],
|
|
center: ['50%', '50%'],
|
|
z: 1,
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
},
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
data: Pie1()
|
|
},
|
|
{
|
|
type: 'pie',
|
|
zlevel: 0,
|
|
silent: true,
|
|
startAngle: -140,
|
|
radius: ['63%', '61.5%'],
|
|
center: ['50%', '50%'],
|
|
z: 1,
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
},
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
data: Pie2()
|
|
},
|
|
{
|
|
type: 'pie',
|
|
zlevel: 0,
|
|
silent: true,
|
|
startAngle: -147.5,
|
|
radius: ['63%', '61.5%'],
|
|
center: ['50%', '50%'],
|
|
z: 1,
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
},
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
data: Pie2()
|
|
},
|
|
|
|
]
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart_grxlda1.setOption(option);
|
|
}
|
|
function countXL2() {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
|
var labelData = [];
|
|
var labelData1 = [];
|
|
for (var i = 0; i < 80; ++i) {
|
|
labelData.push({
|
|
value: 1,
|
|
name: i,
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgba(0,209,228,0)',
|
|
}
|
|
}
|
|
});
|
|
}
|
|
for (var i = 0; i < labelData.length; ++i) {
|
|
if (labelData[i].name < 15) {
|
|
labelData[i].itemStyle = {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 1, 0, 0,
|
|
[{
|
|
offset: 0,
|
|
color: '#6dfbff'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#02aeff'
|
|
}
|
|
]
|
|
)
|
|
},
|
|
|
|
}
|
|
}
|
|
}
|
|
for (var i = 0; i < 80; ++i) {
|
|
labelData1.push({
|
|
value: 1,
|
|
name: i,
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgba(0,209,228,0)',
|
|
}
|
|
}
|
|
});
|
|
}
|
|
for (var i = 0; i < labelData1.length; ++i) {
|
|
if (labelData1[i].name < 80) {
|
|
labelData1[i].itemStyle = {
|
|
normal: {
|
|
color: '#464451',
|
|
},
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
function Pie() {
|
|
var dataArr = [];
|
|
for (var i = 0; i < 100; i++) {
|
|
if (i % 10 === 0) {
|
|
dataArr.push({
|
|
name: (i + 1).toString(),
|
|
value: 30,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(0,255,255,1)",
|
|
borderWidth: 0,
|
|
borderColor: "rgba(0,0,0,0)",
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
dataArr.push({
|
|
name: (i + 1).toString(),
|
|
value: 100,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(0,0,0,0)",
|
|
borderWidth: 0,
|
|
borderColor: "rgba(0,0,0,0)"
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
return dataArr
|
|
}
|
|
|
|
function Pie1() {
|
|
var dataArr = [];
|
|
for (var i = 0; i < 100; i++) {
|
|
if (i % 5 === 0) {
|
|
dataArr.push({
|
|
name: (i + 1).toString(),
|
|
value: 20,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(0,255,255,1)",
|
|
borderWidth: 0,
|
|
borderColor: "rgba(0,0,0,0)"
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
dataArr.push({
|
|
name: (i + 1).toString(),
|
|
value: 100,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(0,0,0,0)",
|
|
borderWidth: 0,
|
|
borderColor: "rgba(0,0,0,0)"
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
return dataArr
|
|
}
|
|
|
|
function Pie2() {
|
|
var dataArr = [];
|
|
for (var i = 0; i < 100; i++) {
|
|
if (i % 5 === 0) {
|
|
dataArr.push({
|
|
name: (i + 1).toString(),
|
|
value: 20,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(0,255,255,.3)",
|
|
borderWidth: 0,
|
|
borderColor: "rgba(0,0,0,0)"
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
dataArr.push({
|
|
name: (i + 1).toString(),
|
|
value: 100,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(0,0,0,0)",
|
|
borderWidth: 0,
|
|
borderColor: "rgba(0,0,0,0)"
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
return dataArr
|
|
}
|
|
|
|
function Pie3() {
|
|
var dataArr = [];
|
|
for (var i = 0; i < 100; i++) {
|
|
if (i % 10 === 0) {
|
|
dataArr.push({
|
|
name: (i + 1).toString(),
|
|
value: 30,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(0,255,255,.5)",
|
|
borderWidth: 0,
|
|
borderColor: "rgba(0,0,0,0)"
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
dataArr.push({
|
|
name: (i + 1).toString(),
|
|
value: 100,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(0,0,0,0)",
|
|
borderWidth: 0,
|
|
borderColor: "rgba(0,0,0,0)"
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
return dataArr
|
|
}
|
|
option = {
|
|
title: [{
|
|
text: '99.375',
|
|
x: '48%',
|
|
y: '42%',
|
|
textAlign: 'center',
|
|
textStyle: {
|
|
fontSize: 24,
|
|
fontWeight: 800,
|
|
color: '#01ffea',
|
|
textAlign: 'center',
|
|
},
|
|
}, {
|
|
text: '平均分',
|
|
left: '43%',
|
|
top: '52%',
|
|
textStyle: {
|
|
fontSize: 14,
|
|
fontWeight: '400',
|
|
color: '#dafefe',
|
|
textAlign: 'left', //right
|
|
|
|
|
|
},
|
|
}, {
|
|
text: '3公里（1.5公里）',
|
|
left: '50%',
|
|
top: '87%',
|
|
textAlign: 'center',
|
|
textStyle: {
|
|
fontSize: '16',
|
|
fontWeight: '400',
|
|
color: '#00c0ff',
|
|
textAlign: 'center',
|
|
},
|
|
}],
|
|
polar: {
|
|
radius: ['47%', '42%'],
|
|
center: ['50%', '50%'],
|
|
},
|
|
angleAxis: {
|
|
max: 100,
|
|
show: false,
|
|
startAngle: 0,
|
|
},
|
|
radiusAxis: {
|
|
type: 'category',
|
|
show: true,
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
},
|
|
series: [
|
|
//里第二圈
|
|
{
|
|
name: '',
|
|
type: 'bar',
|
|
roundCap: true, //圆角
|
|
barWidth: 38,
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
color: '#464451',
|
|
},
|
|
data: [75],
|
|
coordinateSystem: 'polar',
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
|
offset: 0,
|
|
color: '#0ff'
|
|
}, {
|
|
offset: 1,
|
|
color: '#02aeff'
|
|
}]),
|
|
}
|
|
}
|
|
},
|
|
//齿轮蓝圈
|
|
{
|
|
hoverAnimation: false,
|
|
name: 'bb',
|
|
type: 'pie',
|
|
z: 2,
|
|
data: labelData,
|
|
radius: ['50%', '60%'],
|
|
center: ['50%', '50%'],
|
|
zlevel: -2,
|
|
itemStyle: {
|
|
normal: {
|
|
borderColor: '#222222',
|
|
borderWidth: 1,
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
position: 'inside',
|
|
show: false,
|
|
}
|
|
},
|
|
},
|
|
//齿轮灰圈
|
|
{
|
|
hoverAnimation: false,
|
|
type: 'pie',
|
|
z: 1,
|
|
data: labelData1,
|
|
radius: ['50%', '60%'],
|
|
center: ['50%', '50%'],
|
|
zlevel: -2,
|
|
itemStyle: {
|
|
normal: {
|
|
borderColor: '#222222',
|
|
borderWidth: 1,
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
position: 'inside',
|
|
show: false,
|
|
}
|
|
},
|
|
},
|
|
//最里圈
|
|
{
|
|
type: 'pie',
|
|
radius: ['38%', '37%'],
|
|
center: ['50%', '50%'],
|
|
data: [{
|
|
hoverOffset: 1,
|
|
value: 100,
|
|
name: '',
|
|
itemStyle: {
|
|
color: '#ff6189',
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
smooth: true,
|
|
lineStyle: {
|
|
width: 0
|
|
}
|
|
}
|
|
},
|
|
hoverAnimation: false,
|
|
},
|
|
{
|
|
label: {
|
|
show: false
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
smooth: true,
|
|
lineStyle: {
|
|
width: 0
|
|
}
|
|
}
|
|
},
|
|
value: 100 - 75,
|
|
hoverAnimation: false,
|
|
itemStyle: {
|
|
color: '#3c3a48',
|
|
},
|
|
}
|
|
]
|
|
},
|
|
//外圈装饰
|
|
{
|
|
type: 'pie',
|
|
zlevel: 0,
|
|
silent: true,
|
|
radius: ['65%', '63.5%'],
|
|
center: ['50%', '50%'],
|
|
z: 1,
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
},
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
data: Pie()
|
|
},
|
|
{
|
|
type: 'pie',
|
|
zlevel: 0,
|
|
silent: true,
|
|
startAngle: -150,
|
|
radius: ['63.5%', '62%'],
|
|
center: ['50%', '50%'],
|
|
z: 1,
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
},
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
data: Pie3()
|
|
},
|
|
{
|
|
type: 'pie',
|
|
zlevel: 0,
|
|
silent: true,
|
|
startAngle: -140,
|
|
radius: ['65%', '63.5%'],
|
|
center: ['50%', '50%'],
|
|
z: 1,
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
},
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
data: Pie()
|
|
},
|
|
{
|
|
type: 'pie',
|
|
zlevel: 0,
|
|
silent: true,
|
|
radius: ['63%', '61.5%'],
|
|
center: ['50%', '50%'],
|
|
z: 1,
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
},
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
data: Pie1()
|
|
},
|
|
{
|
|
type: 'pie',
|
|
zlevel: 0,
|
|
silent: true,
|
|
startAngle: -140,
|
|
radius: ['63%', '61.5%'],
|
|
center: ['50%', '50%'],
|
|
z: 1,
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
},
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
data: Pie2()
|
|
},
|
|
{
|
|
type: 'pie',
|
|
zlevel: 0,
|
|
silent: true,
|
|
startAngle: -147.5,
|
|
radius: ['63%', '61.5%'],
|
|
center: ['50%', '50%'],
|
|
z: 1,
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
},
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
data: Pie2()
|
|
},
|
|
|
|
]
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart_grxlda2.setOption(option);
|
|
}
|
|
|
|
|
|
function countXL3() {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
|
var labelData = [];
|
|
var labelData1 = [];
|
|
for (var i = 0; i < 80; ++i) {
|
|
labelData.push({
|
|
value: 1,
|
|
name: i,
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgba(0,209,228,0)',
|
|
}
|
|
}
|
|
});
|
|
}
|
|
for (var i = 0; i < labelData.length; ++i) {
|
|
if (labelData[i].name < 15) {
|
|
labelData[i].itemStyle = {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 1, 0, 0,
|
|
[{
|
|
offset: 0,
|
|
color: '#6dfbff'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#02aeff'
|
|
}
|
|
]
|
|
)
|
|
},
|
|
|
|
}
|
|
}
|
|
}
|
|
for (var i = 0; i < 80; ++i) {
|
|
labelData1.push({
|
|
value: 1,
|
|
name: i,
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgba(0,209,228,0)',
|
|
}
|
|
}
|
|
});
|
|
}
|
|
for (var i = 0; i < labelData1.length; ++i) {
|
|
if (labelData1[i].name < 80) {
|
|
labelData1[i].itemStyle = {
|
|
normal: {
|
|
color: '#464451',
|
|
},
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
function Pie() {
|
|
var dataArr = [];
|
|
for (var i = 0; i < 100; i++) {
|
|
if (i % 10 === 0) {
|
|
dataArr.push({
|
|
name: (i + 1).toString(),
|
|
value: 30,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(0,255,255,1)",
|
|
borderWidth: 0,
|
|
borderColor: "rgba(0,0,0,0)",
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
dataArr.push({
|
|
name: (i + 1).toString(),
|
|
value: 100,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(0,0,0,0)",
|
|
borderWidth: 0,
|
|
borderColor: "rgba(0,0,0,0)"
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
return dataArr
|
|
}
|
|
|
|
function Pie1() {
|
|
var dataArr = [];
|
|
for (var i = 0; i < 100; i++) {
|
|
if (i % 5 === 0) {
|
|
dataArr.push({
|
|
name: (i + 1).toString(),
|
|
value: 20,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(0,255,255,1)",
|
|
borderWidth: 0,
|
|
borderColor: "rgba(0,0,0,0)"
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
dataArr.push({
|
|
name: (i + 1).toString(),
|
|
value: 100,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(0,0,0,0)",
|
|
borderWidth: 0,
|
|
borderColor: "rgba(0,0,0,0)"
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
return dataArr
|
|
}
|
|
|
|
function Pie2() {
|
|
var dataArr = [];
|
|
for (var i = 0; i < 100; i++) {
|
|
if (i % 5 === 0) {
|
|
dataArr.push({
|
|
name: (i + 1).toString(),
|
|
value: 20,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(0,255,255,.3)",
|
|
borderWidth: 0,
|
|
borderColor: "rgba(0,0,0,0)"
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
dataArr.push({
|
|
name: (i + 1).toString(),
|
|
value: 100,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(0,0,0,0)",
|
|
borderWidth: 0,
|
|
borderColor: "rgba(0,0,0,0)"
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
return dataArr
|
|
}
|
|
|
|
function Pie3() {
|
|
var dataArr = [];
|
|
for (var i = 0; i < 100; i++) {
|
|
if (i % 10 === 0) {
|
|
dataArr.push({
|
|
name: (i + 1).toString(),
|
|
value: 30,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(0,255,255,.5)",
|
|
borderWidth: 0,
|
|
borderColor: "rgba(0,0,0,0)"
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
dataArr.push({
|
|
name: (i + 1).toString(),
|
|
value: 100,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(0,0,0,0)",
|
|
borderWidth: 0,
|
|
borderColor: "rgba(0,0,0,0)"
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
return dataArr
|
|
}
|
|
option = {
|
|
title: [{
|
|
text: '99.375',
|
|
x: '48%',
|
|
y: '42%',
|
|
textAlign: 'center',
|
|
textStyle: {
|
|
fontSize: 24,
|
|
fontWeight: 800,
|
|
color: '#01ffea',
|
|
textAlign: 'center',
|
|
},
|
|
}, {
|
|
text: '平均分',
|
|
left: '43%',
|
|
top: '52%',
|
|
textStyle: {
|
|
fontSize: 14,
|
|
fontWeight: '400',
|
|
color: '#dafefe',
|
|
textAlign: 'left', //right
|
|
|
|
|
|
},
|
|
}, {
|
|
text: '3公里（1.5公里）',
|
|
left: '50%',
|
|
top: '87%',
|
|
textAlign: 'center',
|
|
textStyle: {
|
|
fontSize: '16',
|
|
fontWeight: '400',
|
|
color: '#00c0ff',
|
|
textAlign: 'center',
|
|
},
|
|
}],
|
|
polar: {
|
|
radius: ['47%', '42%'],
|
|
center: ['50%', '50%'],
|
|
},
|
|
angleAxis: {
|
|
max: 100,
|
|
show: false,
|
|
startAngle: 0,
|
|
},
|
|
radiusAxis: {
|
|
type: 'category',
|
|
show: true,
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
},
|
|
series: [
|
|
//里第二圈
|
|
{
|
|
name: '',
|
|
type: 'bar',
|
|
roundCap: true, //圆角
|
|
barWidth: 38,
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
color: '#464451',
|
|
},
|
|
data: [75],
|
|
coordinateSystem: 'polar',
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
|
offset: 0,
|
|
color: '#0ff'
|
|
}, {
|
|
offset: 1,
|
|
color: '#02aeff'
|
|
}]),
|
|
}
|
|
}
|
|
},
|
|
//齿轮蓝圈
|
|
{
|
|
hoverAnimation: false,
|
|
name: 'bb',
|
|
type: 'pie',
|
|
z: 2,
|
|
data: labelData,
|
|
radius: ['50%', '60%'],
|
|
center: ['50%', '50%'],
|
|
zlevel: -2,
|
|
itemStyle: {
|
|
normal: {
|
|
borderColor: '#222222',
|
|
borderWidth: 1,
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
position: 'inside',
|
|
show: false,
|
|
}
|
|
},
|
|
},
|
|
//齿轮灰圈
|
|
{
|
|
hoverAnimation: false,
|
|
type: 'pie',
|
|
z: 1,
|
|
data: labelData1,
|
|
radius: ['50%', '60%'],
|
|
center: ['50%', '50%'],
|
|
zlevel: -2,
|
|
itemStyle: {
|
|
normal: {
|
|
borderColor: '#222222',
|
|
borderWidth: 1,
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
position: 'inside',
|
|
show: false,
|
|
}
|
|
},
|
|
},
|
|
//最里圈
|
|
{
|
|
type: 'pie',
|
|
radius: ['38%', '37%'],
|
|
center: ['50%', '50%'],
|
|
data: [{
|
|
hoverOffset: 1,
|
|
value: 100,
|
|
name: '',
|
|
itemStyle: {
|
|
color: '#ff6189',
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
smooth: true,
|
|
lineStyle: {
|
|
width: 0
|
|
}
|
|
}
|
|
},
|
|
hoverAnimation: false,
|
|
},
|
|
{
|
|
label: {
|
|
show: false
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
smooth: true,
|
|
lineStyle: {
|
|
width: 0
|
|
}
|
|
}
|
|
},
|
|
value: 100 - 75,
|
|
hoverAnimation: false,
|
|
itemStyle: {
|
|
color: '#3c3a48',
|
|
},
|
|
}
|
|
]
|
|
},
|
|
//外圈装饰
|
|
{
|
|
type: 'pie',
|
|
zlevel: 0,
|
|
silent: true,
|
|
radius: ['65%', '63.5%'],
|
|
center: ['50%', '50%'],
|
|
z: 1,
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
},
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
data: Pie()
|
|
},
|
|
{
|
|
type: 'pie',
|
|
zlevel: 0,
|
|
silent: true,
|
|
startAngle: -150,
|
|
radius: ['63.5%', '62%'],
|
|
center: ['50%', '50%'],
|
|
z: 1,
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
},
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
data: Pie3()
|
|
},
|
|
{
|
|
type: 'pie',
|
|
zlevel: 0,
|
|
silent: true,
|
|
startAngle: -140,
|
|
radius: ['65%', '63.5%'],
|
|
center: ['50%', '50%'],
|
|
z: 1,
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
},
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
data: Pie()
|
|
},
|
|
{
|
|
type: 'pie',
|
|
zlevel: 0,
|
|
silent: true,
|
|
radius: ['63%', '61.5%'],
|
|
center: ['50%', '50%'],
|
|
z: 1,
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
},
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
data: Pie1()
|
|
},
|
|
{
|
|
type: 'pie',
|
|
zlevel: 0,
|
|
silent: true,
|
|
startAngle: -140,
|
|
radius: ['63%', '61.5%'],
|
|
center: ['50%', '50%'],
|
|
z: 1,
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
},
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
data: Pie2()
|
|
},
|
|
{
|
|
type: 'pie',
|
|
zlevel: 0,
|
|
silent: true,
|
|
startAngle: -147.5,
|
|
radius: ['63%', '61.5%'],
|
|
center: ['50%', '50%'],
|
|
z: 1,
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
},
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
data: Pie2()
|
|
},
|
|
|
|
]
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart_grxlda3.setOption(option);
|
|
}
|
|
|
|
|