|
@@ -1,123 +1,123 @@
|
|
|
-<template>
|
|
|
- <highcharts :options="chartOptions" :callback="myCallback"
|
|
|
- style="height:370px;margin-top:30px;"></highcharts>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
-import {Chart} from "highcharts-vue";
|
|
|
-import request from "@/utils/request";
|
|
|
+<!--<template>-->
|
|
|
+<!-- <highcharts :options="chartOptions" :callback="myCallback"-->
|
|
|
+<!-- style="height:370px;margin-top:30px;"></highcharts>-->
|
|
|
+<!--</template>-->
|
|
|
+<!--<script>-->
|
|
|
+<!--import {Chart} from "highcharts-vue";-->
|
|
|
+<!--import request from "@/utils/request";-->
|
|
|
|
|
|
-export default {
|
|
|
- name: 'extend-graphDemo-highchartsColumn',
|
|
|
- components: {
|
|
|
- highcharts: Chart
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- chartOptions: {
|
|
|
- chart: {
|
|
|
- type: 'column'
|
|
|
- },
|
|
|
- title: {
|
|
|
- text: '县 (市、区) 事件统计'
|
|
|
- },
|
|
|
- subtitle: {
|
|
|
- text: ' '
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- categories: [],
|
|
|
- crosshair: true
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- min: 0,
|
|
|
- title: {
|
|
|
- enabled: false,
|
|
|
- }
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- // head + 每个 point + footer 拼接成完整的 table
|
|
|
- headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
|
|
|
- pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
|
|
|
- '<td style="padding:0"><b>{point.y}</b></td></tr>',
|
|
|
- footerFormat: '</table>',
|
|
|
- shared: true,
|
|
|
- useHTML: true
|
|
|
- },
|
|
|
- plotOptions: {
|
|
|
- column: {
|
|
|
- borderWidth: 0
|
|
|
- }
|
|
|
- },
|
|
|
- credits: {
|
|
|
- enabled: false
|
|
|
- },
|
|
|
- series: [{
|
|
|
+<!--export default {-->
|
|
|
+<!-- name: 'extend-graphDemo-highchartsColumn',-->
|
|
|
+<!-- components: {-->
|
|
|
+<!-- highcharts: Chart-->
|
|
|
+<!-- },-->
|
|
|
+<!-- data() {-->
|
|
|
+<!-- return {-->
|
|
|
+<!-- chartOptions: {-->
|
|
|
+<!-- chart: {-->
|
|
|
+<!-- type: 'column'-->
|
|
|
+<!-- },-->
|
|
|
+<!-- title: {-->
|
|
|
+<!-- text: '县 (市、区) 事件统计'-->
|
|
|
+<!-- },-->
|
|
|
+<!-- subtitle: {-->
|
|
|
+<!-- text: ' '-->
|
|
|
+<!-- },-->
|
|
|
+<!-- xAxis: {-->
|
|
|
+<!-- categories: [],-->
|
|
|
+<!-- crosshair: true-->
|
|
|
+<!-- },-->
|
|
|
+<!-- yAxis: {-->
|
|
|
+<!-- min: 0,-->
|
|
|
+<!-- title: {-->
|
|
|
+<!-- enabled: false,-->
|
|
|
+<!-- }-->
|
|
|
+<!-- },-->
|
|
|
+<!-- tooltip: {-->
|
|
|
+<!-- // head + 每个 point + footer 拼接成完整的 table-->
|
|
|
+<!-- headerFormat: '<span style="font-size:10px">{point.key}</span><table>',-->
|
|
|
+<!-- pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +-->
|
|
|
+<!-- '<td style="padding:0"><b>{point.y}</b></td></tr>',-->
|
|
|
+<!-- footerFormat: '</table>',-->
|
|
|
+<!-- shared: true,-->
|
|
|
+<!-- useHTML: true-->
|
|
|
+<!-- },-->
|
|
|
+<!-- plotOptions: {-->
|
|
|
+<!-- column: {-->
|
|
|
+<!-- borderWidth: 0-->
|
|
|
+<!-- }-->
|
|
|
+<!-- },-->
|
|
|
+<!-- credits: {-->
|
|
|
+<!-- enabled: false-->
|
|
|
+<!-- },-->
|
|
|
+<!-- series: [{-->
|
|
|
|
|
|
- name: '上报',
|
|
|
- data: []
|
|
|
- }, {
|
|
|
- name: '确认',
|
|
|
- data: []
|
|
|
- }, {
|
|
|
- name: '签收',
|
|
|
- data: []
|
|
|
- }, {
|
|
|
- name: '办结',
|
|
|
- data: []
|
|
|
- }, {
|
|
|
- name: '归档',
|
|
|
- data: []
|
|
|
- }],
|
|
|
- lang: {
|
|
|
- downloadJPEG: "下载jpg图片",
|
|
|
- downloadPDF: "下载PDF文件",
|
|
|
- downloadPNG: "下载PNG图片",
|
|
|
- downloadSVG: false,
|
|
|
+<!-- name: '上报',-->
|
|
|
+<!-- data: []-->
|
|
|
+<!-- }, {-->
|
|
|
+<!-- name: '确认',-->
|
|
|
+<!-- data: []-->
|
|
|
+<!-- }, {-->
|
|
|
+<!-- name: '签收',-->
|
|
|
+<!-- data: []-->
|
|
|
+<!-- }, {-->
|
|
|
+<!-- name: '办结',-->
|
|
|
+<!-- data: []-->
|
|
|
+<!-- }, {-->
|
|
|
+<!-- name: '归档',-->
|
|
|
+<!-- data: []-->
|
|
|
+<!-- }],-->
|
|
|
+<!-- lang: {-->
|
|
|
+<!-- downloadJPEG: "下载jpg图片",-->
|
|
|
+<!-- downloadPDF: "下载PDF文件",-->
|
|
|
+<!-- downloadPNG: "下载PNG图片",-->
|
|
|
+<!-- downloadSVG: false,-->
|
|
|
|
|
|
- },
|
|
|
- exporting: {
|
|
|
- enabled: false,
|
|
|
- filename: "区县统计图",
|
|
|
- buttons: {
|
|
|
- contextButton: {
|
|
|
- menuItems: [
|
|
|
- "downloadPNG",
|
|
|
- "downloadJPEG",
|
|
|
- "downloadPDF"
|
|
|
- ],
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.geteventdept()
|
|
|
- },
|
|
|
+<!-- },-->
|
|
|
+<!-- exporting: {-->
|
|
|
+<!-- enabled: false,-->
|
|
|
+<!-- filename: "区县统计图",-->
|
|
|
+<!-- buttons: {-->
|
|
|
+<!-- contextButton: {-->
|
|
|
+<!-- menuItems: [-->
|
|
|
+<!-- "downloadPNG",-->
|
|
|
+<!-- "downloadJPEG",-->
|
|
|
+<!-- "downloadPDF"-->
|
|
|
+<!-- ],-->
|
|
|
+<!-- },-->
|
|
|
+<!-- },-->
|
|
|
+<!-- },-->
|
|
|
+<!-- },-->
|
|
|
+<!-- }-->
|
|
|
+<!-- },-->
|
|
|
+<!-- mounted() {-->
|
|
|
+<!-- this.geteventdept()-->
|
|
|
+<!-- },-->
|
|
|
|
|
|
- methods: {
|
|
|
- myCallback() {
|
|
|
- // console.log("this is callback function");
|
|
|
- },
|
|
|
- geteventdept() {
|
|
|
- request({
|
|
|
- url: 'center-event/index/countyList',
|
|
|
- method: 'get',
|
|
|
- // params: query
|
|
|
- }).then((res) => {
|
|
|
- if (res.code === 200) {
|
|
|
- for (let i = 0; i < res.data.length; i++) {
|
|
|
- // debugger
|
|
|
- this.chartOptions.xAxis.categories.push(res.data[i].name);
|
|
|
- this.chartOptions.series[0].data.push(res.data[i].sb)
|
|
|
- this.chartOptions.series[1].data.push(res.data[i].qr)
|
|
|
- this.chartOptions.series[2].data.push(res.data[i].qs)
|
|
|
- this.chartOptions.series[3].data.push(res.data[i].bj)
|
|
|
- this.chartOptions.series[4].data.push(res.data[i].gd)
|
|
|
- }
|
|
|
- }
|
|
|
- console.log(res)
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
+<!-- methods: {-->
|
|
|
+<!-- myCallback() {-->
|
|
|
+<!-- // console.log("this is callback function");-->
|
|
|
+<!-- },-->
|
|
|
+<!-- geteventdept() {-->
|
|
|
+<!-- request({-->
|
|
|
+<!-- url: 'center-event/index/countyList',-->
|
|
|
+<!-- method: 'get',-->
|
|
|
+<!-- // params: query-->
|
|
|
+<!-- }).then((res) => {-->
|
|
|
+<!-- if (res.code === 200) {-->
|
|
|
+<!-- for (let i = 0; i < res.data.length; i++) {-->
|
|
|
+<!-- // debugger-->
|
|
|
+<!-- this.chartOptions.xAxis.categories.push(res.data[i].name);-->
|
|
|
+<!-- this.chartOptions.series[0].data.push(res.data[i].sb)-->
|
|
|
+<!-- this.chartOptions.series[1].data.push(res.data[i].qr)-->
|
|
|
+<!-- this.chartOptions.series[2].data.push(res.data[i].qs)-->
|
|
|
+<!-- this.chartOptions.series[3].data.push(res.data[i].bj)-->
|
|
|
+<!-- this.chartOptions.series[4].data.push(res.data[i].gd)-->
|
|
|
+<!-- }-->
|
|
|
+<!-- }-->
|
|
|
+<!-- console.log(res)-->
|
|
|
+<!-- })-->
|
|
|
+<!-- }-->
|
|
|
+<!-- }-->
|
|
|
+<!--}-->
|
|
|
+<!--</script>-->
|