123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175 |
- <template>
- <div class="box">
- <div class="tupian"></div>
- <div id="zz" style="width: 70%; height: 100%; "></div>
- </div>
- </template>
- <script>
- import { oldPersonVisitWay } from '../../api'
- export default {
- //巡防员巡防方式统计
- name: "PatrolmanPatrolModeCount",
- data() {
- return {
- dataArr: [],
- myChart: null
- }
- },
- methods: {
- async draw() {
- const result = await oldPersonVisitWay({}, 'POST');
- this.dataArr = result;
- const seriesArr = [];
- for(let i = 0; i < this.dataArr.length; i++) {
- const d = this.dataArr[i];
- const borderArr = new Array(this.dataArr.length).fill({});
- borderArr[i] = { value: 269, symbolPosition: 'start' };
- seriesArr.push({
- type: 'pictorialBar',
- symbol: `image://${require('../../assets/PatrolmanStatistics/border.png')}`,
- symbolSize: [269, 32],
- symbolOffset: [0, 0],
- data: borderArr,
- label: {
- show: true,
- position: 'right',
- offset: [-120, -40],
- color: '#71dbff',
- fontSize: this.fontSize(0.2),
- formatter: (params) => {
- return `${ this.dataArr[this.dataArr.length - 1 - params.dataIndex].value }%`;
- }
- },
- z: 1
- });
- const borderBgArr = new Array(this.dataArr.length).fill({});
- borderBgArr[i] = { value: 251, symbolPosition: 'start' };
- seriesArr.push({
- type: 'pictorialBar',
- symbol: `image://${require('../../assets/PatrolmanStatistics/border-bg.png')}`,
- symbolSize: [251, 21],
- symbolOffset: [10, 0],
- data: borderBgArr,
- label: {
- show: true,
- position: 'right',
- offset: [-280, -40],
- color: '#fff',
- fontSize: this.fontSize(0.18),
- formatter: (params) => {
- return `${ this.dataArr[this.dataArr.length - 1 - params.dataIndex].label }`;
- }
- },
- z: 2
- });
- const step = (Math.floor(d.value / 10) < 1 ? 1 : Math.floor(d.value / 10));
- for(let j = 0; j < step; j++) {
- const blockArr = new Array(this.dataArr.length).fill({});
- blockArr[this.dataArr.length - 1 - i] = { value: 251, symbolPosition: 'start' };
- seriesArr.push({
- type: 'pictorialBar',
- symbol: `image://${require('../../assets/PatrolmanStatistics/block-' + j + '.png')}`,
- symbolSize: [20, 19],
- symbolOffset: [10 + j * 25.6, 0],
- data: blockArr,
- z: 10
- });
- }
- const kkArr = new Array(length).fill({});
- kkArr[i] = { value: 300, symbolPosition: 'start' };
- // seriesArr.push({
- // type: 'pictorialBar',
- // symbol: `image://${require('../../assets/PatrolmanStatistics/big-img-' + (this.dataArr.length - 1 - i) + '.png')}`,
- // symbolSize: [157, 134],
- // symbolOffset: [-140, -10],
- // data: kkArr,
- // z: 2
- // });
- }
- if(this.myChart != null) {
- this.myChart.clear();
- }
- this.myChart = this.$echarts.init(document.getElementById('zz'));
- this.myChart.setOption({
- grid:{
- left:"6%",
- right:"2%",
- top:"2%",
- bottom:"2%",
- },
- xAxis: {
- max: 300,
- splitLine: {
- show: false
- },
- axisLine: {
- show: false
- },
- axisLabel: {
- show: false
- },
- axisTick: {
- show: false
- }
- },
- yAxis: {
- type: 'category',
- splitLine: {
- show: false
- },
- axisLine: {
- show: false
- },
- axisLabel: {
- show: false
- },
- axisTick: {
- show: false
- }
- },
- series: seriesArr
- });
- },
- fontSize(res) {
- let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
- if (!clientWidth) return;
- let fontSize = 100 * (clientWidth / 1920);
- return res * fontSize;
- }
- },
- mounted() {
- this.draw();
- }
- }
- </script>
- <style scoped>
- .box {
- width: 100%;
- height: 100%;
- display: flex;
- }
- .tupian {
- width: 40%;
- background: url("../../assets/PatrolmanStatistics/people.png") no-repeat ;
- background-size: 100% 100%;
- height: 100%;
- }
- </style>
|