suojin
/
resolve_err_dashboard
16
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改echarts图表样式

Browse Source
main
jinna 3 years ago
parent ad1888f816
commit 0367077895
1 changed files with 252 additions and 164 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 306
      src/views/HomeView.vue

306
src/views/HomeView.vue
Unescape View File

@ -15,25 +15,25 @@
<TheTitle></TheTitle> --> <TheTitle></TheTitle> -->
<!-- </div> --> <!-- </div> -->
<div class="container"> <div class="container">
<div class="time_box">{{date}} {{time}}</div> <div class="time_box">{{ date }} {{ time }}</div>
<!-- <div class="wea_box"> <!-- <div class="wea_box">
<img src="" alt=""> <img src="" alt="">
</div> --> </div> -->
<div class="center_box"> <div class="center_box">
<div class="sb_box"> <div class="sb_box">
<div style="margin-right:8px; ">今日上报数</div> <div style="margin-right: 8px">今日上报数</div>
<div><span class="number_txt">7</span> <span class="num_name">件</span></div> <div><span class="number_txt">7</span> <span class="num_name">件</span></div>
</div> </div>
<div class="sb_box cen"> <div class="sb_box cen">
<div style="margin-right:8px; ">本周上报数</div> <div style="margin-right: 8px">本周上报数</div>
<div><span class="number_txt">25</span> <span class="num_name">件</span></div> <div><span class="number_txt">25</span> <span class="num_name">件</span></div>
</div> </div>
<div class="sb_box cen"> <div class="sb_box cen">
<div style="margin-right:8px; ">本月上报数</div> <div style="margin-right: 8px">本月上报数</div>
<div><span class="number_txt">32</span> <span class="num_name">件</span></div> <div><span class="number_txt">32</span> <span class="num_name">件</span></div>
</div> </div>
<div class="sb_box last"> <div class="sb_box last">
<div style="margin-right:8px; ">本年上报数</div> <div style="margin-right: 8px">本年上报数</div>
<div><span class="number_txt">7</span> <span class="num_name">件</span></div> <div><span class="number_txt">7</span> <span class="num_name">件</span></div>
</div> </div>
</div> </div>
@ -43,25 +43,25 @@
<div class="top_con"> <div class="top_con">
<div class="con_box day"> <div class="con_box day">
<div class="con_txt"> <div class="con_txt">
<div class="num_txt">{{monReso}}</div> <div class="num_txt">{{ monReso }}</div>
<div >本月化解</div> <div>本月化解</div>
</div> </div>
</div> </div>
<div class="con_box qua"> <div class="con_box qua">
<div class="con_txt"> <div class="con_txt">
<div class="num_txt">{{quaReso}}</div> <div class="num_txt">{{ quaReso }}</div>
<div>本季度化解</div> <div>本季度化解</div>
</div> </div>
</div> </div>
<div class="con_box year"> <div class="con_box year">
<div class="con_txt"> <div class="con_txt">
<div class="num_txt">{{yearReso}}</div> <div class="num_txt">{{ yearReso }}</div>
<div>本年度化解</div> <div>本年度化解</div>
</div> </div>
</div> </div>
<div class="con_box all"> <div class="con_box all">
<div class="con_txt"> <div class="con_txt">
<div class="num_txt">{{allReso}}</div> <div class="num_txt">{{ allReso }}</div>
<div>截至目前总化解</div> <div>截至目前总化解</div>
</div> </div>
</div> </div>
@ -98,7 +98,7 @@
<div class="chart_box" id="trendChart"></div> <div class="chart_box" id="trendChart"></div>
</div> </div>
<div class="hj_box"> <div class="hj_box">
<div class="title">矛盾纠纷月份趋势统计</div> <div class="title">矛盾纠纷类型占比统计</div>
<div class="chart_box pie" id="pieChart"></div> <div class="chart_box pie" id="pieChart"></div>
</div> </div>
</div> </div>
@ -121,7 +121,10 @@
<div class="bottom_box"> <div class="bottom_box">
<div class="sele_box"> <div class="sele_box">
<el-select v-model="timeFrame" class="slect_box" popper-class="select_time"> <el-select v-model="timeFrame" class="slect_box" popper-class="select_time">
<el-option v-for="item in timeData" :key="item.value" :label="item.label" <el-option
v-for="item in timeData"
:key="item.value"
:label="item.label"
:value="item.value" :value="item.value"
></el-option> ></el-option>
</el-select> </el-select>
@ -134,12 +137,19 @@
type="daterange" type="daterange"
range-separator="-" range-separator="-"
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期"> end-placeholder="结束日期"
>
</el-date-picker> </el-date-picker>
</div> </div>
<div class="btn_box" @click="handleReli(1)" :class="active == 1 ? 'actived' : ''">事件上报热力图</div> <div class="btn_box" @click="handleReli(1)" :class="active == 1 ? 'actived' : ''">
<div class="btn_box" @click="handleReli(2)" :class="active == 2 ? 'actived' : ''">矛盾解决热力图</div> 事件上报热力图
<div class="btn_box" @click="handleReli(3)" :class="active == 3 ? 'actived' : ''">越级上报热力图</div> </div>
<div class="btn_box" @click="handleReli(2)" :class="active == 2 ? 'actived' : ''">
矛盾解决热力图
</div>
<div class="btn_box" @click="handleReli(3)" :class="active == 3 ? 'actived' : ''">
越级上报热力图
</div>
</div> </div>
</div> </div>
</div> </div>
@ -155,7 +165,7 @@ import AmapBg from "@/components/map.vue";
import { getZoom } from "@/libs/util"; import { getZoom } from "@/libs/util";
import { selected_area$ } from "@/subjects/sub"; import { selected_area$ } from "@/subjects/sub";
import vueSeamless from "vue-seamless-scroll"; import vueSeamless from "vue-seamless-scroll";
import {queryResolve} from "@/api/home" import { queryResolve } from "@/api/home";
export default { export default {
name: "", name: "",
components: { components: {
@ -168,13 +178,13 @@ export default {
}, },
data() { data() {
return { return {
reliData:[], reliData: [],
timeFrame:1, timeFrame: 1,
ob: null, ob: null,
selectedArea: null, selectedArea: null,
zoom: 1, zoom: 1,
date:'', date: "",
time:'', time: "",
calssOption: { calssOption: {
step: 0.2, // 数值越大速度滚动越快 step: 0.2, // 数值越大速度滚动越快
limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
@ -185,15 +195,15 @@ export default {
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000, // 单步运动停止的时间(默认值1000ms) waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
}, },
timeData:[ timeData: [
{label:'月',value:1}, { label: "月", value: 1 },
{label:'季',value:2}, { label: "季", value: 2 },
{label:'年',value:3}, { label: "年", value: 3 },
], ],
trendChart: null, trendChart: null,
pieChart: null, pieChart: null,
phChart: null, phChart: null,
deptChart:null, deptChart: null,
listData: [ listData: [
{ {
disputeName: "矛盾纠纷", disputeName: "矛盾纠纷",
@ -285,19 +295,19 @@ export default {
crtHeight: 400, crtHeight: 400,
domId: "dom1", domId: "dom1",
mixedVideoDisplayMode: 2, mixedVideoDisplayMode: 2,
active:'1', active: "1",
timePicker:'', timePicker: "",
monReso:'', monReso: "",
quaReso:'', quaReso: "",
yearReso:'', yearReso: "",
allReso:'' allReso: "",
}; };
}, },
mounted() { mounted() {
this.ws = this.DHWs.getInstance(); this.ws = this.DHWs.getInstance();
// console.log(ws) // console.log(ws)
this.reliData = [{胶东街道:2, 洋河镇:80, 铺集镇:90,九龙街道:40}] this.reliData = [{ 胶东街道: 2, 洋河镇: 80, 铺集镇: 90, 九龙街道: 40 }];
this.ob = selected_area$.subscribe((obj) => { this.ob = selected_area$.subscribe((obj) => {
this.selectedArea = obj; this.selectedArea = obj;
@ -308,7 +318,7 @@ export default {
this.zoom = getZoom(); this.zoom = getZoom();
}); });
this.$nextTick(() => { this.$nextTick(() => {
this.getTime() this.getTime();
this.createChart(); this.createChart();
this.createPieChart(); this.createPieChart();
this.createPhChart(); this.createPhChart();
@ -319,28 +329,28 @@ export default {
beforeUnmount() { beforeUnmount() {
this.ob?.unsubscribe(); this.ob?.unsubscribe();
}, },
created(){ created() {
this.getResolve() this.getResolve();
}, },
methods: { methods: {
handleReli(val){ handleReli(val) {
this.active = val; this.active = val;
if(val == 1){ if (val == 1) {
this.reliData = [{胶东街道:2, 洋河镇:80, 铺集镇:90,九龙街道:40}] this.reliData = [{ 胶东街道: 2, 洋河镇: 80, 铺集镇: 90, 九龙街道: 40 }];
}else if(val == 2){ } else if (val == 2) {
this.reliData = [{里岔镇:20, 胶西街道:80, 中云街道:90,九龙街道:40}] this.reliData = [{ 里岔镇: 20, 胶西街道: 80, 中云街道: 90, 九龙街道: 40 }];
}else if(val == 3){ } else if (val == 3) {
this.reliData = [{阜安街道:50, 三里河街道:84, 胶东街道:86,胶北街道:40}] this.reliData = [{ 阜安街道: 50, 三里河街道: 84, 胶东街道: 86, 胶北街道: 40 }];
} }
}, },
getResolve(){ getResolve() {
queryResolve().then(res =>{ queryResolve().then((res) => {
console.log('化解数据',res) console.log("化解数据", res);
this.monReso = res.data.mon this.monReso = res.data ? res.data.mon : 1;
this.quaReso = res.data.quarterly this.quaReso = res.data ? res.data.quarterly : 3;
this.yearReso = res.data.year (this.yearReso = res.data ? res.data.year : 10),
this.allReso = res.data.all (this.allReso = res.data ? res.data.all : 20);
}) });
}, },
fn(str) { fn(str) {
let num = null; let num = null;
@ -458,10 +468,23 @@ export default {
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
this.trendChart.resize(); this.trendChart.resize();
}); });
let pictorialData1 = [];
let pictorialData2 = [];
this.yData1.map((v) => {
pictorialData1.push({ value: v, symbolPosition: "end" });
});
this.yData2.map((v) => {
pictorialData2.push({ value: v, symbolPosition: "end" });
});
var option = { var option = {
color: ["#115fff", "#1dd58e"], color: ["#115fff", "#1dd58e"],
legend: { legend: {
data: ["矛盾登记数", "调解成功数"], data: [
{ name: "矛盾登记数", itemStyle: { color: "#47c5f0" } },
{ name: "调解成功数", itemStyle: { color: "#02e8f1" } },
],
itemWidth: 8,
itemHeight: 8,
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: this.fontSize(12), fontSize: this.fontSize(12),
@ -511,24 +534,52 @@ export default {
}, },
series: [ series: [
{ {
z: 1,
name: "矛盾登记数", name: "矛盾登记数",
type: "bar", type: "bar",
data: this.yData1, data: this.yData1,
itemStyle: { itemStyle: {
normal: { normal: {
color: "rgb(71, 197, 240)", color: "rgba(71, 197, 240,0.45)",
}, },
}, },
}, },
{ {
z: 2,
name: "调解成功数", name: "调解成功数",
type: "bar", type: "bar",
data: this.yData2, data: this.yData2,
itemStyle: { itemStyle: {
normal: { normal: {
color: "rgb(2, 232, 241)", color: "rgba(2, 232, 241,0.45)",
},
},
}, },
{
z: 1,
type: "pictorialBar",
symbol: "rect",
symbolPosition: "end",
symbolSize: [20, 3],
symbolOffset: ["-60%", "-3"],
itemStyle: {
color: "#47c5f0",
},
tooltip: { show: false },
data: this.yData1,
}, },
{
z: 2,
type: "pictorialBar",
symbol: "rect",
symbolPosition: "end",
symbolSize: [20, 3],
symbolOffset: ["60%", "-3"],
itemStyle: {
color: "#02e8f1",
},
tooltip: { show: false },
data: this.yData2,
}, },
], ],
}; };
@ -548,6 +599,8 @@ export default {
textStyle: { textStyle: {
color: "#fff", color: "#fff",
}, },
itemWidth: 35,
itemHeight: 3,
}, },
series: [ series: [
{ {
@ -584,12 +637,8 @@ export default {
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
this.phChart.resize(); this.phChart.resize();
}); });
var colorList = [ var colorList = ["#00ff00", "#ffba00", "#ff3e54", "#36cfd9"];
"#70d74d", var colorList1 = ["rgba(112 ,215, 77,0.8)", "rgba(243,151,0,0.8)", "rgba(222, 70, 87,0.8)", "rgba(71, 197, 240,0.5)"];
"#f39700",
"#de4657",
"#47c5f0",
];
var datas = [ var datas = [
{ {
value: 99, value: 99,
@ -645,10 +694,10 @@ export default {
show: false, show: false,
}, },
grid: { grid: {
top:3, top: 3,
left: 0, left: 0,
right: 10, right: 10,
bottom:0, bottom: 0,
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: {
@ -706,11 +755,11 @@ export default {
itemStyle.color = new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [ itemStyle.color = new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ {
offset: 0, offset: 0,
color: i < 3 ? colorList[i] : colorList[3], color: i < 3 ? colorList1[i] : colorList1[3],
}, },
{ {
offset: 1, offset: 1,
color: i < 3 ? colorList[i] : colorList[3], color: i < 3 ? colorList1[i] : colorList1[3],
}, },
]); ]);
return { return {
@ -722,6 +771,28 @@ export default {
barBorderRadius: [0, 15, 15, 0], barBorderRadius: [0, 15, 15, 0],
}, },
}, },
{
name: "外圆",
type: "scatter",
emphasis: {
scale: false,
},
symbol: "rect",
symbolSize: [3, 8],
symbolOffset: [2, 0],
z: 2,
data: datas,
itemStyle: {
normal: {
// barBorderRadius: 20,
color: function (params) {
// let color = "";
let color = params.dataIndex < 3 ? colorList[params.dataIndex] : colorList[3];
return color;
},
},
},
},
], ],
}; };
this.phChart.setOption(option); this.phChart.setOption(option);
@ -731,12 +802,8 @@ export default {
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
this.deptChart.resize(); this.deptChart.resize();
}); });
var colorList = [ var colorList = ["#00ff00", "#ffba00", "#ff3e54", "#36cfd9"];
"#70d74d", var colorList1 = ["rgba(112 ,215, 77,0.8)", "rgba(243,151,0,0.8)", "rgba(222, 70, 87,0.8)", "rgba(71, 197, 240,0.5)"];
"#f39700",
"#de4657",
"#47c5f0",
];
var datas = [ var datas = [
{ {
value: 99, value: 99,
@ -768,10 +835,10 @@ export default {
show: false, show: false,
}, },
grid: { grid: {
top:3, top: 3,
left: 0, left: 0,
right: 10, right: 10,
bottom:0, bottom: 0,
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: {
@ -829,11 +896,11 @@ export default {
itemStyle.color = new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [ itemStyle.color = new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ {
offset: 0, offset: 0,
color: i < 3 ? colorList[i] : colorList[3], color: i < 3 ? colorList1[i] : colorList1[3],
}, },
{ {
offset: 1, offset: 1,
color: i < 3 ? colorList[i] : colorList[3], color: i < 3 ? colorList1[i] : colorList1[3],
}, },
]); ]);
return { return {
@ -845,6 +912,28 @@ export default {
barBorderRadius: [0, 15, 15, 0], barBorderRadius: [0, 15, 15, 0],
}, },
}, },
{
name: "外圆",
type: "scatter",
emphasis: {
scale: false,
},
symbol: "rect",
symbolSize: [3, 8],
symbolOffset: [2, 0],
z: 2,
data: datas,
itemStyle: {
normal: {
// barBorderRadius: 20,
color: function (params) {
// let color = "";
let color = params.dataIndex < 3 ? colorList[params.dataIndex] : colorList[3];
return color;
},
},
},
},
], ],
}; };
this.deptChart.setOption(option); this.deptChart.setOption(option);
@ -882,7 +971,7 @@ export default {
left: 0; left: 0;
pointer-events: none; pointer-events: none;
.time_box{ .time_box {
font-size: 27px; font-size: 27px;
color: #fff; color: #fff;
position: absolute; position: absolute;
@ -891,7 +980,7 @@ export default {
left: 48px; left: 48px;
} }
.center_box{ .center_box {
width: 40%; width: 40%;
height: 30px; height: 30px;
position: absolute; position: absolute;
@ -901,42 +990,41 @@ export default {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.sb_box{ .sb_box {
width: 25%; width: 25%;
height: 100%; height: 100%;
display: flex; display: flex;
font-size:18px; font-size: 18px;
color:#fff; color: #fff;
align-items: center; align-items: center;
border-right:1px solid #fff; border-right: 1px solid #fff;
font-weight: bold; font-weight: bold;
&.cen{ &.cen {
justify-content: center; justify-content: center;
} }
&.last{ &.last {
border-right: none; border-right: none;
justify-content: flex-end; justify-content: flex-end;
} }
.number_txt{ .number_txt {
background-image: linear-gradient(to bottom, #92eeff, #5bcaf5); background-image: linear-gradient(to bottom, #92eeff, #5bcaf5);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
font-size:28px; font-size: 28px;
} }
.num_name{ .num_name {
background-image: linear-gradient(to bottom, #92eeff, #5bcaf5); background-image: linear-gradient(to bottom, #92eeff, #5bcaf5);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
font-size:20px; font-size: 20px;
} }
} }
} }
.bottom_box{ .bottom_box {
width: 40%; width: 40%;
position: absolute; position: absolute;
bottom: 40px; bottom: 40px;
@ -944,13 +1032,13 @@ export default {
pointer-events: auto; pointer-events: auto;
display: flex; display: flex;
.sele_box{ .sele_box {
width: 90px; width: 90px;
height: 34px; height: 34px;
margin-right: 20px; margin-right: 20px;
.slect_box{ .slect_box {
::v-deep .el-input__inner{ ::v-deep .el-input__inner {
background: url("@/assets/img/sele.png"); background: url("@/assets/img/sele.png");
background-size: 100% 100%; background-size: 100% 100%;
border: none; border: none;
@ -960,28 +1048,28 @@ export default {
} }
} }
.time_picker{ .time_picker {
.date_pick{ .date_pick {
background: url("@/assets/img/date.png"); background: url("@/assets/img/date.png");
background-size: 100% 100%; background-size: 100% 100%;
border:none; border: none;
width:200px; width: 200px;
::v-deep .el-range-input{ ::v-deep .el-range-input {
background: transparent; background: transparent;
color:#fff color: #fff;
} }
::v-deep .el-range-separator{ ::v-deep .el-range-separator {
color: #fff; color: #fff;
} }
::v-deep .el-range__icon{ ::v-deep .el-range__icon {
display: none; display: none;
} }
} }
} }
.btn_box{ .btn_box {
width: 150px; width: 150px;
height: 40px; height: 40px;
background: url("@/assets/img/btn.png"); background: url("@/assets/img/btn.png");
@ -990,10 +1078,10 @@ export default {
line-height: 40px; line-height: 40px;
text-align: center; text-align: center;
font-size: 15px; font-size: 15px;
color:#fff; color: #fff;
cursor: pointer; cursor: pointer;
&.actived{ &.actived {
color: #ffd13e; color: #ffd13e;
} }
} }
@ -1215,7 +1303,7 @@ export default {
} }
} }
.dept_ph{ .dept_ph {
width: 100%; width: 100%;
height: 21%; height: 21%;
.title { .title {
@ -1229,7 +1317,7 @@ export default {
text-align: left; text-align: left;
} }
.ph_box{ .ph_box {
width: 90%; width: 90%;
height: 80%; height: 80%;
margin: 0 auto; margin: 0 auto;
@ -1240,20 +1328,20 @@ export default {
} }
</style> </style>
<style lang="scss"> <style lang="scss">
.select_time{ .select_time {
background: rgba(17, 71, 96, 0.3) !important; background: rgba(17, 71, 96, 0.3) !important;
border: rgba(17, 71, 96, 0.3) !important; border: rgba(17, 71, 96, 0.3) !important;
color: #fff !important; color: #fff !important;
.el-select-dropdown__item{ .el-select-dropdown__item {
color: #fff; color: #fff;
&.selected{ &.selected {
color: #31bdff !important; color: #31bdff !important;
} }
&.hover{ &.hover {
background: rgba(17, 71, 96,0.9); background: rgba(17, 71, 96, 0.9);
} }
} }
} }

Write Preview
Loading…
Cancel
Save