918 lines
28 KiB
JavaScript
918 lines
28 KiB
JavaScript
let myChart = echarts.init(document.getElementById('echarts-one'));
|
||
let myChart2 = echarts.init(document.getElementById('echarts-two'));
|
||
let myChart3 = echarts.init(document.getElementById('echarts-three'));
|
||
function initOneCharts(list) {
|
||
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#000';
|
||
let nameList = []; // x轴数据
|
||
let values = [];
|
||
let values2 = [];
|
||
let valueList = [];
|
||
$.each(list, function (index, item) {
|
||
nameList.push(item.yearMonth);
|
||
values.push(item.value);
|
||
values2.push(item.value2);
|
||
})
|
||
nameList = nameList.reverse(),values = values.reverse(),values2 = values2.reverse();
|
||
valueList[0] = values, valueList[1] = values2;
|
||
const legend = ['运输车辆', '吊车'];
|
||
const yName = ''; // y轴名称
|
||
const unit = '辆';
|
||
/* 颜色 */
|
||
const colorList = ['#397ef0', '#ff9900']; // 主颜色系
|
||
const areaColorList = [
|
||
{
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: '#397ef030' // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(0, 117, 255, 0)' // 100% 处的颜色
|
||
}
|
||
],
|
||
global: false // 缺省为 false
|
||
},
|
||
{
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: '#ff990030' // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(255, 179, 31, 0)' // 100% 处的颜色
|
||
}
|
||
],
|
||
global: false // 缺省为 false
|
||
}
|
||
]; // 渐变空间颜色
|
||
|
||
/* 数据整理 */
|
||
// 获取拐点数据
|
||
const getLineDataAll = () => {
|
||
let dataArr = []; // 拐点数据
|
||
let arr1 = [];
|
||
let arr2 = [];
|
||
nameList.map((item, index) => {
|
||
// 判断大小显示label
|
||
// arr1
|
||
if (Number(valueList[0][index]) > Number(valueList[1][index])) {
|
||
arr1.push({
|
||
value: valueList[0][index],
|
||
label: {
|
||
show: true,
|
||
z: 3,
|
||
position: 'top',
|
||
opacity: 1,
|
||
backgroundColor: 'transparent',
|
||
offset: [0, -8],
|
||
borderRadius: 2,
|
||
formatter: (params) => {
|
||
return `{a|${valueList[0][index]}}\n{b|${valueList[1][index]}}`;
|
||
},
|
||
rich: {
|
||
a: {
|
||
fontSize: 14,
|
||
color: '#397ef0',
|
||
fontFamily: fontFamily,
|
||
padding: [4, 2, 2, 2]
|
||
},
|
||
b: {
|
||
fontSize: 14,
|
||
color: '#ff9900',
|
||
fontFamily: fontFamily,
|
||
padding: [2, 2, 0, 2]
|
||
}
|
||
}
|
||
},
|
||
emphasis: {
|
||
scale: 2,
|
||
itemStyle: {
|
||
borderWidth: 3
|
||
},
|
||
label: {
|
||
opacity: 1,
|
||
rich: {
|
||
a: {
|
||
fontSize: 14,
|
||
color: '#397ef0',
|
||
fontFamily: fontFamily,
|
||
padding: [4, 2, 2, 2]
|
||
},
|
||
b: {
|
||
fontSize: 14,
|
||
color: '#ff9900',
|
||
fontFamily: fontFamily,
|
||
padding: [2, 2, 0, 2]
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
arr1.push({
|
||
value: valueList[0][index],
|
||
emphasis: {
|
||
scale: 2,
|
||
itemStyle: {
|
||
borderWidth: 3
|
||
}
|
||
}
|
||
});
|
||
}
|
||
// arr2
|
||
if (Number(valueList[1][index]) > Number(valueList[0][index])) {
|
||
arr2.push({
|
||
value: valueList[1][index],
|
||
label: {
|
||
show: true,
|
||
z: 3,
|
||
position: 'top',
|
||
opacity: 1,
|
||
backgroundColor: 'transparent',
|
||
offset: [0, -8],
|
||
borderRadius: 2,
|
||
formatter: (params) => {
|
||
return `{b|${valueList[1][index]}}\n{a|${valueList[0][index]}}`;
|
||
},
|
||
rich: {
|
||
a: {
|
||
fontSize: 14,
|
||
color: '#397ef0',
|
||
fontFamily: fontFamily,
|
||
padding: [2, 2, 0, 2]
|
||
},
|
||
b: {
|
||
fontSize: 14,
|
||
color: '#ff9900',
|
||
fontFamily: fontFamily,
|
||
padding: [4, 2, 0, 2]
|
||
}
|
||
}
|
||
},
|
||
emphasis: {
|
||
scale: 2,
|
||
itemStyle: {
|
||
borderWidth: 3
|
||
},
|
||
label: {
|
||
opacity: 1,
|
||
rich: {
|
||
a: {
|
||
fontSize: 14,
|
||
color: '#397ef0',
|
||
fontFamily: fontFamily,
|
||
padding: [2, 2, 0, 2]
|
||
},
|
||
b: {
|
||
fontSize: 14,
|
||
color: '#ff9900',
|
||
fontFamily: fontFamily,
|
||
padding: [4, 2, 0, 2]
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
arr2.push({
|
||
value: valueList[1][index],
|
||
emphasis: {
|
||
scale: 2,
|
||
itemStyle: {
|
||
borderWidth: 3
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
dataArr.push(arr1);
|
||
dataArr.push(arr2);
|
||
return dataArr;
|
||
};
|
||
// 获取单条
|
||
const getLineDataSingle = () => {
|
||
let dataArr = []; // 拐点数据
|
||
let arr1 = [];
|
||
let arr2 = [];
|
||
nameList.map((item, index) => {
|
||
// 判断大小显示label
|
||
// arr1
|
||
arr1.push({
|
||
value: valueList[0][index],
|
||
label: {
|
||
show: true,
|
||
z: 3,
|
||
position: 'top',
|
||
opacity: 1,
|
||
backgroundColor: 'transparent',
|
||
offset: [0, -8],
|
||
borderRadius: 2,
|
||
formatter: (params) => {
|
||
return `{a|${valueList[0][index]}}`;
|
||
},
|
||
rich: {
|
||
a: {
|
||
fontSize: 14,
|
||
color: '#397ef0',
|
||
fontFamily: fontFamily,
|
||
padding: [4, 2, 2, 2]
|
||
}
|
||
}
|
||
},
|
||
emphasis: {
|
||
scale: 2,
|
||
itemStyle: {
|
||
borderWidth: 3
|
||
},
|
||
label: {
|
||
opacity: 1,
|
||
rich: {
|
||
a: {
|
||
fontSize: 14,
|
||
color: '#397ef0',
|
||
fontFamily: fontFamily,
|
||
padding: [4, 2, 2, 2]
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
// arr2
|
||
arr2.push({
|
||
value: valueList[1][index],
|
||
label: {
|
||
show: true,
|
||
z: 3,
|
||
position: 'top',
|
||
opacity: 1,
|
||
backgroundColor: 'transparent',
|
||
offset: [0, -8],
|
||
borderRadius: 2,
|
||
formatter: (params) => {
|
||
return `{b|${valueList[1][index]}}`;
|
||
},
|
||
rich: {
|
||
b: {
|
||
fontSize: 14,
|
||
color: '#ff9900',
|
||
fontFamily: fontFamily,
|
||
padding: [4, 2, 0, 2]
|
||
}
|
||
}
|
||
},
|
||
emphasis: {
|
||
scale: 2,
|
||
itemStyle: {
|
||
borderWidth: 3
|
||
},
|
||
label: {
|
||
opacity: 1,
|
||
rich: {
|
||
b: {
|
||
fontSize: 14,
|
||
color: '#ff9900',
|
||
fontFamily: fontFamily,
|
||
padding: [4, 2, 0, 2]
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
});
|
||
dataArr.push(arr1);
|
||
dataArr.push(arr2);
|
||
return dataArr;
|
||
};
|
||
let dataList = getLineDataAll();
|
||
|
||
let legendData = []; // legend数据
|
||
let seriesData = []; // series数据
|
||
legend.map((item, index) => {
|
||
legendData.push({
|
||
name: item,
|
||
icon: 'circle',
|
||
itemStyle: {
|
||
color: '#FFFFFF',
|
||
borderColor: colorList[index],
|
||
borderWidth: 3
|
||
}
|
||
});
|
||
seriesData.push({
|
||
name: item,
|
||
yAxisIndex: 0,
|
||
type: 'line',
|
||
silent: true,
|
||
z: 2,
|
||
data: dataList[index],
|
||
symbolSize: 8, //标记的大小
|
||
lineStyle: {
|
||
color: colorList[index],
|
||
width: 3
|
||
},
|
||
itemStyle: {
|
||
//折线拐点标志的样式
|
||
color: colorList[index],
|
||
borderColor: colorList[index],
|
||
borderWidth: 1
|
||
},
|
||
areaStyle: {
|
||
color: areaColorList[index]
|
||
}
|
||
});
|
||
});
|
||
let valueMax = 0;
|
||
[...valueList[0], ...valueList[1]].map((item) => {
|
||
if (Number(item) > valueMax) {
|
||
valueMax = Number(item);
|
||
}
|
||
});
|
||
seriesData.push({
|
||
name: 'bgBar',
|
||
type: 'bar',
|
||
// silent: true,
|
||
yAxisIndex: 1,
|
||
z: 1,
|
||
data: nameList.map((item) => {
|
||
return {
|
||
value: valueMax + 0.2 * valueMax,
|
||
itemStyle: {
|
||
color: 'rgba(57,126,240,0)'
|
||
}
|
||
};
|
||
})
|
||
// barWidth: 33
|
||
});
|
||
|
||
const option = {
|
||
backgroundColor: 'transparent',
|
||
tooltip: {
|
||
trigger: 'none',
|
||
axisPointer: {
|
||
type: 'none',
|
||
shadowStyle: {
|
||
color: 'rgba(57, 126, 240, 0.2)'
|
||
}
|
||
},
|
||
showContent: false,
|
||
position: function (point, params, dom, rect, size) {
|
||
// 提示框位置
|
||
let x = 0;
|
||
let y = 0;
|
||
//提示框定位
|
||
if (point[0] + size.contentSize[0] < size.viewSize[0]) {
|
||
x = point[0];
|
||
} else if (point[0] > size.contentSize[0]) {
|
||
x = point[0] - size.contentSize[0];
|
||
} else {
|
||
x = '30%';
|
||
}
|
||
if (point[1] > size.contentSize[1]) {
|
||
y = point[1] - size.contentSize[1];
|
||
} else if (point[1] + size.contentSize[1] < size.viewSize[1]) {
|
||
y = point[1];
|
||
} else {
|
||
y = '30%';
|
||
}
|
||
return [x, y];
|
||
},
|
||
formatter: (params) => {
|
||
let currenrName = params[0].name;
|
||
let currenrTypeList = params.filter((item) => item.seriesName);
|
||
let childDiv = `<div>`;
|
||
legend.map((item, index) => {
|
||
params.map((item2, index2) => {
|
||
if (item2.seriesName === item) {
|
||
childDiv += `
|
||
<div style="margin-top: 4px;position:relative;">
|
||
<div style="width: 6px;height: 6px;background: #FFFFFF;border: 3px solid ${colorList[index]};position:absolute;top:50%;transform:translateY(-50%);left:0;border-radius:50%;"></div>
|
||
<span style="margin:0 0 0 20px;font-size: 12px;font-family: Source Han Sans CN-Regular;font-weight: 400;color: #FFFFFF;">${item}：${params[index2].value}${unit}</span>
|
||
</div>
|
||
`;
|
||
}
|
||
});
|
||
});
|
||
childDiv += `</div>`;
|
||
return `
|
||
<div style="font-size: 12px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #FFFFFF;margin-bottom:4px;">${currenrName}</div>
|
||
${childDiv}
|
||
`;
|
||
},
|
||
extraCssText:
|
||
'background-color:rgba(0,13,35,0.9);padding:8px 12px;box-shadow: 1px 6px 15px 1px rgba(0,0,0,0.13);border-radius: 4px;filter: blur(undefinedpx);border:none;'
|
||
},
|
||
legend: {
|
||
data: legendData,
|
||
// top: 16,
|
||
// left: 0,
|
||
itemWidth: 9,
|
||
itemHeight: 9,
|
||
itemGap: 16,
|
||
textStyle: {
|
||
fontSize: 12,
|
||
color: '#000',
|
||
fontFamily: fontFamily,
|
||
padding: [0, 0, 0, 4]
|
||
}
|
||
},
|
||
grid: {
|
||
left: '24',
|
||
right: '24',
|
||
top: '50',
|
||
bottom: '12',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: nameList,
|
||
axisTick: {
|
||
show: false //隐藏X轴刻度
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#999'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
margin: 12,
|
||
textStyle: {
|
||
fontSize: 12,
|
||
color: '#000', //X轴文字颜色
|
||
fontFamily: fontFamily,
|
||
fontWeight: 400
|
||
}
|
||
}
|
||
},
|
||
yAxis: [
|
||
{
|
||
boundaryGap: ['0', '20%'],
|
||
name: yName,
|
||
nameTextStyle: {
|
||
fontSize: 12,
|
||
color: '#000', //X轴文字颜色
|
||
fontFamily: fontFamily,
|
||
align: 'left',
|
||
verticalAlign: 'center'
|
||
},
|
||
type: 'value',
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
width: 1,
|
||
color: '#999'
|
||
}
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
fontSize: 12,
|
||
color: '#000',
|
||
fontFamily: fontFamily
|
||
},
|
||
splitArea: {
|
||
show: false
|
||
}
|
||
},
|
||
{
|
||
boundaryGap: ['0', '10%'],
|
||
position: 'right',
|
||
max: valueMax + 0.2 * valueMax,
|
||
type: 'value',
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
show: false
|
||
},
|
||
splitArea: {
|
||
show: false
|
||
}
|
||
}
|
||
],
|
||
series: seriesData
|
||
};
|
||
// 图例legend改变时
|
||
console.log(seriesData);
|
||
myChart.on('legendselectchanged', (params) => {
|
||
let selectArr = []; // 当前选中数据
|
||
let lineData = []; // 折线图数据
|
||
legend.map((item) => {
|
||
if (params.selected[item]) {
|
||
selectArr.push(item);
|
||
}
|
||
});
|
||
if (selectArr.length < 2) {
|
||
lineData = getLineDataSingle();
|
||
} else {
|
||
lineData = getLineDataAll();
|
||
}
|
||
myChart.setOption({
|
||
series: [
|
||
{
|
||
name: legend[0],
|
||
data: lineData[0]
|
||
},
|
||
{
|
||
name: legend[1],
|
||
data: lineData[1]
|
||
}
|
||
]
|
||
});
|
||
console.log('图例', lineData, selectArr, seriesData);
|
||
});
|
||
|
||
// 鼠标移入
|
||
myChart.on('mouseover', (params) => {
|
||
const currentIndex = params.dataIndex;
|
||
myChart.dispatchAction({
|
||
type: 'downplay',
|
||
seriesName: legend
|
||
});
|
||
myChart.dispatchAction({
|
||
type: 'highlight',
|
||
seriesName: legend,
|
||
dataIndex: currentIndex
|
||
});
|
||
myChart.setOption({
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
showContent: true
|
||
},
|
||
series: [
|
||
{
|
||
name: 'bgBar',
|
||
data: nameList.map((item, index) => {
|
||
if (index === currentIndex) {
|
||
return {
|
||
value: valueMax + 0.2 * valueMax,
|
||
itemStyle: {
|
||
color: 'rgba(57,126,240,0.2)'
|
||
}
|
||
};
|
||
} else {
|
||
return {
|
||
value: valueMax + 0.2 * valueMax,
|
||
itemStyle: {
|
||
color: 'rgba(57,126,240,0)'
|
||
}
|
||
};
|
||
}
|
||
})
|
||
}
|
||
]
|
||
});
|
||
});
|
||
// 鼠标移出
|
||
myChart.on('mouseout', (params) => {
|
||
let currentIndex = params.dataIndex;
|
||
count = params.dataIndex + 1;
|
||
myChart.setOption({
|
||
tooltip: {
|
||
trigger: 'none',
|
||
showContent: false
|
||
},
|
||
series: [
|
||
{
|
||
name: 'bgBar',
|
||
data: nameList.map((item, index) => {
|
||
return {
|
||
value: valueMax + 0.2 * valueMax,
|
||
itemStyle: {
|
||
color: 'rgba(57,126,240,0)'
|
||
}
|
||
};
|
||
})
|
||
}
|
||
]
|
||
});
|
||
});
|
||
|
||
myChart.setOption(option, true);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
}
|
||
|
||
// 租赁金额（运输车辆）
|
||
function initTwoCharts(obj) {
|
||
const dataInfo = {
|
||
status: '￥' + obj.payMoney,
|
||
value: obj.progress
|
||
}
|
||
const color = '#3592FE'
|
||
const option = {
|
||
backgroundColor: 'transparent',
|
||
series: [{
|
||
name: '刻度',
|
||
type: 'gauge',
|
||
startAngle: 220,
|
||
endAngle: -40,
|
||
min: 0,
|
||
max: 150,
|
||
radius: '98%',
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
title: {
|
||
show: false
|
||
},
|
||
detail: {
|
||
show: true,
|
||
offsetCenter: [0, '65%'],
|
||
formatter: function () {
|
||
return '{status|' + dataInfo.status + '}\n{value|' + dataInfo.value + '%}';
|
||
},
|
||
rich: {
|
||
status: {
|
||
fontSize: 14,
|
||
lineHeight: 22,
|
||
color: '#999'
|
||
},
|
||
value: {
|
||
fontSize: 20,
|
||
lineHeight: 32,
|
||
color: '#000'
|
||
}
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
length: 0,
|
||
lineStyle: {
|
||
color: '#999'
|
||
}
|
||
},
|
||
splitLine: {
|
||
length: 6,
|
||
width: 2,
|
||
lineStyle: {
|
||
color: color
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: '#8098BC'
|
||
},
|
||
pointer: {
|
||
length: '50%',
|
||
width: 6
|
||
},
|
||
itemStyle: {
|
||
color: color,
|
||
shadowColor: 'rgba(0,138,255,0.45)',
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 2,
|
||
shadowOffsetY: 2
|
||
},
|
||
markPoint: {
|
||
data: [{
|
||
x: "50%",
|
||
y: "50%",
|
||
symbol: 'circle',
|
||
symbolSize: 24,
|
||
itemStyle: {
|
||
color: color
|
||
},
|
||
}, {
|
||
x: "50%",
|
||
y: "50%",
|
||
symbol: 'circle',
|
||
symbolSize: 18,
|
||
itemStyle: {
|
||
color: "#fff"
|
||
},
|
||
}]
|
||
},
|
||
data: [dataInfo]
|
||
|
||
},
|
||
{
|
||
name: '外圈',
|
||
type: 'gauge',
|
||
radius: '100%',
|
||
startAngle: 225,
|
||
endAngle: -45,
|
||
min: 0,
|
||
max: 100,
|
||
title: {
|
||
show: false
|
||
},
|
||
detail: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 16,
|
||
color: [
|
||
[
|
||
(dataInfo.value) / 150, color
|
||
],
|
||
[
|
||
1, 'rgba(53, 146, 254, 0.1)'
|
||
]
|
||
],
|
||
// shadowColor: 'rgba(0,138,255,0.35)',
|
||
// shadowBlur: 5,
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: false
|
||
},
|
||
pointer: {
|
||
show: false,
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#54F200',
|
||
}
|
||
},
|
||
data: [dataInfo]
|
||
}
|
||
]
|
||
|
||
}
|
||
|
||
myChart2.setOption(option, true);
|
||
window.addEventListener("resize", function () {
|
||
myChart2.resize();
|
||
});
|
||
}
|
||
|
||
// 租赁金额（吊车）
|
||
function initThreeCharts(obj) {
|
||
const dataInfo = {
|
||
status: '￥' + ((obj.payMoney + '').indexOf('.') > -1 ? obj.payMoney :obj.payMoney + '.00'),
|
||
value: obj.progress
|
||
}
|
||
const color = '#3592FE'
|
||
const option = {
|
||
backgroundColor: 'transparent',
|
||
series: [{
|
||
name: '刻度',
|
||
type: 'gauge',
|
||
startAngle: 220,
|
||
endAngle: -40,
|
||
min: 0,
|
||
max: 150,
|
||
radius: '98%',
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
title: {
|
||
show: false
|
||
},
|
||
detail: {
|
||
show: true,
|
||
offsetCenter: [0, '65%'],
|
||
formatter: function () {
|
||
return '{status|' + dataInfo.status + '}\n{value|' + dataInfo.value + '%}';
|
||
},
|
||
rich: {
|
||
status: {
|
||
fontSize: 14,
|
||
lineHeight: 22,
|
||
color: '#999'
|
||
},
|
||
value: {
|
||
fontSize: 20,
|
||
lineHeight: 32,
|
||
color: '#000'
|
||
}
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
length: 0,
|
||
lineStyle: {
|
||
color: '#999'
|
||
}
|
||
},
|
||
splitLine: {
|
||
length: 6,
|
||
width: 2,
|
||
lineStyle: {
|
||
color: color
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: '#8098BC'
|
||
},
|
||
pointer: {
|
||
length: '50%',
|
||
width: 6
|
||
},
|
||
itemStyle: {
|
||
color: color,
|
||
shadowColor: 'rgba(0,138,255,0.45)',
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 2,
|
||
shadowOffsetY: 2
|
||
},
|
||
markPoint: {
|
||
data: [{
|
||
x: "50%",
|
||
y: "50%",
|
||
symbol: 'circle',
|
||
symbolSize: 24,
|
||
itemStyle: {
|
||
color: color
|
||
},
|
||
}, {
|
||
x: "50%",
|
||
y: "50%",
|
||
symbol: 'circle',
|
||
symbolSize: 18,
|
||
itemStyle: {
|
||
color: "#fff"
|
||
},
|
||
}]
|
||
},
|
||
data: [dataInfo]
|
||
|
||
},
|
||
{
|
||
name: '外圈',
|
||
type: 'gauge',
|
||
radius: '100%',
|
||
startAngle: 225,
|
||
endAngle: -45,
|
||
min: 0,
|
||
max: 100,
|
||
title: {
|
||
show: false
|
||
},
|
||
detail: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 16,
|
||
color: [
|
||
[
|
||
(dataInfo.value) / 150, color
|
||
],
|
||
[
|
||
1, 'rgba(53, 146, 254, 0.1)'
|
||
]
|
||
],
|
||
// shadowColor: 'rgba(0,138,255,0.35)',
|
||
// shadowBlur: 5,
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: false
|
||
},
|
||
pointer: {
|
||
show: false,
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#54F200',
|
||
}
|
||
},
|
||
data: [dataInfo]
|
||
}
|
||
]
|
||
|
||
}
|
||
myChart3.setOption(option, true);
|
||
window.addEventListener("resize", function () {
|
||
myChart3.resize();
|
||
});
|
||
} |