DY-JMXF/dy_web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始提交

Browse Source
This commit is contained in:
DEV_ZZ
2025-09-04 16:27:57 +08:00
commit f2faa2d5fd
1076 changed files with 478489 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
src/views/backOfficeSystem/patrolStatistics/patrolResources/mobileEquipment/components/pie.vue Normal file
View File

@ -0,0 +1,214 @@
<template>
<div>
<div id="circlecz" style="width: 1000px; height: 100%"></div>
</div>
</template>
<script setup>
import * as echarts from "echarts";
import { ref, onMounted, watch, defineProps } from "vue";
const props = defineProps({
data: { type: Array }
});
watch(
() => props.data,
() => {
lineChartFn();
}
);
function lineChartFn() {
var chartDom = document.getElementById("circlecz");
var myChart = echarts.init(chartDom);
var option;
option = {
legend: {
type: "plain",
show: true,
right: 0,
textStyle: {
color: "#ddd"
},
data: [
{
name: "对讲机"
},
{ name: "警务终端" },
{ name: "执法记录仪" }
]
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
grid: {
top: "25%",
right: "3%",
left: "5%",
bottom: "12%"
},
xAxis: [
{
type: "category",
data: props.data.map((item) => item.ssbm),
axisLine: {
lineStyle: {
color: "rgba(255,255,255,0.12)"
}
},
axisLabel: {
margin: 10,
color: "#e2e9ff",
textStyle: {
fontSize: 14
}
}
}
],
yAxis: [
{
// name: '单位：万元',
axisLabel: {
formatter: "{value}",
color: "#e2e9ff"
},
axisLine: {
show: false,
lineStyle: {
color: "rgba(255,255,255,1)"
}
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.12)"
}
}
}
],
series: [
{
name: "对讲机",
type: "bar",
data: props.data.map((item) => item.djj),
barWidth: "30px",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(0,244,255,1)" // 0% 处的颜色
},
{
offset: 1,
color: "rgba(0,77,167,1)" // 100% 处的颜色
}
],
false
),
barBorderRadius: [30, 30, 30, 30],
shadowColor: "rgba(0,160,221,1)",
shadowBlur: 4
}
},
label: {
normal: {
show: true
}
}
},
{
name: "警务终端",
type: "bar",
data: props.data.map((item) => item.jwzd),
barWidth: "30px",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(121, 88, 238, 1)" // 0% 处的颜色
},
{
offset: 1,
color: "rgba(79, 2, 135, 1)" // 100% 处的颜色
}
],
false
),
barBorderRadius: [30, 30, 30, 30],
shadowColor: "rgba(0,160,221,1)",
shadowBlur: 4
}
},
label: {
normal: {
show: true
}
}
},
{
name: "执法记录仪",
type: "bar",
data: props.data.map((item) => item.zfjly),
barWidth: "30px",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(24, 232, 229, 1)" // 0% 处的颜色
},
{
offset: 1,
color: "rgba(3, 110, 83, 1)" // 100% 处的颜色
}
],
false
),
barBorderRadius: [30, 30, 30, 30],
shadowColor: "rgba(0,160,221,1)",
shadowBlur: 4
}
},
label: {
normal: {
show: true
},
position: "top"
}
}
]
};
option && myChart.setOption(option);
window.onresize = function () {
myChart.resize();
};
document.getElementById("circlecz").setAttribute("_echarts_instance_", "");
}
onMounted(() => {
lineChartFn();
});
</script>
<style lang="scss" scoped>
.dd {
color: rgba(79, 2, 135, 0.326);
}
</style>