wangpeng
/
integrated_traffic_vue
forked from integrated_whb/integrated_whb_vue
1
0
Fork 0
Code Pull Requests Activity

修改echarts警告、数字增加滚动效果

pull/1/head
LiuJiaNan 2024-02-26 17:59:52 +08:00
parent cb1f9bae82
commit 5751d75241
11 changed files with 190 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/views/BI/js/echarts1.js
View File

@ -107,21 +107,19 @@ function echarts1(id, legend, echartCount) {
}, },
}, },
itemStyle: { itemStyle: {
normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {
{ offset: 1,
offset: 1, color: "rgba(109, 131, 180, 1)",
color: "rgba(109, 131, 180, 1)", opacity: 0.6,
opacity: 0.6, },
}, {
{ offset: 0,
offset: 0, color: "rgba(66, 91, 147, 1)",
color: "rgba(66, 91, 147, 1)", opacity: 1,
opacity: 1, },
}, ]),
]), barBorderRadius: [0, 0, 0, 0],
barBorderRadius: [0, 0, 0, 0],
},
}, },
data: echartCount, data: echartCount,
}, },
@ -138,21 +136,19 @@ function echarts1(id, legend, echartCount) {
}, },
}, },
itemStyle: { itemStyle: {
normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {
{ offset: 1,
offset: 1, color: "rgba(109, 131, 180, 1)",
color: "rgba(109, 131, 180, 1)", opacity: 0.6,
opacity: 0.6, },
}, {
{ offset: 0,
offset: 0, color: "rgba(99, 126, 188, 1)",
color: "rgba(99, 126, 188, 1)", opacity: 1,
opacity: 1, },
}, ]),
]), barBorderRadius: [0, 0, 0, 0],
barBorderRadius: [0, 0, 0, 0],
},
}, },
data: echartCount, data: echartCount,
barGap: 0, barGap: 0,
@ -165,9 +161,7 @@ function echarts1(id, legend, echartCount) {
}, },
type: "pictorialBar", type: "pictorialBar",
itemStyle: { itemStyle: {
normal: { color: "rgba(183, 195, 226, 1)",
color: "rgba(183, 195, 226, 1)",
},
}, },
symbol: "diamond", symbol: "diamond",
symbolRotate: 0, symbolRotate: 0,

137
src/views/BI/js/echarts4.js
View File

@ -130,88 +130,63 @@ function echarts4(id) {
fontSize: 12, fontSize: 12,
}, },
itemStyle: { itemStyle: {
// normal: { color: (params) => {
// color: { const colorList = [
// type: 'linear', {
// x: 0, type: "linear",
// y: 0, x: 0,
// x2: 0, y: 0,
// y2: 1, x2: 0,
// colorStops: [ y2: 1,
// { colorStops: [
// offset: 0, {
// color: '#3b89f4', offset: 0,
// }, color: "#297ff2",
// { },
// offset: 1, {
// color: '#cce7fc', offset: 1,
// }, color: "#cce7fc",
// ], },
// global: false, // 缺省为 false ],
// }, },
// }, {
// emphasis: { type: "linear",
// opacity: 1, x: 0,
// }, y: 0,
normal: { x2: 0,
color: (params) => { y2: 1,
const colorList = [ colorStops: [
{ {
type: "linear", offset: 0,
x: 0, color: "#3bfafe",
y: 0, },
x2: 0, {
y2: 1, offset: 1,
colorStops: [ color: "#aaf4fe",
{ },
offset: 0, ],
color: "#297ff2", },
}, {
{ type: "linear",
offset: 1, x: 0,
color: "#cce7fc", y: 0,
}, x2: 0,
], y2: 1,
}, colorStops: [
{ {
type: "linear", offset: 0,
x: 0, color: "#e08440",
y: 0, },
x2: 0, {
y2: 1, offset: 1,
colorStops: [ color: "#decabd",
{ },
offset: 0, ],
color: "#3bfafe", },
}, ];
{ return colorList[params.dataIndex];
offset: 1,
color: "#aaf4fe",
},
],
},
{
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#e08440",
},
{
offset: 1,
color: "#decabd",
},
],
},
];
return colorList[params.dataIndex];
},
opacity: 0.7,
}, },
opacity: 0.7,
// 鼠标移入柱子上 透明度变为 1 // 鼠标移入柱子上 透明度变为 1
emphasis: { emphasis: {
opacity: 1, opacity: 1,

24
src/views/aggregation_management/gathering_overview/index.vue
View File

@ -248,11 +248,9 @@ const fnInitEcharts = (data) => {
type: "line", type: "line",
data: data.one, data: data.one,
itemStyle: { itemStyle: {
normal: { color: "red",
lineStyle: {
color: "red", color: "red",
lineStyle: {
color: "red",
},
}, },
}, },
}, },
@ -261,11 +259,9 @@ const fnInitEcharts = (data) => {
type: "line", type: "line",
data: data.two, data: data.two,
itemStyle: { itemStyle: {
normal: { color: "orange",
lineStyle: {
color: "orange", color: "orange",
lineStyle: {
color: "orange",
},
}, },
}, },
}, },
@ -274,11 +270,9 @@ const fnInitEcharts = (data) => {
type: "line", type: "line",
data: data.three, data: data.three,
itemStyle: { itemStyle: {
normal: { color: "#ffeb3b",
lineStyle: {
color: "#ffeb3b", color: "#ffeb3b",
lineStyle: {
color: "#ffeb3b",
},
}, },
}, },
}, },
@ -287,11 +281,9 @@ const fnInitEcharts = (data) => {
type: "line", type: "line",
data: data.zong, data: data.zong,
itemStyle: { itemStyle: {
normal: { color: "#0385f4",
lineStyle: {
color: "#0385f4", color: "#0385f4",
lineStyle: {
color: "#0385f4",
},
}, },
}, },
}, },

