|
@@ -1,204 +1,3 @@
|
|
|
-<!-- <template>
|
|
|
- <div :class="className" :style="{height:height,width:width}" />
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import echarts from 'echarts'
|
|
|
-require('echarts/theme/macarons') // echarts theme
|
|
|
-import resize from './mixins/resize'
|
|
|
-
|
|
|
-export default {
|
|
|
- mixins: [resize],
|
|
|
- props: {
|
|
|
- className: {
|
|
|
- type: String,
|
|
|
- default: 'chart'
|
|
|
- },
|
|
|
- width: {
|
|
|
- type: String,
|
|
|
- default: '100%'
|
|
|
- },
|
|
|
- height: {
|
|
|
- type: String,
|
|
|
- default: '300px'
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- chart: null
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.$nextTick(() => {
|
|
|
- this.initChart()
|
|
|
- })
|
|
|
- },
|
|
|
- beforeDestroy() {
|
|
|
- if (!this.chart) {
|
|
|
- return
|
|
|
- }
|
|
|
- this.chart.dispose()
|
|
|
- this.chart = null
|
|
|
- },
|
|
|
- methods: {
|
|
|
- initChart() {
|
|
|
- this.chart = echarts.init(this.$el, 'macarons')
|
|
|
-
|
|
|
- this.chart.setOption({
|
|
|
- tooltip: {
|
|
|
- trigger: 'item',
|
|
|
- formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
|
- },
|
|
|
- legend: {
|
|
|
- left: 'center',
|
|
|
- bottom: '10',
|
|
|
- data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: 'WEEKLY WRITE ARTICLES',
|
|
|
- type: 'pie',
|
|
|
- roseType: 'radius',
|
|
|
- radius: [15, 95],
|
|
|
- center: ['50%', '38%'],
|
|
|
- data: [
|
|
|
- { value: 320, name: 'Industries' },
|
|
|
- { value: 240, name: 'Technology' },
|
|
|
- { value: 149, name: 'Forex' },
|
|
|
- { value: 100, name: 'Gold' },
|
|
|
- { value: 59, name: 'Forecasts' }
|
|
|
- ],
|
|
|
- animationEasing: 'cubicInOut',
|
|
|
- animationDuration: 2600
|
|
|
- }
|
|
|
- ]
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
- -->
|
|
|
-
|
|
|
-<!-- <template>
|
|
|
- <div class="pie-chart-container">
|
|
|
- <div class="pie-charts">
|
|
|
- <div v-for="(item, index) in data" :key="index" class="pie-chart-item">
|
|
|
- <div class="pie-chart" :style="getPieChartStyle(item.value, item.itemStyle.color)">
|
|
|
- <span class="pie-chart-text">{{ item.value }}%</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="legend">
|
|
|
- <div v-for="(item, index) in data" :key="index" class="legend-item">
|
|
|
- <span class="color-dot" :style="{ backgroundColor: item.itemStyle.color }"></span>
|
|
|
- <span>{{ item.name }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import DataV from '@jiaminghi/data-view'
|
|
|
-export default {
|
|
|
- name: 'PieChart',
|
|
|
- components: {
|
|
|
- dv: DataV,
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- data: [
|
|
|
- { value: 70, name: "Shopping", itemStyle: { color: "#FF9F43" } },
|
|
|
- { value: 46, name: "Images", itemStyle: { color: "#5E60CE" } },
|
|
|
- { value: 15, name: "Document", itemStyle: { color: "#FF6B6B" } },
|
|
|
- { value: 67, name: "Audio", itemStyle: { color: "#54A0FF" } },
|
|
|
- { value: 23, name: "Video", itemStyle: { color: "#FF4DFF" } },
|
|
|
- { value: 88, name: "Text", itemStyle: { color: "#FF9F43" } },
|
|
|
- { value: 50, name: "Other", itemStyle: { color: "#1DD1A1" } },
|
|
|
- ],
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getPieChartStyle(value, color) {
|
|
|
- const degree = (value / 100) * 360;
|
|
|
- return {
|
|
|
- background: `conic-gradient(
|
|
|
- ${color} 0deg ${degree}deg,
|
|
|
- rgba(0, 0, 0, 0.05) ${degree}deg 360deg
|
|
|
- )`,
|
|
|
- };
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-.pie-chart-container {
|
|
|
- width: 100%;
|
|
|
- max-width: 800px;
|
|
|
- margin: 0 auto;
|
|
|
-}
|
|
|
-
|
|
|
-.pie-charts {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: center;
|
|
|
-}
|
|
|
-
|
|
|
-.pie-chart-item {
|
|
|
- width: 25%;
|
|
|
- padding: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-
|
|
|
-.pie-chart {
|
|
|
- width: 100px;
|
|
|
- height: 100px;
|
|
|
- border-radius: 50%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- position: relative;
|
|
|
- background-color: rgba(0, 0, 0, 0.05);
|
|
|
-}
|
|
|
-
|
|
|
-.pie-chart::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 10px;
|
|
|
- left: 10px;
|
|
|
- right: 10px;
|
|
|
- bottom: 10px;
|
|
|
- background: #ccecfe;
|
|
|
- border-radius: 50%;
|
|
|
-}
|
|
|
-
|
|
|
-.pie-chart-text {
|
|
|
- position: relative;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- color: #333;
|
|
|
-}
|
|
|
-
|
|
|
-.legend {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: center;
|
|
|
- margin-top: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.legend-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin: 0 10px 10px 0;
|
|
|
-}
|
|
|
-
|
|
|
-.color-dot {
|
|
|
- width: 10px;
|
|
|
- height: 10px;
|
|
|
- border-radius: 50%;
|
|
|
- margin-right: 5px;
|
|
|
-}
|
|
|
-</style> -->
|
|
|
<template>
|
|
|
<div class="pie-chart-container">
|
|
|
<dv-charts v-if="option" :option="option" />
|
|
@@ -221,13 +20,23 @@ export default {
|
|
|
{ name: "变量", value: 67 },
|
|
|
],
|
|
|
refreshInterval: null,
|
|
|
+ isOnDashboard: false,
|
|
|
};
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ $route: {
|
|
|
+ immediate: true,
|
|
|
+ handler(newRoute) {
|
|
|
+ this.isOnDashboard = newRoute.path === '/dashboard';
|
|
|
+ this.handleRouteChange();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
mounted() {
|
|
|
this.init();
|
|
|
- this.refreshInterval = setInterval(() => {
|
|
|
+ /* this.refreshInterval = setInterval(() => {
|
|
|
this.init();
|
|
|
- }, 30000);
|
|
|
+ }, 30000); */
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
// 组件销毁前清除定时器
|
|
@@ -236,6 +45,11 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ handleRouteChange() {
|
|
|
+ if (this.isOnDashboard) {
|
|
|
+ this.init();
|
|
|
+ }
|
|
|
+ },
|
|
|
initChart() {
|
|
|
const filteredData = this.data.filter((item) => item.value > 0);
|
|
|
this.option = {
|