|
@@ -1,322 +1,285 @@
|
|
|
<!-- **************************************NO.2 事件类型 分类*************************************** -->
|
|
|
<template>
|
|
|
- <div class="chart-container">
|
|
|
- <div id="event" style="width: 50%; height:21vh;">
|
|
|
- </div>
|
|
|
- <div id="event2" style="width: 50%; height:21vh;">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="chart-container">
|
|
|
+ <div id="event" style="width: 50%; height:21vh;">
|
|
|
+ </div>
|
|
|
+ <div id="event2" style="width: 50%; height:21vh;">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import * as echarts from 'echarts';
|
|
|
- import {getSjlylxtj} from '@/api/bigdata'
|
|
|
- export default {
|
|
|
- name: 'event',
|
|
|
- data() {
|
|
|
- return {
|
|
|
- count: 0
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
+ import * as echarts from 'echarts';
|
|
|
+ import {getSjlylxtj} from '@/api/bigdata'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'event',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ count: 0,
|
|
|
+ data_type:[],
|
|
|
+ data_source:[]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
this.sjlylxtj()
|
|
|
- },
|
|
|
+ },
|
|
|
|
|
|
- methods:{
|
|
|
+ methods: {
|
|
|
|
|
|
- sjlylxtj(){
|
|
|
- let that = this
|
|
|
+ sjlylxtj() {
|
|
|
+ let that = this
|
|
|
getSjlylxtj(null).then(resp => {
|
|
|
- console.log("====>",resp);
|
|
|
+ that.data_type = resp.data.type
|
|
|
+ that.data_source = resp.data.source
|
|
|
that.myEcharts()
|
|
|
that.myEcharts2()
|
|
|
})
|
|
|
},
|
|
|
- // 出处 https://echarts.apache.org/examples/zh/editor.html?c=pie-borderRadius
|
|
|
- //http://192.144.199.210:8080/editor/index.html?chart_id=K8nTnNyu0caN65uT
|
|
|
-
|
|
|
- myEcharts() {
|
|
|
-
|
|
|
-
|
|
|
- var chartDom = document.getElementById('event');
|
|
|
- var myChart = echarts.init(chartDom);
|
|
|
- var color = ['#02CDFF', '#62FBE7', '#7930FF','#E148EB','#ecb935']
|
|
|
- var option;
|
|
|
-
|
|
|
-
|
|
|
- option = {
|
|
|
- color: color,
|
|
|
- tooltip: {
|
|
|
- trigger: 'item',
|
|
|
- position: 'top'
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '事件类型',
|
|
|
- type: 'pie',
|
|
|
- center:['50%','60%'],
|
|
|
- radius: ['55%', '70%'],
|
|
|
- avoidLabelOverlap: false,
|
|
|
-
|
|
|
- label: {
|
|
|
- show: false,
|
|
|
- position: 'center'
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- fontSize: '12',
|
|
|
- fontWeight: 'bold'
|
|
|
- }
|
|
|
- },
|
|
|
- labelLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- data: [
|
|
|
- { value: 1048, name: '事件1' },
|
|
|
- { value: 735, name: '事件2' },
|
|
|
- { value: 580, name: '事件3' },
|
|
|
- { value: 484, name: '事件4' },
|
|
|
- { value: 300, name: '事件5' }
|
|
|
- ]
|
|
|
- },
|
|
|
+ // 出处 https://echarts.apache.org/examples/zh/editor.html?c=pie-borderRadius
|
|
|
+ //http://192.144.199.210:8080/editor/index.html?chart_id=K8nTnNyu0caN65uT
|
|
|
+ myEcharts() {
|
|
|
+ let that = this
|
|
|
+ var chartDom = document.getElementById('event');
|
|
|
+ var myChart = echarts.init(chartDom);
|
|
|
+ var color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
|
|
|
+ var option;
|
|
|
+ option = {
|
|
|
+ color: color,
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ position: 'top'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '事件类型',
|
|
|
+ type: 'pie',
|
|
|
+ center: ['50%', '60%'],
|
|
|
+ radius: ['55%', '70%'],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
|
|
|
- ]
|
|
|
- };
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: 'center'
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ fontSize: '12',
|
|
|
+ fontWeight: 'bold'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ data: that.data_type
|
|
|
+ },
|
|
|
|
|
|
- option && myChart.setOption(option);
|
|
|
+ ]
|
|
|
+ };
|
|
|
|
|
|
- },
|
|
|
- myEcharts2() {
|
|
|
+ option && myChart.setOption(option);
|
|
|
|
|
|
+ },
|
|
|
+ myEcharts2() {
|
|
|
+ let that = this
|
|
|
+ var chartDom = document.getElementById('event2');
|
|
|
+ var myChart = echarts.init(chartDom);
|
|
|
+ let dashedPic =
|
|
|
+ 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM8AAAAOBAMAAAB6G1V9AAAAD1BMVEX////Kysrk5OTj4+TJycoJ0iFPAAAAG0lEQVQ4y2MYBaNgGAMTQQVFOiABhlEwCugOAMqzCykGOeENAAAAAElFTkSuQmCC';
|
|
|
+ let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF', '#0034ff', '#E148EB'];
|
|
|
+ var option;
|
|
|
+ let chartData = that.data_source;
|
|
|
+ let arrName = [];
|
|
|
+ let arrValue = [];
|
|
|
+ let sum = 0;
|
|
|
+ let pieSeries = [],
|
|
|
+ lineYAxis = [];
|
|
|
|
|
|
- var chartDom = document.getElementById('event2');
|
|
|
- var myChart = echarts.init(chartDom);
|
|
|
- let dashedPic =
|
|
|
- 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM8AAAAOBAMAAAB6G1V9AAAAD1BMVEX////Kysrk5OTj4+TJycoJ0iFPAAAAG0lEQVQ4y2MYBaNgGAMTQQVFOiABhlEwCugOAMqzCykGOeENAAAAAElFTkSuQmCC';
|
|
|
- let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF', '#0034ff','#E148EB'];
|
|
|
- var option;
|
|
|
- let chartData = [
|
|
|
- {
|
|
|
- name: '双辽市',
|
|
|
- value: 40083,
|
|
|
- unit: '列',
|
|
|
- },
|
|
|
- {
|
|
|
- name: '梨树县',
|
|
|
- value: 33974,
|
|
|
- unit: '列',
|
|
|
- },
|
|
|
- {
|
|
|
- name: '伊通县',
|
|
|
- value: 15400,
|
|
|
- unit: '列',
|
|
|
- },
|
|
|
- {
|
|
|
- name: '铁东区',
|
|
|
- value: 11021,
|
|
|
- unit: '列',
|
|
|
- },
|
|
|
- {
|
|
|
- name: '铁西区',
|
|
|
- value: 30696,
|
|
|
- unit: '列',
|
|
|
- },
|
|
|
-
|
|
|
- ];
|
|
|
- let arrName = [];
|
|
|
- let arrValue = [];
|
|
|
- let sum = 0;
|
|
|
- let pieSeries = [],
|
|
|
- lineYAxis = [];
|
|
|
-
|
|
|
- // 数据处理
|
|
|
- chartData.forEach((v, i) => {
|
|
|
- arrName.push(v.name);
|
|
|
- arrValue.push(v.value);
|
|
|
- sum = sum + v.value;
|
|
|
- });
|
|
|
+ // 数据处理
|
|
|
+ chartData.forEach((v, i) => {
|
|
|
+ arrName.push(v.name);
|
|
|
+ arrValue.push(v.value);
|
|
|
+ sum = sum + v.value;
|
|
|
+ });
|
|
|
|
|
|
- // 图表option整理
|
|
|
- chartData.forEach((v, i) => {
|
|
|
- pieSeries.push({
|
|
|
- name: '沪昆线到达晚点情况',
|
|
|
- type: 'pie',
|
|
|
- clockWise: false,
|
|
|
- hoverAnimation: false,
|
|
|
- radius: [65 - i * 10 + '%', 66.5 - i * 10 + '%'],
|
|
|
- center: ['35%', '60%'],
|
|
|
- label: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- borderRadius: 20,
|
|
|
- },
|
|
|
- data: [
|
|
|
- {
|
|
|
- value: v.value,
|
|
|
- name: v.name,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- borderWidth: 5,
|
|
|
- borderColor:color[i]
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- value: sum - v.value,
|
|
|
- name: '',
|
|
|
- itemStyle: {
|
|
|
- color: 'rgba(0,0,0,0)',
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- });
|
|
|
- pieSeries.push({
|
|
|
- name: '',
|
|
|
- type: 'pie',
|
|
|
- silent: true,
|
|
|
- z: 1,
|
|
|
- clockWise: false, //顺时加载
|
|
|
- hoverAnimation: false, //鼠标移入变大
|
|
|
- radius: [65 - i * 10 + '%', 66.5 - i * 10 + '%'],
|
|
|
- center: ['35%', '60%'],
|
|
|
- label: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- borderCap: 'round',
|
|
|
- borderJoin: 'round',
|
|
|
- },
|
|
|
- data: [
|
|
|
- {
|
|
|
- value: 7.5,
|
|
|
- itemStyle: {
|
|
|
- color: '#E3F0FF',
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- value: 2.5,
|
|
|
- name: '',
|
|
|
- itemStyle: {
|
|
|
- color: 'rgba(0,0,0,0)',
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- });
|
|
|
- v.percent = ((v.value / sum) * 100).toFixed(1) + '%';
|
|
|
- lineYAxis.push({
|
|
|
- value: i,
|
|
|
- textStyle: {
|
|
|
- rich: {
|
|
|
- circle: {
|
|
|
- color: color[i],
|
|
|
- padding: [0, 0],
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- });
|
|
|
- });
|
|
|
+ // 图表option整理
|
|
|
+ chartData.forEach((v, i) => {
|
|
|
+ pieSeries.push({
|
|
|
+ name: '沪昆线到达晚点情况',
|
|
|
+ type: 'pie',
|
|
|
+ clockWise: false,
|
|
|
+ hoverAnimation: false,
|
|
|
+ radius: [65 - i * 10 + '%', 66.5 - i * 10 + '%'],
|
|
|
+ center: ['35%', '60%'],
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 20,
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: v.value,
|
|
|
+ name: v.name,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ borderWidth: 5,
|
|
|
+ borderColor: color[i]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: sum - v.value,
|
|
|
+ name: '',
|
|
|
+ itemStyle: {
|
|
|
+ color: 'rgba(0,0,0,0)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ pieSeries.push({
|
|
|
+ name: '',
|
|
|
+ type: 'pie',
|
|
|
+ silent: true,
|
|
|
+ z: 1,
|
|
|
+ clockWise: false, //顺时加载
|
|
|
+ hoverAnimation: false, //鼠标移入变大
|
|
|
+ radius: [65 - i * 10 + '%', 66.5 - i * 10 + '%'],
|
|
|
+ center: ['35%', '60%'],
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ borderCap: 'round',
|
|
|
+ borderJoin: 'round',
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: 7.5,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#E3F0FF',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 2.5,
|
|
|
+ name: '',
|
|
|
+ itemStyle: {
|
|
|
+ color: 'rgba(0,0,0,0)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ v.percent = ((v.value / sum) * 100).toFixed(1) + '%';
|
|
|
+ lineYAxis.push({
|
|
|
+ value: i,
|
|
|
+ textStyle: {
|
|
|
+ rich: {
|
|
|
+ circle: {
|
|
|
+ color: color[i],
|
|
|
+ padding: [0, 0],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ });
|
|
|
|
|
|
- option = {
|
|
|
- color: color,
|
|
|
- grid: {
|
|
|
- top: '20%',
|
|
|
- bottom: '45%',
|
|
|
- left: '40%',
|
|
|
- containLabel: false,
|
|
|
- },
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: 'category',
|
|
|
- inverse: true,
|
|
|
- axisLine: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- formatter: function (params) {
|
|
|
- let item = chartData[params];
|
|
|
- console.log(item);
|
|
|
- return (
|
|
|
- '{circle|●}{name|' +
|
|
|
- item.name +
|
|
|
- '}{bd||}{percent|' +
|
|
|
- item.percent +
|
|
|
- '}'
|
|
|
- );
|
|
|
- },
|
|
|
- interval: 0,
|
|
|
- inside: true,
|
|
|
- textStyle: {
|
|
|
- color: '#333',
|
|
|
- fontSize: 10,
|
|
|
- rich: {
|
|
|
- line: {
|
|
|
- width: 170,
|
|
|
- height: 5,
|
|
|
- backgroundColor: { image: dashedPic },
|
|
|
- },
|
|
|
- name: {
|
|
|
- color: '#fff',
|
|
|
- fontSize: 10,
|
|
|
- },
|
|
|
- bd: {
|
|
|
- color: '#72afff',
|
|
|
- padding: [0, 5],
|
|
|
- fontSize: 10,
|
|
|
- },
|
|
|
- percent: {
|
|
|
- color: '#5cdad0',
|
|
|
- fontSize: 10,
|
|
|
- },
|
|
|
- value: {
|
|
|
- color: '#333',
|
|
|
- fontSize: 16,
|
|
|
- fontWeight: 500,
|
|
|
- padding: [0, 0, 0, 10],
|
|
|
- },
|
|
|
- unit: {
|
|
|
- fontSize: 14,
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- show: true,
|
|
|
- },
|
|
|
- data: lineYAxis,
|
|
|
- },
|
|
|
- ],
|
|
|
- xAxis: [
|
|
|
- {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- ],
|
|
|
- series: pieSeries,
|
|
|
- };
|
|
|
+ option = {
|
|
|
+ color: color,
|
|
|
+ grid: {
|
|
|
+ top: '20%',
|
|
|
+ bottom: '45%',
|
|
|
+ left: '40%',
|
|
|
+ containLabel: false,
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ inverse: true,
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ formatter: function (params) {
|
|
|
+ let item = chartData[params];
|
|
|
+ return (
|
|
|
+ '{circle|●}{name|' +
|
|
|
+ item.name +
|
|
|
+ '}{bd||}{percent|' +
|
|
|
+ item.percent +
|
|
|
+ '}'
|
|
|
+ );
|
|
|
+ },
|
|
|
+ interval: 0,
|
|
|
+ inside: true,
|
|
|
+ textStyle: {
|
|
|
+ color: '#333',
|
|
|
+ fontSize: 10,
|
|
|
+ rich: {
|
|
|
+ line: {
|
|
|
+ width: 170,
|
|
|
+ height: 5,
|
|
|
+ backgroundColor: {image: dashedPic},
|
|
|
+ },
|
|
|
+ name: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 10,
|
|
|
+ },
|
|
|
+ bd: {
|
|
|
+ color: '#72afff',
|
|
|
+ padding: [0, 5],
|
|
|
+ fontSize: 10,
|
|
|
+ },
|
|
|
+ percent: {
|
|
|
+ color: '#5cdad0',
|
|
|
+ fontSize: 10,
|
|
|
+ },
|
|
|
+ value: {
|
|
|
+ color: '#333',
|
|
|
+ fontSize: 16,
|
|
|
+ fontWeight: 500,
|
|
|
+ padding: [0, 0, 0, 10],
|
|
|
+ },
|
|
|
+ unit: {
|
|
|
+ fontSize: 14,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ data: lineYAxis,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: pieSeries,
|
|
|
+ };
|
|
|
|
|
|
- option && myChart.setOption(option);
|
|
|
+ option && myChart.setOption(option);
|
|
|
|
|
|
- },
|
|
|
+ },
|
|
|
|
|
|
|
|
|
- },
|
|
|
+ },
|
|
|
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
- .chart-container {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- position: relative;
|
|
|
- padding-bottom: 10px;
|
|
|
- display: flex;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
+ .chart-container {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ position: relative;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
|
|
|
|
|
|
</style>
|