22
src/views/index/components/checklist_check.vue
View File

@ -92,18 +92,16 @@ const fnInitEcharts = (data) => {
}, },
barWidth: 15, barWidth: 15,
itemStyle: { itemStyle: {
normal: { color: function (params) {
color: function (params) { const colorList = [
const colorList = [ "#ee6666",
"#ee6666", "#73c0de",
"#73c0de", "#3ca272",
"#3ca272", "#fc8452",
"#fc8452", "#9a60b4",
"#9a60b4", "#5470c6",
"#5470c6", ];
]; return colorList[params.dataIndex];
return colorList[params.dataIndex];
},
}, },
}, },
}, },

22
src/views/index/components/list_check_type.vue
View File

@ -21,9 +21,7 @@ const fnInitEcharts = (data) => {
text: "清单检查类型统计", text: "清单检查类型统计",
textStyle: { textStyle: {
fontSize: "14", fontSize: "14",
normal: { fontWeight: "700",
fontWeight: "700",
},
color: "#fff", color: "#fff",
}, },
}, },
@ -79,11 +77,9 @@ const fnInitEcharts = (data) => {
type: "line", type: "line",
data: data.xcqd, data: data.xcqd,
itemStyle: { itemStyle: {
normal: { color: "#3ca272",
lineStyle: {
color: "#3ca272", color: "#3ca272",
lineStyle: {
color: "#3ca272",
},
}, },
}, },
}, },
@ -92,11 +88,9 @@ const fnInitEcharts = (data) => {
type: "line", type: "line",
data: data.jcqd, data: data.jcqd,
itemStyle: { itemStyle: {
normal: { color: "#5470c6",
lineStyle: {
color: "#5470c6", color: "#5470c6",
lineStyle: {
color: "#5470c6",
},
}, },
}, },
}, },
@ -105,11 +99,9 @@ const fnInitEcharts = (data) => {
type: "line", type: "line",
data: data.zhqd, data: data.zhqd,
itemStyle: { itemStyle: {
normal: { color: "#ee6666",
lineStyle: {
color: "#ee6666", color: "#ee6666",
lineStyle: {
color: "#ee6666",
},
}, },
}, },
}, },

36
src/views/large_screen_data_display/components/full_staff_training.vue
View File

@ -85,25 +85,23 @@ const fnInitEcharts = (data) => {
data: yData, data: yData,
barWidth: "10px", barWidth: "10px",
itemStyle: { itemStyle: {
normal: { color: new echarts.graphic.LinearGradient(
color: new echarts.graphic.LinearGradient( 0,
0, 0,
0, 0,
0, 1,
1, [
[ {
{ offset: 0,
offset: 0, color: "#4abd91", // 0% 处的颜色
color: "#4abd91", // 0% 处的颜色 },
}, {
{ offset: 1,
offset: 1, color: "#28b2d5", // 100% 处的颜色
color: "#28b2d5", // 100% 处的颜色 },
}, ],
], false
false ),
),
},
}, },
}, },
], ],

26
src/views/large_screen_data_display/components/hidden_danger_situation.vue
View File

