|
|
@@ -59,7 +59,7 @@ export default {
|
|
|
this.loading = false;
|
|
|
data = (data || []).map((ite) => ({
|
|
|
name: ite.riskName,
|
|
|
- value: ite.riskNum,
|
|
|
+ value: ite.riskNum ?? 0,
|
|
|
}));
|
|
|
let myChart = echarts.getInstanceByDom(
|
|
|
document.getElementById("barChart2")
|
|
|
@@ -67,7 +67,6 @@ export default {
|
|
|
if (myChart == null) {
|
|
|
myChart = echarts.init(document.getElementById("barChart2"));
|
|
|
}
|
|
|
-
|
|
|
// 指定图表的配置项和数据
|
|
|
var option = {
|
|
|
title: {
|
|
|
@@ -83,7 +82,11 @@ export default {
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
},
|
|
|
- color: ["#0052F1", "#00a4ff"],
|
|
|
+ // color: ["#0052F1", "#00a4ff"],
|
|
|
+ color: ["#00a4ff", "#0052F1"],
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
legend: {
|
|
|
top: "5%",
|
|
|
left: "center",
|
|
|
@@ -95,43 +98,82 @@ export default {
|
|
|
left: "2%", //图表距离容器左侧多少距离
|
|
|
right: "2%", //图表距离容器右侧侧多少距离
|
|
|
bottom: "0%", //图表距离容器上面多少距离
|
|
|
- top: "2%", //图表距离容器下面多少距离
|
|
|
+ top: "10%", //图表距离容器下面多少距离
|
|
|
containLabel: true,
|
|
|
},
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: data.map((ite) => ite.name),
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: ["#02367c"], // 设置 Y 轴分割线颜色为深灰色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: ["#02367c"], // 设置 Y 轴分割线颜色为深灰色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
series: [
|
|
|
{
|
|
|
- type: "pie",
|
|
|
- center: ["50%", "60%"],
|
|
|
- radius: ["40%", "70%"],
|
|
|
- avoidLabelOverlap: false,
|
|
|
+ data: data.map((ite, i) => {
|
|
|
+ return {
|
|
|
+ value: ite.value,
|
|
|
+ itemStyle: {
|
|
|
+ color: ["#00a4ff", "#0052F1"][i],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ type: "bar",
|
|
|
+ barMinHeight: 10,
|
|
|
label: {
|
|
|
show: true,
|
|
|
- formatter: "{b|{b}} \n {d|{c}条}",
|
|
|
- rich: {
|
|
|
- d: {
|
|
|
- color: "#fff",
|
|
|
- fontSize: 16,
|
|
|
- lineHeight: 24,
|
|
|
- height: 24,
|
|
|
- },
|
|
|
- b: {
|
|
|
- color: "#D3EBFF",
|
|
|
- fontSize: 14,
|
|
|
- lineHeight: 20,
|
|
|
- align: "left",
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- itemStyle: {
|
|
|
- shadowBlur: 10,
|
|
|
- shadowOffsetX: 0,
|
|
|
- shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
|
- },
|
|
|
+ position: "top",
|
|
|
+ fontSize: 14,
|
|
|
+ color: "#fff",
|
|
|
},
|
|
|
- data: data || [],
|
|
|
},
|
|
|
],
|
|
|
+ // series: [
|
|
|
+ // {
|
|
|
+ // type: "pie",
|
|
|
+ // center: ["50%", "60%"],
|
|
|
+ // radius: ["40%", "70%"],
|
|
|
+ // avoidLabelOverlap: false,
|
|
|
+ // label: {
|
|
|
+ // show: true,
|
|
|
+ // formatter: "{b|{b}} \n {d|{c}条}",
|
|
|
+ // rich: {
|
|
|
+ // d: {
|
|
|
+ // color: "#fff",
|
|
|
+ // fontSize: 16,
|
|
|
+ // lineHeight: 24,
|
|
|
+ // height: 24,
|
|
|
+ // },
|
|
|
+ // b: {
|
|
|
+ // color: "#D3EBFF",
|
|
|
+ // fontSize: 14,
|
|
|
+ // lineHeight: 20,
|
|
|
+ // align: "left",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // emphasis: {
|
|
|
+ // itemStyle: {
|
|
|
+ // shadowBlur: 10,
|
|
|
+ // shadowOffsetX: 0,
|
|
|
+ // shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // data: data || [],
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
};
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
myChart.setOption(option);
|
cfofpp