修改事件类型、分布统计文字重叠

src/views/bigdata/chart-event.vue

@@ -1,256 +1,141 @@
 <!-- **************************************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';
-	export default {
-		name: 'event',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-		},
+  import * as echarts from 'echarts';
+  export default {
+    name: 'event',
+    data() {
+      return {
+        count: 0
+      }
+    },
+    mounted() {},
 
-		methods:{
-			myEcharts(data) {
-				let chartDom = document.getElementById('event');
+    methods: {
+      myEcharts(data) {
+        let chartDom = document.getElementById('event');
         let myChart = echarts.init(chartDom);
-        let color = ['#02CDFF', '#62FBE7', '#7930FF','#E148EB','#ecb935']
+        let color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
         let 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: data
-				    },
+        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: data
+            },
 
-				  ]
-				};
-				option && myChart.setOption(option);
-			},
-			myEcharts2(chartData) {
-        let chartDom = document.getElementById('event2');
-        let myChart = echarts.init(chartDom);
-       let dashedPic =
-				    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM8AAAAOBAMAAAB6G1V9AAAAD1BMVEX////Kysrk5OTj4+TJycoJ0iFPAAAAG0lEQVQ4y2MYBaNgGAMTQQVFOiABhlEwCugOAMqzCykGOeENAAAAAElFTkSuQmCC';
-				let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF', '#0034ff','#E148EB'];
-        let option;
-				let arrName = [];
-				let arrValue = [];
-				let sum = 0;
-				let pieSeries = [],
-				    lineYAxis = [];
+          ]
+        };
+        option && myChart.setOption(option);
+      },
+      myEcharts2(chartData) {
+        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', '#99ff00', '#E148EB', '#E148EB', '#E148EB',
+          '#E148EB'
+        ]
+        var option
+        let arrName = []
+        let data = []
+        let sum = 0
+        let pieSeries = [],
+          lineYAxis = []
+
+        // 数据处理
+        chartData.forEach((v, i) => {
+          arrName.push(v.name)
+          data.push({
+            value: v.value,
+            name: v.name
+          })
+          sum = sum + v.value
+        })
+
+        // 图表option整理
+        option = {
+          color: ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378ea'],
+          backgroundColor: '#fff',
+
+          tooltip: {
+            formatter: "{b}：{c}%"
+          },
+
+
+          legend: {
+            orient: 'vertical',
+            left: 'left',
+            data: arrName
+          },
+          series: [{
+            name: '',
+            type: 'pie',
+            radius: '80%',
+            center: ['60%', '48%'],
+            data: data,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            },
+            label: {
+              normal: {
+                show: false,
+              }
+            }
+          }]
+        };
 
-				// 数据处理
-				chartData.forEach((v, i) => {
-				    arrName.push(v.name);
-				    arrValue.push(v.value);
-				    sum = sum + v.value;
-				});
+        if (option) {
+          myChart.setOption(option);
+        }
 
-				// 图表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 && myChart.setOption(option);
-			},
-		},
-	}
+    },
+  }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-	.chart-container {
-		width: 100%;
-		height: auto;
-		position: relative;
-		padding-bottom: 10px;
-		display: flex;
-	}
-</style>
+  .chart-container {
+    width: 100%;
+    height: auto;
+    position: relative;
+    padding-bottom: 10px;
+    display: flex;
+  }
+</style>