更新
This commit is contained in:
parent
7ef5a303e8
commit
3b4ffc6a06
|
|
@ -1,162 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="circlecz" class="circlecz" style="width: 100%; height: 100%"></div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { ref, onMounted, watch, defineProps } from "vue";
|
|
||||||
|
|
||||||
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: "已处置" }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: "axis",
|
|
||||||
axisPointer: {
|
|
||||||
type: "shadow"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: "25%",
|
|
||||||
right: "10%",
|
|
||||||
left: "10%",
|
|
||||||
bottom: "22%"
|
|
||||||
},
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: "category",
|
|
||||||
data: ['巴宜区','工布江达县','波密县','朗县','墨脱县','察隅县','米林县'],
|
|
||||||
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: [10,20,30,40,50,60,70],
|
|
||||||
barWidth: "10px",
|
|
||||||
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
|
|
||||||
),
|
|
||||||
}
|
|
||||||
},
|
|
||||||
markPoint: {
|
|
||||||
symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
|
|
||||||
symbolSize: [11, 4], // 设置扁圆的宽和高
|
|
||||||
itemStyle: {
|
|
||||||
color: '#087df9' // 圆盘颜色
|
|
||||||
},
|
|
||||||
data: [10,20,30,40,50,60,70].map((obj, index) => ({
|
|
||||||
xAxis: index, // 对应柱子的横坐标
|
|
||||||
yAxis: obj + 0 // 柱子的值加上一些偏移量
|
|
||||||
}))
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "已处置",
|
|
||||||
type: "bar",
|
|
||||||
data: [10,20,30,40,50,60,70],
|
|
||||||
barWidth: "10px",
|
|
||||||
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
|
|
||||||
),
|
|
||||||
}
|
|
||||||
},
|
|
||||||
markPoint: {
|
|
||||||
symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
|
|
||||||
symbolSize: [11, 4], // 设置扁圆的宽和高
|
|
||||||
itemStyle: {
|
|
||||||
color: '#00FFFF' // 圆盘颜色
|
|
||||||
},
|
|
||||||
data: [10,20,30,40,50,60,70].map((obj, index) => ({
|
|
||||||
xAxis: index, // 对应柱子的横坐标
|
|
||||||
yAxis: obj + 0 // 柱子的值加上一些偏移量
|
|
||||||
}))
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
window.onresize = function () {
|
|
||||||
myChart.resize();
|
|
||||||
};
|
|
||||||
document.getElementById("circlecz").setAttribute("_echarts_instance_", "");
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
lineChartFn();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.circlecz {
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(0,29,75,0.6);
|
|
||||||
border-radius: 0 0 4px 4px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,142 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="carCnt_bottom relative flex align-center">
|
|
||||||
<div class="bottom-item-left">
|
|
||||||
<div class="imgIcon"></div>
|
|
||||||
<div class="leftImg">
|
|
||||||
<div class="sirxle"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ul class="bottom-item-right noScollLine">
|
|
||||||
<li class="itemChild" v-for="item in dataObj.countList" :key="item">
|
|
||||||
<div class="label">
|
|
||||||
<span class="imgicon mr10" :style="{ background: item.color }"></span>
|
|
||||||
{{ item.label }}
|
|
||||||
</div>
|
|
||||||
<div class="num">{{ item.num }}</div>
|
|
||||||
<div class="per" :style="{ color: item.color }">{{ item.persont }}</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { onMounted, ref, reactive,defineProps, onUnmounted } from "vue";
|
|
||||||
const dataObj = reactive({
|
|
||||||
btns:['今日','本周','自定义'],//按钮
|
|
||||||
head:{num:0,hb:0,tb:0},
|
|
||||||
countList:[
|
|
||||||
{color:'#F57100',label:'刑事重点人员',num:0,persont:'0%'},
|
|
||||||
{color:'#FFD15C',label:'禁毒重点人员',num:0,persont:'0%'},
|
|
||||||
{color:'#0072FF',label:'治安重点人员',num:0,persont:'0%'},
|
|
||||||
{color:'#00FFFF',label:'经侦重点人员',num:0,persont:'0%'},
|
|
||||||
{color:'#09FF66',label:'其他',num:0,persont:'0%'},
|
|
||||||
]
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@mixin textColor($color1, $color2) {
|
|
||||||
background-image: linear-gradient(0deg, $color1 0%, $color2 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
@mixin beforeText($width, $height, $left: 0, $top: 0) {
|
|
||||||
position: absolute;
|
|
||||||
content: "";
|
|
||||||
left: $left;
|
|
||||||
top: $top;
|
|
||||||
height: $height;
|
|
||||||
width: $width;
|
|
||||||
}
|
|
||||||
.carCnt_bottom {
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
background: rgba(0,29,75,0.6);
|
|
||||||
border-radius: 0 0 4px 4px;
|
|
||||||
.bottom-item-left {
|
|
||||||
width: 120px;
|
|
||||||
height: 120px;
|
|
||||||
position: absolute;
|
|
||||||
left: 10px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
.imgIcon {
|
|
||||||
position: absolute;
|
|
||||||
left: 39px;
|
|
||||||
top: 40px;
|
|
||||||
width: 42px;
|
|
||||||
height: 40px;
|
|
||||||
background: url("~@/assets/images/imgIcon1.png") no-repeat center center;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: spin 10s infinite linear;
|
|
||||||
}
|
|
||||||
.leftImg {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
content: "";
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 120px;
|
|
||||||
height: 120px;
|
|
||||||
background: url("~@/assets/images/sircleOut.png") no-repeat center
|
|
||||||
center;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
animation: revoleCrile 10s infinite linear;
|
|
||||||
}
|
|
||||||
.sirxle {
|
|
||||||
position: absolute;
|
|
||||||
width: 91px;
|
|
||||||
height: 91px;
|
|
||||||
left: 15px;
|
|
||||||
top: 15px;
|
|
||||||
background: url("~@/assets/images/sircleIn.png") no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.bottom-item-right {
|
|
||||||
width: calc(100% - 150px);
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
margin-left: 30px;
|
|
||||||
position: absolute;
|
|
||||||
left: 116px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
.itemChild {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
height: 26px;
|
|
||||||
border-bottom: 1px dashed #0072ff;
|
|
||||||
}
|
|
||||||
.label {
|
|
||||||
width: 60%;
|
|
||||||
.imgicon {
|
|
||||||
display: inline-block;
|
|
||||||
width: 13px;
|
|
||||||
height: 6px;
|
|
||||||
border-radius: 2px;
|
|
||||||
transform: rotate(-3deg) skew(5deg, 5deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.num {
|
|
||||||
width: 20%;
|
|
||||||
}
|
|
||||||
.per {
|
|
||||||
width: 20%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes spin {
|
|
||||||
to {
|
|
||||||
transform: rotate((1turn));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -32,40 +32,31 @@
|
||||||
<!-- 右边模块 -->
|
<!-- 右边模块 -->
|
||||||
<div class="rightList">
|
<div class="rightList">
|
||||||
<!-- 第一部门 -->
|
<!-- 第一部门 -->
|
||||||
<div>
|
<div class="model-commom">
|
||||||
<div class="hed flex align-center">
|
<div class="hed flex align-center">区域统计</div>
|
||||||
<span @click="active = it" :class="active == it ? 'active' : ''" class="f14 mr10 pointer" v-for="it in btn.bkBtn" :key="it">{{ it }}</span>
|
<div class="comm-cnt">
|
||||||
|
<BarHatEcharts echartsId="qylxEcharts" :data="list.QylxDate"></BarHatEcharts>
|
||||||
</div>
|
</div>
|
||||||
<Count></Count>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- 第二部分 -->
|
<!-- 第二部分 -->
|
||||||
<div class="mt10">
|
<div class="model-commom mt10">
|
||||||
<div class="hed flex align-center">布控级别统计</div>
|
<div class="hed flex align-center">人员类型统计</div>
|
||||||
<div style="width: 100%; height: 170px">
|
<div class="comm-cnt">
|
||||||
<Bkjbtj></Bkjbtj>
|
<BarHatEcharts echartsId="rylxEcharts" :data="list.RylxDate"></BarHatEcharts>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 第三部分 -->
|
<!-- 第三部分 -->
|
||||||
<div class="mt10">
|
<div class="model-commom mt10">
|
||||||
<div class="hed flex align-center">
|
<div class="hed flex align-center">感知源统计</div>
|
||||||
<span
|
<div class="comm-cnt">
|
||||||
@click="active1 = it"
|
<BarHatEcharts echartsId="gzyEcharts" :data="list.GzyDate"></BarHatEcharts>
|
||||||
:class="active1 == it ? 'active' : ''"
|
|
||||||
class="f14 mr10 pointer"
|
|
||||||
v-for="it in btn.yrBtn"
|
|
||||||
:key="it"
|
|
||||||
>{{ it }}</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div style="width: 100%; height: 170px">
|
|
||||||
<RyCount></RyCount>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 第四部分 -->
|
<!-- 第四部分 -->
|
||||||
<div class="mt10">
|
<div class="model-commom mt10">
|
||||||
<div class="hed flex align-center">轨迹统计</div>
|
<div class="hed flex align-center">预警等级统计</div>
|
||||||
<div style="width: 100%; height: 170px">
|
<div class="comm-cnt">
|
||||||
<Gjtj></Gjtj>
|
<WarningCount></WarningCount>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -81,9 +72,8 @@
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
import * as MOSTY from "@/components/MyComponents/index";
|
||||||
import YjItem from "./components/yjItem.vue";
|
import YjItem from "./components/yjItem.vue";
|
||||||
import Count from "./components/count.vue";
|
import Count from "./components/count.vue";
|
||||||
import Bkjbtj from "./components/bkjbtj.vue";
|
import WarningCount from "./components/WarningCount.vue";
|
||||||
import RyCount from "./components/ryCount.vue";
|
import BarHatEcharts from "@/views/home/echarts/barHatEcharts.vue";
|
||||||
import Gjtj from "./components/gjtj.vue";
|
|
||||||
import { reactive, ref } from "vue";
|
import { reactive, ref } from "vue";
|
||||||
const listQuery = ref({
|
const listQuery = ref({
|
||||||
keyword: ""
|
keyword: ""
|
||||||
|
|
@ -110,6 +100,29 @@ const search = reactive({
|
||||||
const searchForm = ref({
|
const searchForm = ref({
|
||||||
keyword: ""
|
keyword: ""
|
||||||
});
|
});
|
||||||
|
const list = reactive({
|
||||||
|
GzyDate: {
|
||||||
|
xDate: ['巴宜区', '工布江达县', '波密县', '朗县', '墨脱县', '察隅县', '米林县'],
|
||||||
|
list:[
|
||||||
|
{ name: "总数", value: [10,20,30,40,50,60,70] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
|
||||||
|
{ name: "已处置", value: [10,20,30,40,50,60,70],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
RylxDate: {
|
||||||
|
xDate: ['类型1', '类型2', '类型3', '类型4', '类型5', '类型6'],
|
||||||
|
list:[
|
||||||
|
{ name: "总数", value: [10,20,30,40,50,60] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
|
||||||
|
{ name: "已处置", value: [10,20,30,40,50,60],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
QylxDate: {
|
||||||
|
xDate: ['区域1', '区域2', '区域3', '区域4', '区域5', '区域6'],
|
||||||
|
list:[
|
||||||
|
{ name: "总数", value: [10,20,30,40,50,60] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
|
||||||
|
{ name: "已处置", value: [10,20,30,40,50,60],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
})
|
||||||
const personList = ref([
|
const personList = ref([
|
||||||
{
|
{
|
||||||
name: "张三",
|
name: "张三",
|
||||||
|
|
@ -220,9 +233,12 @@ const active1 = ref("人员身份标签统计");
|
||||||
top: 10px;
|
top: 10px;
|
||||||
width: 427px;
|
width: 427px;
|
||||||
height: calc(100% - 20px);
|
height: calc(100% - 20px);
|
||||||
.active {
|
.model-commom{
|
||||||
font-size: 18px;
|
height: calc((100% / 4) - 10px);
|
||||||
font-family: "YSBTH";
|
}
|
||||||
|
.comm-cnt{
|
||||||
|
height: calc(100% - 40px);
|
||||||
|
background: rgba(0,29,75,0.6);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.footBox{
|
.footBox{
|
||||||
|
|
|
||||||
138
src/views/home/echarts/barHatEcharts.vue
Normal file
138
src/views/home/echarts/barHatEcharts.vue
Normal file
|
|
@ -0,0 +1,138 @@
|
||||||
|
<template>
|
||||||
|
<div style="height:100%;width:100%" :id="echartsId"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import { nextTick , onMounted, watch, defineProps } from "vue";
|
||||||
|
const props = defineProps({
|
||||||
|
echartsId:{
|
||||||
|
type:String,
|
||||||
|
default:'barHatId'
|
||||||
|
},
|
||||||
|
data:{
|
||||||
|
type:Object,
|
||||||
|
default:{
|
||||||
|
xDate: ['巴宜区', '工布江达县', '波密县', '朗县', '墨脱县', '察隅县', '米林县'],
|
||||||
|
list:[
|
||||||
|
{ name: "总数", value: [10,20,30,40,50,60,70] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
|
||||||
|
{ name: "已处置", value: [10,20,30,40,50,60,70],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF' },
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(()=>props.data,val=>{
|
||||||
|
nextTick(()=>{ handleDate() })
|
||||||
|
},{immediate:true,deep:true})
|
||||||
|
|
||||||
|
// 处理数据
|
||||||
|
function handleDate() {
|
||||||
|
let xDate = props.data.xDate;
|
||||||
|
let legend = props.data.list.map(v=>{return {name:v.name}})
|
||||||
|
let series = props.data.list.map((item,i)=>{
|
||||||
|
let obj = {
|
||||||
|
name: item.name,
|
||||||
|
type: "bar",
|
||||||
|
data: item.value,
|
||||||
|
barWidth: "10px",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0,0,0,1,[
|
||||||
|
{ offset: 0, color: item.color ? item.color[0] : "rgba(0,244,255,1)" },
|
||||||
|
{ offset: 1, color: item.color ? item.color[1] : "rgba(0,77,167,1)" }],false),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
markPoint: {
|
||||||
|
symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
|
||||||
|
symbolSize: [11, 4], // 设置扁圆的宽和高
|
||||||
|
itemStyle: { color: item.hatColor || '#087df9' },// 圆盘颜色
|
||||||
|
data: item.value.map((obj, index) => ({
|
||||||
|
xAxis: index, // 对应柱子的横坐标
|
||||||
|
yAxis: obj + 0 // 柱子的值加上一些偏移量
|
||||||
|
}))
|
||||||
|
},
|
||||||
|
}
|
||||||
|
return obj
|
||||||
|
})
|
||||||
|
lineChartFn(xDate,legend,series)
|
||||||
|
}
|
||||||
|
|
||||||
|
function lineChartFn(xDate,legend,series) {
|
||||||
|
var myChart = echarts.init(document.getElementById(props.echartsId));
|
||||||
|
var option = {
|
||||||
|
legend: {
|
||||||
|
type: "plain",
|
||||||
|
show: true,
|
||||||
|
right: 0,
|
||||||
|
textStyle: { color: "#ddd" },
|
||||||
|
data: legend
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
type: "shadow"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: "25%",
|
||||||
|
right: "5%",
|
||||||
|
left: "10%",
|
||||||
|
bottom: "22%"
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
data: xDate,
|
||||||
|
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: series
|
||||||
|
};
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
window.onresize = function () { myChart.resize(); };
|
||||||
|
document.getElementById(props.echartsId).setAttribute("_echarts_instance_", "");
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
lineChartFn();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.circlecz {
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0,29,75,0.6);
|
||||||
|
border-radius: 0 0 4px 4px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -3,161 +3,25 @@
|
||||||
<span class="title">情报来源类型</span>
|
<span class="title">情报来源类型</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="comom-cnt">
|
<div class="comom-cnt">
|
||||||
<div id="qbltBox" class="qbltBox" style="width: 100%; height: 100%"></div>
|
<BarHatEcharts echartsId="qbltBox" :data="list"></BarHatEcharts>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import LineEcharts from "../echarts/moreLineEcharts.vue";
|
import LineEcharts from "../echarts/moreLineEcharts.vue";
|
||||||
|
import BarHatEcharts from "@/views/home/echarts/barHatEcharts.vue";
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
import { ref, onMounted, watch, defineProps } from "vue";
|
import { ref, onMounted, watch, defineProps, reactive } from "vue";
|
||||||
|
const list = reactive({
|
||||||
|
xDate: ['110警情','人力情报','系统采集','民警处置单'],
|
||||||
|
list:[
|
||||||
|
{ name: "总数", value: [40,50,60,70] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
|
||||||
|
{ name: "已处置", value: [10,40,50,70],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF' },
|
||||||
|
],
|
||||||
|
})
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
lineChartFn();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
function lineChartFn() {
|
|
||||||
var chartDom = document.getElementById("qbltBox");
|
|
||||||
var myChart = echarts.init(chartDom);
|
|
||||||
var option;
|
|
||||||
option = {
|
|
||||||
legend: {
|
|
||||||
type: "plain",
|
|
||||||
show: true,
|
|
||||||
right: 0,
|
|
||||||
textStyle: { color: "#ddd" },
|
|
||||||
data: [
|
|
||||||
{ name: "总数" },
|
|
||||||
{ name: "已处置" }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: "axis",
|
|
||||||
axisPointer: {
|
|
||||||
type: "shadow"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: "25%",
|
|
||||||
right: "5%",
|
|
||||||
left: "5%",
|
|
||||||
bottom: "22%"
|
|
||||||
},
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: "category",
|
|
||||||
data: ['110警情','人力情报','系统采集','民警处置单'],
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: "rgba(255,255,255,0.12)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
margin: 10,
|
|
||||||
color: "#e2e9ff",
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 14
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
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: [10,20,30,40],
|
|
||||||
barWidth: "10px",
|
|
||||||
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
|
|
||||||
),
|
|
||||||
}
|
|
||||||
},
|
|
||||||
markPoint: {
|
|
||||||
symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
|
|
||||||
symbolSize: [11, 4], // 设置扁圆的宽和高
|
|
||||||
itemStyle: {
|
|
||||||
color: '#087df9' // 圆盘颜色
|
|
||||||
},
|
|
||||||
data: [10,20,30,40].map((obj, index) => ({
|
|
||||||
xAxis: index, // 对应柱子的横坐标
|
|
||||||
yAxis: obj + 0 // 柱子的值加上一些偏移量
|
|
||||||
}))
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "已处置",
|
|
||||||
type: "bar",
|
|
||||||
data: [40,50,60,70],
|
|
||||||
barWidth: "10px",
|
|
||||||
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
|
|
||||||
),
|
|
||||||
}
|
|
||||||
},
|
|
||||||
markPoint: {
|
|
||||||
symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
|
|
||||||
symbolSize: [11, 4], // 设置扁圆的宽和高
|
|
||||||
itemStyle: {
|
|
||||||
color: '#00FFFF' // 圆盘颜色
|
|
||||||
},
|
|
||||||
data: [40,50,60,70].map((obj, index) => ({
|
|
||||||
xAxis: index, // 对应柱子的横坐标
|
|
||||||
yAxis: obj + 0 // 柱子的值加上一些偏移量
|
|
||||||
}))
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
window.onresize = function () {
|
|
||||||
myChart.resize();
|
|
||||||
};
|
|
||||||
document.getElementById("qbltBox").setAttribute("_echarts_instance_", "");
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user