| | |
| | | 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', |
| | |
| | | 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] } |
| | | ] |
| | | ) |
| | | } |
| | | } |
| | | }, |
| | | } |
| | |
| | | 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 () { |
| | |
| | | |
| | | 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) |
| | | } |
| | |
| | | |
| | | 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 = [] |
| | |
| | | |
| | | 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) { |