@ -33,7 +33,7 @@ const fnInitEcharts = (data) => {
}, },
legend: { legend: {
icon: "rect", icon: "rect",
top: "5%", top: "8%",
right: "5%", right: "5%",
itemWidth: 12, itemWidth: 12,
itemHeight: 12, itemHeight: 12,
@ -103,10 +103,8 @@ const fnInitEcharts = (data) => {
data: data.all, data: data.all,
smooth: true, smooth: true,
itemStyle: { itemStyle: {
normal: { color: colorList[0],
color: colorList[0], borderColor: colorList[0],
borderColor: colorList[0],
},
}, },
}, },
{ {
@ -115,10 +113,8 @@ const fnInitEcharts = (data) => {
data: data.wzg, data: data.wzg,
smooth: true, smooth: true,
itemStyle: { itemStyle: {
normal: { color: colorList[1],
color: colorList[1], borderColor: colorList[1],
borderColor: colorList[1],
},
}, },
}, },
{ {
@ -127,10 +123,8 @@ const fnInitEcharts = (data) => {
data: data.yzg, data: data.yzg,
smooth: true, smooth: true,
itemStyle: { itemStyle: {
normal: { color: colorList[2],
color: colorList[2], borderColor: colorList[2],
borderColor: colorList[2],
},
}, },
}, },
{ {
@ -139,10 +133,8 @@ const fnInitEcharts = (data) => {
data: data.yys, data: data.yys,
smooth: true, smooth: true,
itemStyle: { itemStyle: {
normal: { color: colorList[3],
color: colorList[3], borderColor: colorList[3],
borderColor: colorList[3],
},
}, },
}, },
], ],

27
src/views/large_screen_data_display/components/risk_management.vue
View File

@ -3,20 +3,21 @@
<div class="title">风险管控统计分析</div> <div class="title">风险管控统计分析</div>
<div class="round-box"> <div class="round-box">
<div class="content"> <div class="content">
<h1>{{ info.unitcount }}</h1> <count-to :end-val="info.unitcount" class="value" />
<span>风险点（单元）</span> <span class="label">风险点（单元）</span>
</div> </div>
<div class="round-jt" /> <div class="round-jt" />
<div class="content"> <div class="content">
<h1>{{ info.idcount }}</h1> <count-to :end-val="info.idcount" class="value" />
<span>辨识部位</span> <span class="label">辨识部位</span>
</div> </div>
<div class="round-jt" /> <div class="round-jt" />
<div class="content"> <div class="content">
<h1> <count-to
{{ info.acount + info.bcount + info.ccount + info.dcount }} :end-val="info.acount + info.bcount + info.ccount + info.dcount"
</h1> class="value"
<span>存在风险</span> />
<span class="label">存在风险</span>
</div> </div>
</div> </div>
</div> </div>
@ -25,6 +26,7 @@
<script setup> <script setup>
import { ref } from "vue"; import { ref } from "vue";
import { getRiskManagement } from "@/request/large_screen_data_display.js"; import { getRiskManagement } from "@/request/large_screen_data_display.js";
import CountTo from "vue-countup-v3";
const info = ref({ const info = ref({
unitcount: 0, unitcount: 0,
@ -89,13 +91,16 @@ fnGetData();
text-align: center; text-align: center;
position: relative; position: relative;
h1 { .value {
padding-top: 25px;
color: #70c5ff; color: #70c5ff;
font-size: 20px; font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} }
span { .label {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
color: #aaddff; color: #aaddff;

32
src/views/large_screen_data_display/components/situation.vue
View File

@ -8,8 +8,8 @@
<img src="/src/assets/images/bi/faxianico.png" alt="" /> <img src="/src/assets/images/bi/faxianico.png" alt="" />
</div> </div>
<div> <div>
<span>{{ info.all }}</span> <count-to :end-val="info.all" />
<span>发现隐患数</span> <div>发现隐患数</div>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
@ -17,8 +17,8 @@
<img src="/src/assets/images/bi/noonico.png" alt="" /> <img src="/src/assets/images/bi/noonico.png" alt="" />
</div> </div>
<div> <div>
<span>{{ info.wzg }}</span> <count-to :end-val="info.wzg" />
<span>未完成整改隐患</span> <div>未完成整改隐患</div>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
@ -26,12 +26,13 @@
<img src="/src/assets/images/bi/yinhuan.png" alt="" /> <img src="/src/assets/images/bi/yinhuan.png" alt="" />
</div> </div>
<div> <div>
<span> <count-to
{{ :end-val="
info.all !== 0 ? ((info.wzg / info.all) * 100).toFixed(2) : 0.0 info.all !== 0 ? ((info.wzg / info.all) * 100).toFixed(2) : 0.0
}}% "
</span> :options="{ suffix: '%' }"
<span>未整改率</span> />
<div>未整改率</div>
</div> </div>
</div> </div>
</div> </div>
@ -41,6 +42,7 @@
<script setup> <script setup>
import { ref } from "vue"; import { ref } from "vue";
import { getHiddenCount } from "@/request/large_screen_data_display.js"; import { getHiddenCount } from "@/request/large_screen_data_display.js";
import CountTo from "vue-countup-v3";
const info = ref({ const info = ref({
all: 0, all: 0,
@ -108,16 +110,12 @@ fnGetData();
height: 34px; height: 34px;
} }
div:nth-child(2) { > div:nth-child(2) {
margin-left: 10px; margin-left: 10px;
span { .countup-wrap {
display: block; color: #f8b62d;
font-size: 20px;
&:first-child {
color: #f8b62d;
font-size: 20px;
}
} }
} }
} }

38
src/views/large_screen_data_display/components/troubleshooting_type.vue
View File

@ -4,16 +4,25 @@
<div class="p-20"> <div class="p-20">
<div class="top"> <div class="top">
<div> <div>
<div>现场类清单数</div> <div class="top_title">现场类清单数</div>
<div>{{ info["现场清单"] || 0 }}个</div> <count-to
:end-val="info['现场清单'] || 0"
:options="{ suffix: '个' }"
/>
</div> </div>
<div> <div>
<div>基础类清单数</div> <div class="top_title">基础类清单数</div>
<div>{{ info["基础类清单"] || 0 }}个</div> <count-to
:end-val="info['基础类清单'] || 0"
:options="{ suffix: '个' }"
/>
</div> </div>
<div> <div>
<div>综合类清单数</div> <div class="top_title">综合类清单数</div>
<div>{{ info["综合类清单"] || 0 }}个</div> <count-to
:end-val="info['综合类清单'] || 0"
:options="{ suffix: '个' }"
/>
</div> </div>
</div> </div>
<div class="bottom"> <div class="bottom">
@ -46,6 +55,7 @@ import {
import { sumBy } from "lodash-es"; import { sumBy } from "lodash-es";
import { arrayObjectDeduplication } from "@/assets/js/utils.js"; import { arrayObjectDeduplication } from "@/assets/js/utils.js";
import * as echarts from "echarts"; import * as echarts from "echarts";
import CountTo from "vue-countup-v3";
const info = ref({}); const info = ref({});
@ -98,10 +108,8 @@ const fnInitEcharts = (count, total, color, el) => {
type: "bar", type: "bar",
zlevel: 1, zlevel: 1,
itemStyle: { itemStyle: {
normal: { barBorderRadius: 0,
barBorderRadius: 0, color,
color,
},
}, },
label: { label: {
show: true, show: true,
@ -117,10 +125,8 @@ const fnInitEcharts = (count, total, color, el) => {
barGap: "-100%", barGap: "-100%",
data: [total], data: [total],
itemStyle: { itemStyle: {
normal: { color: "#101f48",
color: "#101f48", barBorderRadius: 0,
barBorderRadius: 0,
},
}, },
}, },
], ],
@ -156,11 +162,11 @@ const fnInitEcharts = (count, total, color, el) => {
border: 4px solid #0d2565; border: 4px solid #0d2565;
padding: 5px 20px 5px 5px; padding: 5px 20px 5px 5px;
div:nth-child(1) { .top_title {
color: #fff; color: #fff;
} }
div:nth-child(2) { .countup-wrap {
color: #04cbfd; color: #04cbfd;
text-align: right; text-align: right;
padding-top: 5px; padding-top: 5px;

8
src/views/major_hazard_sources/real_time_data_monitoring/view.vue
View File

@ -503,12 +503,10 @@ const fnInitEcharts = (echartsData, example, id) => {
{ {
name: echartsData.legend[0], name: echartsData.legend[0],
itemStyle: { itemStyle: {
normal: { color: echartsData.color[0],
lineStyle: {
color: echartsData.color[0], color: echartsData.color[0],
lineStyle: { width: 2,
color: echartsData.color[0],
width: 2,
},
}, },
}, },
smooth: true, smooth: true,