suojin
/
resolve_err_dashboard
15
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. 200
      src/views/HomeView.vue

200
src/views/HomeView.vue
Unescape View File

@ -21,19 +21,19 @@
</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>
@ -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: {
@ -173,8 +183,8 @@ export default {
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
@ -186,9 +196,9 @@ export default {
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,
@ -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();
@ -320,27 +330,27 @@ export default {
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,25 +534,53 @@ 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,
},
], ],
}; };
this.trendChart.setOption(option); this.trendChart.setOption(option);
@ -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,
@ -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,
@ -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);
@ -932,7 +1021,6 @@ export default {
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
font-size: 20px; font-size: 20px;
} }
} }
} }
@ -969,7 +1057,7 @@ export default {
::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;

Write Preview
Loading…
Cancel
Save