From b97c35de5e16db89e9034f9545fdc19c5e6a384b Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Sat, 12 Nov 2022 15:06:19 +0800
Subject: [PATCH] 1
---
src/views/home/components/leftContainer.vue | 110 ++++++++++++++++++++++++++++++++++--------------------
1 files changed, 69 insertions(+), 41 deletions(-)
diff --git a/src/views/home/components/leftContainer.vue b/src/views/home/components/leftContainer.vue
index 7e4e6cf..b95ef84 100644
--- a/src/views/home/components/leftContainer.vue
+++ b/src/views/home/components/leftContainer.vue
@@ -223,10 +223,10 @@
initPersonEcharts () {
var chartDom = document.getElementById('PersonEcharts')
homePersonmyChart = this.$echarts.init(chartDom)
- homePersonmyChart.setOption(this.initPersonOptions(['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所'], [881, 2211, 6414, 4321, 1232]))
+ homePersonmyChart.setOption(this.initPersonOptions(['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所'], [881, 2211, 6414, 4321, 1232], ['#06B5D7', '#44C0C1', '#71C8B1']))
},
- initPersonOptions (xDate, yDate) {
+ initPersonOptions (xDate, yDate, colors) {
return {
tooltip: {
trigger: 'item',
@@ -263,26 +263,27 @@
itemStyle: {
normal: {
color: function (params) {
-
return new global.echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
- { offset: 0, color: '#06B5D7' },
- { offset: 0.5, color: '#44C0C1' },
- { offset: 1, color: '#71C8B1' },
+ { offset: 0, color: colors[0] },
+ { offset: 0.5, color: colors[1] },
+ { offset: 1, color: colors[2] },
]
)
}
},
emphasis: {
- color: new global.echarts.graphic.LinearGradient(
- 0, 0, 0, 1,
- [
- { offset: 0, color: '#71C8B1' },
- { offset: 0.7, color: '#44C0C1' },
- { offset: 1, color: '#06B5D7' }
- ]
- )
+ color: function (params) {
+ return new global.echarts.graphic.LinearGradient(
+ 0, 0, 0, 1,
+ [
+ { offset: 0, color: colors[2] },
+ { offset: 0.7, color: colors[1] },
+ { offset: 1, color: colors[0] }
+ ]
+ )
+ }
}
},
}
@@ -299,19 +300,22 @@
personTabClick (type) {
this.tabType = type
this.dataDeep = 1
- let xDate, yDate
+ let xDate, yDate, colors
if (type == 0) {
xDate = ['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所']
yDate = [881, 2211, 6414, 4321, 1232]
+ colors = ['#06B5D7', '#44C0C1', '#71C8B1']
} else if (type == 1) {
xDate = ['湖北', '上海', '北京', '广东', '浙江']
yDate = [6414, 4231, 2211, 1231, 881]
+ colors = ['#ef9faa', '#f7bfc6', '#fedade']
} else if (type == 2) {
xDate = ['日本', '美国', '俄罗斯', '英国', '印度']
yDate = [881, 1231, 2211, 4321, 6414]
+ colors = ['#2495b3', '#49b5d0', '#63cde5']
}
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
},
inithouseEcharts () {
@@ -495,68 +499,83 @@
clickPeopleChart () {
homePersonmyChart.on('click', params => {
- let xDate, yDate
+ let xDate, yDate, colors
this.dataDeep = 2
if (params.name == '车站派出所') {
xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
yDate = [88, 221, 641, 432, 123]
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
+ colors = ['#ccf9d0', '#f9d888', '#f7857e']
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
} else if (params.name == '沙溪派出所') {
xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
yDate = [641, 423, 221, 123, 88]
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
+ colors = ['#102129', '#1f3942', '#2a4f5f']
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
} else if (params.name == '灵溪派出所') {
xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
yDate = [111, 531, 211, 431, 64]
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
+ colors = ['#23b9e9', '#c76ee0', '#f05265']
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
} else if (params.name == '北门派出所') {
xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
yDate = [887, 234, 452, 321, 154]
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
+ colors = ['#b22d2b', '#614976', '#4c3042']
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
} else if (params.name == '江光派出所') {
xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
yDate = [400, 500, 200, 450, 245]
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
+ colors = ['#3089bf', '#77d8f9', '#f4fcfe']
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
} else if (params.name == '湖北') {
xDate = ['武汉市', '黄石市', '宜昌市', '鄂州市', '荆门市']
yDate = [88, 221, 641, 432, 123]
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
+ colors = ['#2b5144', '#5a987f', '#94ebc1']
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
} else if (params.name == '上海') {
xDate = ['黄浦区', '长宁区', '静安区', '虹口区', '闵行区']
yDate = [641, 423, 221, 123, 88]
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
+ colors = ['#f750c2', '#d6369a', '#bc1f76']
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
} else if (params.name == '北京') {
xDate = ['东城区', '西城区', '海淀区', '昌平区', '大兴区']
yDate = [111, 531, 211, 431, 64]
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
+ colors = ['#7e81d5', '#86abe6', '#8fe5e3']
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
} else if (params.name == '广东') {
xDate = ['珠海市', '东菀市', '佛山市', '中山市', '惠州市']
yDate = [887, 234, 452, 321, 154]
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
+ colors = ['#ba1432', '#6b0e33', '#2a0b35']
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
} else if (params.name == '浙江') {
xDate = ['杭州市', '舟山市', '宁波市', '嘉兴市', '绍兴市']
yDate = [400, 300, 200, 450, 245]
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
+ colors = ['#f12e10', '#f36c15', '#f4a818']
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
} else if (params.name == '日本') {
xDate = ['东京都', '北海道', '大阪府', '京都府', '43县']
yDate = [88, 221, 641, 432, 123]
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
+ colors = ['#6e978f', '#ad885a', '#e97b27']
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
} else if (params.name == '美国') {
xDate = ['加利福尼亚州', '德克萨斯州', '纽约州', '俄亥俄州']
yDate = [641, 423, 221, 123, 88]
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
+ colors = ['#d54956', '#9f976e', '#73d781']
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
} else if (params.name == '俄罗斯') {
xDate = ['西北联邦', '中央联邦', '南方联邦', '伏尔加联邦']
yDate = [111, 531, 211, 431, 64]
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
+ colors = ['#7d65c0', '#a47db4', '#e0a8c5']
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
} else if (params.name == '英国') {
xDate = ['英格兰', '威尔士', '苏格兰', '北爱尔兰']
yDate = [887, 234, 452, 321, 154]
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
+ colors = ['#584d7b', '#9b836a', '#f8ce52']
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
} else if (params.name == '印度') {
xDate = ['德里', '哈里亚纳邦', '旁遮普邦', '喜马偕尔邦', '北方邦']
yDate = [400, 300, 200, 450, 245]
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
+ colors = ['#0f97f2', '#7d629d', '#e1344f']
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
} else {
this.$emit('showpeopledetail', params.name)
}
@@ -656,37 +675,43 @@
selectPoliceChangeData (name) {
if (this.peopletype == 0 && this.tabType == 0) {
- let xDate, yDate
+ let xDate, yDate, colors
if (name == '车站派出所') {
this.dataDeep = 2
xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
yDate = [88, 221, 641, 432, 123]
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
+ colors = ['#0f97f2', '#7d629d', '#e1344f']
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
} else if (name == '沙溪派出所') {
this.dataDeep = 2
xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
yDate = [641, 423, 221, 123, 88]
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
+ colors = ['#584d7b', '#9b836a', '#f8ce52']
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
} else if (name == '灵溪派出所') {
this.dataDeep = 2
xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
yDate = [111, 531, 211, 431, 64]
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
+ colors = ['#7d65c0', '#a47db4', '#e0a8c5']
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
} else if (name == '北门派出所') {
this.dataDeep = 2
xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
yDate = [887, 234, 452, 321, 154]
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
+ colors = ['#6e978f', '#ad885a', '#e97b27']
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
} else if (name == '江光派出所') {
this.dataDeep = 2
xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
yDate = [400, 500, 200, 450, 245]
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
+ colors = ['#7e81d5', '#86abe6', '#8fe5e3']
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
} else if (name == '全部') {
this.dataDeep = 1
xDate = ['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所']
yDate = [881, 2211, 6414, 4321, 1232]
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
+ colors = ['#f750c2', '#d6369a', '#bc1f76']
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
}
} else if (this.peopletype == 1) {
let arr = []
@@ -708,18 +733,21 @@
backBegin () {
this.dataDeep = 1
- let xDate, yDate
+ let xDate, yDate, colors
if (this.tabType == 0) {
xDate = ['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所']
yDate = [881, 2211, 6414, 4321, 1232]
+ colors = ['#2c9b00', '#fdef00', '#fd3200']
} else if (this.tabType == 1) {
xDate = ['湖北', '上海', '北京', '广东', '浙江']
yDate = [6414, 4231, 2211, 1231, 881]
+ colors = ['#63b783', '#9b83d7', '#6430c4']
} else if (this.tabType == 2) {
xDate = ['日本', '美国', '俄罗斯', '英国', '印度']
yDate = [881, 1231, 2211, 4321, 6414]
+ colors = ['#085fa9', '#83aec6', '#dfe9dc']
}
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
},
getKeyPersonCount (arr) {
--
Gitblit v1.9.3