924 lines
22 KiB
JavaScript
924 lines
22 KiB
JavaScript
import * as echarts from "echarts";
|
|
|
|
export const initEcharts1 = (mainRef, chartInstance, data) => {
|
|
chartInstance.current = echarts.init(mainRef.current);
|
|
|
|
const angle = 0;
|
|
const outerRidus1 = 0.8;
|
|
const outerRidus2 = 0.85;
|
|
|
|
const colors = {
|
|
重大风险: "#FF0000",
|
|
较大风险: "#FF7900",
|
|
一般风险: "#FEAD00",
|
|
低风险: "#0078FF",
|
|
};
|
|
|
|
const option = {
|
|
legend: {
|
|
data: ["重大风险", "较大风险", "一般风险", "低风险"],
|
|
orient: "vertical",
|
|
right: "20px",
|
|
y: "center",
|
|
itemGap: 30,
|
|
formatter: (params) => {
|
|
let value;
|
|
let valueStyle;
|
|
switch (params) {
|
|
case "重大风险":
|
|
value = data.majorRiskCount;
|
|
valueStyle = "major_value";
|
|
break;
|
|
case "较大风险":
|
|
value = data.greaterRiskCount;
|
|
valueStyle = "greater_value";
|
|
break;
|
|
case "一般风险":
|
|
value = data.generalRiskCount;
|
|
valueStyle = "general_value";
|
|
break;
|
|
case "低风险":
|
|
value = data.lowRiskCount;
|
|
valueStyle = "low_value";
|
|
break;
|
|
default:
|
|
value = 0;
|
|
valueStyle = "default_value";
|
|
}
|
|
|
|
return `{text|${params}: }{${valueStyle}|${value}}`;
|
|
},
|
|
textStyle: {
|
|
rich: {
|
|
major_value: {
|
|
color: colors["重大风险"],
|
|
fontSize: 16,
|
|
fontWeight: "bold",
|
|
padding: [0, 0, 0, 2],
|
|
},
|
|
greater_value: {
|
|
color: colors["较大风险"],
|
|
fontSize: 16,
|
|
fontWeight: "bold",
|
|
padding: [0, 0, 0, 2],
|
|
},
|
|
general_value: {
|
|
color: colors["一般风险"],
|
|
fontSize: 16,
|
|
fontWeight: "bold",
|
|
padding: [0, 0, 0, 2],
|
|
},
|
|
low_value: {
|
|
color: colors["低风险"],
|
|
fontSize: 16,
|
|
fontWeight: "bold",
|
|
padding: [0, 0, 0, 2],
|
|
},
|
|
default_value: {
|
|
color: "#999",
|
|
fontSize: 16,
|
|
fontWeight: "bold",
|
|
padding: [0, 0, 0, 2],
|
|
},
|
|
text: {
|
|
color: "#000",
|
|
fontSize: 16,
|
|
padding: [0, 0, 0, 5],
|
|
},
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
},
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
radius: ["75%", "55%"],
|
|
center: ["35%", "50%"],
|
|
emphasis: {
|
|
scale: false,
|
|
},
|
|
data: [
|
|
{
|
|
value: data.majorRiskCount,
|
|
name: "重大风险",
|
|
itemStyle: {
|
|
color: colors["重大风险"],
|
|
},
|
|
},
|
|
{
|
|
value: data.greaterRiskCount,
|
|
name: "较大风险",
|
|
itemStyle: {
|
|
color: colors["较大风险"],
|
|
},
|
|
},
|
|
{
|
|
value: data.generalRiskCount,
|
|
name: "一般风险",
|
|
itemStyle: {
|
|
color: colors["一般风险"],
|
|
},
|
|
},
|
|
{
|
|
value: data.lowRiskCount,
|
|
name: "低风险",
|
|
itemStyle: {
|
|
color: colors["低风险"],
|
|
},
|
|
},
|
|
],
|
|
label: {
|
|
show: false,
|
|
},
|
|
},
|
|
{
|
|
type: "pie",
|
|
radius: ["60%", "40%"],
|
|
center: ["35%", "50%"],
|
|
emphasis: {
|
|
scale: false,
|
|
},
|
|
z: 10,
|
|
label: {
|
|
position: "center",
|
|
formatter: () => {
|
|
return "";
|
|
},
|
|
},
|
|
data: [
|
|
{
|
|
value: data.majorRiskCount,
|
|
name: "重大风险",
|
|
itemStyle: {
|
|
color: colors["重大风险"],
|
|
opacity: 0.5,
|
|
},
|
|
},
|
|
{
|
|
value: data.greaterRiskCount,
|
|
name: "较大风险",
|
|
itemStyle: {
|
|
color: colors["较大风险"],
|
|
opacity: 0.5,
|
|
},
|
|
},
|
|
{
|
|
value: data.generalRiskCount,
|
|
name: "一般风险",
|
|
itemStyle: {
|
|
color: colors["一般风险"],
|
|
opacity: 0.5,
|
|
},
|
|
},
|
|
{
|
|
value: data.lowRiskCount,
|
|
name: "低风险",
|
|
itemStyle: {
|
|
color: colors["低风险"],
|
|
opacity: 0.5,
|
|
},
|
|
},
|
|
],
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
{
|
|
name: "ring5",
|
|
type: "custom",
|
|
coordinateSystem: "none",
|
|
renderItem(params, api) {
|
|
const pieCenterX = api.getWidth() * 0.35;
|
|
const pieCenterY = api.getHeight() * 0.5;
|
|
|
|
return {
|
|
type: "arc",
|
|
shape: {
|
|
cx: pieCenterX,
|
|
cy: pieCenterY,
|
|
r: Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus1,
|
|
startAngle: ((0 + angle) * Math.PI) / 180,
|
|
endAngle: ((90 + angle) * Math.PI) / 180,
|
|
},
|
|
style: {
|
|
stroke: colors["重大风险"],
|
|
fill: "transparent",
|
|
lineWidth: 1.5,
|
|
},
|
|
silent: true,
|
|
};
|
|
},
|
|
data: [0],
|
|
},
|
|
{
|
|
name: "ring5",
|
|
type: "custom",
|
|
coordinateSystem: "none",
|
|
renderItem(params, api) {
|
|
const pieCenterX = api.getWidth() * 0.35;
|
|
const pieCenterY = api.getHeight() * 0.5;
|
|
const r = Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus1;
|
|
const point = getCirlPoint(pieCenterX, pieCenterY, r, 0 + angle);
|
|
return {
|
|
type: "circle",
|
|
shape: {
|
|
cx: point.x,
|
|
cy: point.y,
|
|
r: 4,
|
|
},
|
|
style: {
|
|
stroke: colors["重大风险"],
|
|
fill: colors["重大风险"],
|
|
},
|
|
silent: true,
|
|
};
|
|
},
|
|
data: [0],
|
|
},
|
|
{
|
|
name: "ring5",
|
|
type: "custom",
|
|
coordinateSystem: "none",
|
|
renderItem(params, api) {
|
|
const pieCenterX = api.getWidth() * 0.35;
|
|
const pieCenterY = api.getHeight() * 0.5;
|
|
|
|
return {
|
|
type: "arc",
|
|
shape: {
|
|
cx: pieCenterX,
|
|
cy: pieCenterY,
|
|
r: Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus1,
|
|
startAngle: ((180 + angle) * Math.PI) / 180,
|
|
endAngle: ((270 + angle) * Math.PI) / 180,
|
|
},
|
|
style: {
|
|
stroke: colors["较大风险"],
|
|
fill: "transparent",
|
|
lineWidth: 1.5,
|
|
},
|
|
silent: true,
|
|
};
|
|
},
|
|
data: [0],
|
|
},
|
|
{
|
|
name: "ring5",
|
|
type: "custom",
|
|
coordinateSystem: "none",
|
|
renderItem(params, api) {
|
|
const pieCenterX = api.getWidth() * 0.35;
|
|
const pieCenterY = api.getHeight() * 0.5;
|
|
const r = Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus1;
|
|
const point = getCirlPoint(pieCenterX, pieCenterY, r, 180 + angle);
|
|
return {
|
|
type: "circle",
|
|
shape: {
|
|
cx: point.x,
|
|
cy: point.y,
|
|
r: 4,
|
|
},
|
|
style: {
|
|
stroke: colors["较大风险"],
|
|
fill: colors["较大风险"],
|
|
},
|
|
silent: true,
|
|
};
|
|
},
|
|
data: [0],
|
|
},
|
|
{
|
|
name: "ring5",
|
|
type: "custom",
|
|
coordinateSystem: "none",
|
|
renderItem(params, api) {
|
|
const pieCenterX = api.getWidth() * 0.35;
|
|
const pieCenterY = api.getHeight() * 0.5;
|
|
|
|
return {
|
|
type: "arc",
|
|
shape: {
|
|
cx: pieCenterX,
|
|
cy: pieCenterY,
|
|
r: Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus2,
|
|
startAngle: ((250 + -angle) * Math.PI) / 180,
|
|
endAngle: ((10 + -angle) * Math.PI) / 180,
|
|
},
|
|
style: {
|
|
stroke: colors["一般风险"],
|
|
fill: "transparent",
|
|
lineWidth: 1.5,
|
|
},
|
|
silent: true,
|
|
};
|
|
},
|
|
data: [0],
|
|
},
|
|
{
|
|
name: "ring5",
|
|
type: "custom",
|
|
coordinateSystem: "none",
|
|
renderItem(params, api) {
|
|
const pieCenterX = api.getWidth() * 0.35;
|
|
const pieCenterY = api.getHeight() * 0.5;
|
|
const r = Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus2;
|
|
const point = getCirlPoint(pieCenterX, pieCenterY, r, 250 + -angle);
|
|
return {
|
|
type: "circle",
|
|
shape: {
|
|
cx: point.x,
|
|
cy: point.y,
|
|
r: 4,
|
|
},
|
|
style: {
|
|
stroke: colors["一般风险"],
|
|
fill: colors["一般风险"],
|
|
},
|
|
silent: true,
|
|
};
|
|
},
|
|
data: [0],
|
|
},
|
|
{
|
|
name: "ring5",
|
|
type: "custom",
|
|
coordinateSystem: "none",
|
|
renderItem(params, api) {
|
|
const pieCenterX = api.getWidth() * 0.35;
|
|
const pieCenterY = api.getHeight() * 0.5;
|
|
|
|
return {
|
|
type: "arc",
|
|
shape: {
|
|
cx: pieCenterX,
|
|
cy: pieCenterY,
|
|
r: Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus2,
|
|
startAngle: ((70 + -angle) * Math.PI) / 180,
|
|
endAngle: ((200 + -angle) * Math.PI) / 180,
|
|
},
|
|
style: {
|
|
stroke: colors["低风险"],
|
|
fill: "transparent",
|
|
lineWidth: 1.5,
|
|
},
|
|
silent: true,
|
|
};
|
|
},
|
|
data: [0],
|
|
},
|
|
{
|
|
name: "ring5",
|
|
type: "custom",
|
|
coordinateSystem: "none",
|
|
renderItem(params, api) {
|
|
const pieCenterX = api.getWidth() * 0.35;
|
|
const pieCenterY = api.getHeight() * 0.5;
|
|
const r = Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus2;
|
|
const point = getCirlPoint(pieCenterX, pieCenterY, r, 70 + -angle);
|
|
return {
|
|
type: "circle",
|
|
shape: {
|
|
cx: point.x,
|
|
cy: point.y,
|
|
r: 4,
|
|
},
|
|
style: {
|
|
stroke: colors["低风险"],
|
|
fill: colors["低风险"],
|
|
},
|
|
silent: true,
|
|
};
|
|
},
|
|
data: [0],
|
|
},
|
|
],
|
|
};
|
|
|
|
function getCirlPoint(x0, y0, r, angle) {
|
|
const x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
|
|
const y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
|
|
return {
|
|
x: x1,
|
|
y: y1,
|
|
};
|
|
}
|
|
|
|
chartInstance.current.setOption(option);
|
|
};
|
|
|
|
export const initEcharts2 = (mainRef, chartInstance, data) => {
|
|
chartInstance.current = echarts.init(mainRef.current);
|
|
|
|
const option = {
|
|
color: ["#F1C416", "#0AFCFF"],
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
label: {
|
|
backgroundColor: "#6a7985",
|
|
},
|
|
},
|
|
},
|
|
grid: {
|
|
left: "3%",
|
|
right: "4%",
|
|
bottom: "10%",
|
|
top: 40,
|
|
padding: "0 0 10 0",
|
|
containLabel: true,
|
|
},
|
|
legend: {
|
|
right: 10,
|
|
top: 10,
|
|
itemGap: 16,
|
|
itemWidth: 18,
|
|
itemHeight: 10,
|
|
textStyle: {
|
|
color: "#465683",
|
|
fontStyle: "normal",
|
|
fontFamily: "微软雅黑",
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
dataZoom: [
|
|
{
|
|
type: "slider",
|
|
height: 6,
|
|
bottom: "6%",
|
|
show: true,
|
|
start: 0,
|
|
end: 50,
|
|
handleSize: 3,
|
|
handleStyle: {
|
|
color: "#465683",
|
|
},
|
|
xAxisIndex: [0],
|
|
filterMode: "filter",
|
|
showDetail: false,
|
|
},
|
|
],
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
boundaryGap: true,
|
|
data: data.map(item => item.name),
|
|
axisLabel: {
|
|
interval: 0,
|
|
margin: 15,
|
|
color: "#465683",
|
|
fontStyle: "normal",
|
|
fontFamily: "微软雅黑",
|
|
fontSize: 12,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#465683",
|
|
opacity: 0.2,
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
splitNumber: 5,
|
|
axisLabel: {
|
|
color: "#465683",
|
|
fontStyle: "normal",
|
|
fontFamily: "微软雅黑",
|
|
fontSize: 12,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: ["#465683"],
|
|
opacity: 0.06,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "已整改",
|
|
type: "pictorialBar",
|
|
symbol: "roundRect",
|
|
symbolOffset: [-5, 0],
|
|
symbolMargin: "1",
|
|
barWidth: "10%",
|
|
barMaxWidth: "20%",
|
|
animationDelay: (dataIndex, params) => {
|
|
return params.index * 50;
|
|
},
|
|
itemStyle: {
|
|
color: () => {
|
|
return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
|
|
{
|
|
offset: 0,
|
|
color: "#FF9600",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#F0E203",
|
|
},
|
|
]);
|
|
},
|
|
},
|
|
z: 1,
|
|
barGap: 0,
|
|
symbolRepeat: true,
|
|
symbolSize: [14, 5],
|
|
data: data.map(item => item.unitCount),
|
|
animationEasing: "elasticOut",
|
|
stack: "2",
|
|
},
|
|
{
|
|
name: "已验收",
|
|
type: "pictorialBar",
|
|
symbol: "roundRect",
|
|
barWidth: "10%",
|
|
symbolOffset: [5, 0],
|
|
barMaxWidth: "20%",
|
|
symbolMargin: "1",
|
|
animationDelay: (dataIndex, params) => {
|
|
return params.index * 50;
|
|
},
|
|
itemStyle: {
|
|
color: () => {
|
|
return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
|
|
{
|
|
offset: 0,
|
|
color: "#19D4FE",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#089FFD",
|
|
},
|
|
]);
|
|
},
|
|
},
|
|
z: 1,
|
|
barGap: 0,
|
|
symbolRepeat: true,
|
|
symbolSize: [14, 5],
|
|
data: data.map(item => item.personnelCount),
|
|
animationEasing: "elasticOut",
|
|
stack: "1",
|
|
},
|
|
],
|
|
};
|
|
|
|
chartInstance.current.setOption(option);
|
|
};
|
|
|
|
export const initEcharts3 = (mainRef, chartInstance, data) => {
|
|
chartInstance.current = echarts.init(mainRef.current);
|
|
|
|
const colorList1 = ["#FF6B6B", "", "#FFD93D", "", "#6BCF7F", "", "#4ECDC4", "", "#A084CA", "", "#FF9AA2", ""];
|
|
const colorList2 = ["rgba(255,107,107, 0.6)", "", "rgba(255,217,61, 0.6)", "", "rgba(107,207,127, 0.6)", "", "rgba(78,205,196, 0.6)", "", "rgba(160,132,202, 0.6)", "", "rgba(255,154,162, 0.6)", ""];
|
|
|
|
const optionData = [];
|
|
data.forEach((item) => {
|
|
optionData.push({ value: item.value, name: item.name });
|
|
optionData.push({ name: "", value: 1, itemStyle: { color: "transparent" } });
|
|
});
|
|
|
|
const option = {
|
|
tooltip: {
|
|
trigger: "item",
|
|
},
|
|
legend: {
|
|
show: true,
|
|
orient: "vertical",
|
|
right: "10%",
|
|
top: "center",
|
|
textStyle: {
|
|
color: "#3F4554",
|
|
fontSize: 12,
|
|
},
|
|
data: data.map(item => item.name),
|
|
},
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
zlevel: 3,
|
|
radius: ["30%", "70%"],
|
|
center: ["25%", "50%"],
|
|
itemStyle: {
|
|
color(params) {
|
|
return colorList1[params.dataIndex];
|
|
},
|
|
},
|
|
label: {
|
|
show: false,
|
|
},
|
|
data: optionData,
|
|
},
|
|
{
|
|
type: "pie",
|
|
zlevel: 1,
|
|
silent: true,
|
|
radius: ["73%", "80%"],
|
|
center: ["25%", "50%"],
|
|
itemStyle: {
|
|
color(params) {
|
|
return colorList2[params.dataIndex];
|
|
},
|
|
},
|
|
label: {
|
|
show: false,
|
|
},
|
|
data: optionData,
|
|
},
|
|
{
|
|
type: "pie",
|
|
radius: ["85%", "86%"],
|
|
center: ["25%", "50%"],
|
|
emphasis: {
|
|
scale: false,
|
|
},
|
|
clockwise: false,
|
|
itemStyle: {
|
|
shadowBlur: 1,
|
|
shadowColor: "rgba(15, 79, 150,1)",
|
|
color: "rgba(23,138,173,1)",
|
|
},
|
|
label: {
|
|
show: false,
|
|
},
|
|
data: [0],
|
|
},
|
|
],
|
|
};
|
|
|
|
chartInstance.current.setOption(option);
|
|
};
|
|
|
|
export const initEcharts4 = (mainRef, chartInstance, data) => {
|
|
chartInstance.current = echarts.init(mainRef.current);
|
|
|
|
const option = {
|
|
grid: {
|
|
containLabel: true,
|
|
bottom: "5%",
|
|
left: "-15%",
|
|
top: "10%",
|
|
right: "5%",
|
|
},
|
|
xAxis: {
|
|
type: "value",
|
|
max: 100,
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: "category",
|
|
data: data.map(item => item.name),
|
|
inverse: true,
|
|
position: "left",
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
{
|
|
type: "category",
|
|
data: data.map(item => item.value),
|
|
inverse: true,
|
|
position: "right",
|
|
axisLabel: {
|
|
show: true,
|
|
margin: -30,
|
|
fontSize: 14,
|
|
align: "top",
|
|
verticalAlign: "bottom",
|
|
padding: [0, 0, 10, 0],
|
|
color: "#465683",
|
|
formatter(value) {
|
|
return `${value}%`;
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
{
|
|
type: "category",
|
|
inverse: true,
|
|
position: "left",
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
data: data.map(item => item.name),
|
|
axisLabel: {
|
|
show: true,
|
|
margin: -2,
|
|
fontSize: 14,
|
|
align: "top",
|
|
verticalAlign: "bottom",
|
|
padding: [0, 0, 10, 0],
|
|
color: "#465683",
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
data: data.map(item => item.value),
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
|
|
{ offset: 0, color: "#0096F8" },
|
|
{ offset: 1, color: "#1CD0E7" },
|
|
]),
|
|
borderRadius: 30,
|
|
},
|
|
type: "bar",
|
|
barWidth: 10,
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
color: "rgba(255,255,255,0.5)",
|
|
borderRadius: 30,
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
chartInstance.current.setOption(option);
|
|
};
|
|
|
|
export const initEcharts5 = (mainRef, chartInstance, data) => {
|
|
chartInstance.current = echarts.init(mainRef.current);
|
|
|
|
const option = {
|
|
color: ["#007CFA", "#009944"],
|
|
title: [
|
|
{
|
|
text: "同比:下降5%",
|
|
x: 10,
|
|
y: 10,
|
|
textStyle: {
|
|
fontSize: 14,
|
|
color: "#465683",
|
|
},
|
|
},
|
|
{
|
|
text: "环比:提升6%",
|
|
x: 150,
|
|
y: 10,
|
|
textStyle: {
|
|
fontSize: 14,
|
|
color: "#465683",
|
|
},
|
|
},
|
|
],
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
legend: {
|
|
right: 10,
|
|
top: 10,
|
|
itemGap: 16,
|
|
itemWidth: 18,
|
|
itemHeight: 10,
|
|
textStyle: {
|
|
color: "#465683",
|
|
fontStyle: "normal",
|
|
fontFamily: "微软雅黑",
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
grid: {
|
|
left: "3%",
|
|
right: "4%",
|
|
bottom: "10%",
|
|
top: 40,
|
|
padding: "0 0 10 0",
|
|
containLabel: true,
|
|
},
|
|
dataZoom: [
|
|
{
|
|
type: "slider",
|
|
height: 6,
|
|
bottom: "6%",
|
|
show: true,
|
|
start: 0,
|
|
end: 50,
|
|
handleSize: 3,
|
|
handleStyle: {
|
|
color: "#465683",
|
|
},
|
|
xAxisIndex: [0],
|
|
filterMode: "filter",
|
|
showDetail: false,
|
|
},
|
|
],
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
boundaryGap: true,
|
|
data: data.map(item => item.department),
|
|
axisLabel: {
|
|
interval: 0,
|
|
margin: 15,
|
|
color: "#465683",
|
|
fontStyle: "normal",
|
|
fontFamily: "微软雅黑",
|
|
fontSize: 12,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#465683",
|
|
opacity: 0.2,
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
splitNumber: 5,
|
|
axisLabel: {
|
|
color: "#465683",
|
|
fontStyle: "normal",
|
|
fontFamily: "微软雅黑",
|
|
fontSize: 12,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: ["#465683"],
|
|
opacity: 0.06,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "同比",
|
|
type: "line",
|
|
data: data.map(item => item.yearOnYear),
|
|
},
|
|
{
|
|
name: "环比",
|
|
type: "line",
|
|
data: data.map(item => item.monthOnMonth),
|
|
},
|
|
],
|
|
};
|
|
|
|
chartInstance.current.setOption(option);
|
|
};
|