更新后台
This commit is contained in:
@ -2,95 +2,146 @@
|
||||
<div class="echartsBox" ref="chartRef"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import 'echarts-gl';
|
||||
import { ref, onMounted } from 'vue';
|
||||
const chartRef = ref()
|
||||
const initChart = () => {
|
||||
const myChart = echarts.init(chartRef.value);
|
||||
const option = {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||||
backgroundColor: 'rgba(0,0,0,0.7)',
|
||||
borderColor: '#0C2E5A',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: 'middle',
|
||||
right: '5%',
|
||||
orient: 'vertical',
|
||||
itemGap: 20,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
},
|
||||
itemWidth: 15,
|
||||
itemHeight: 15,
|
||||
icon: 'roundRect',
|
||||
formatter: function(name) {
|
||||
const data = option.series[0].data;
|
||||
const target = data.find(item => item.name === name);
|
||||
if (target) {
|
||||
return `${name} ${target.value} ${(target.value / 50 * 100).toFixed(0)}%`;
|
||||
}
|
||||
return name;
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '情报反馈统计',
|
||||
type: 'pie',
|
||||
radius: ['40%', '75%'],
|
||||
center: ['30%', '50%'],
|
||||
startAngle: 90,
|
||||
zlevel: 10,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderWidth: 2,
|
||||
borderColor: '#0C2E5A'
|
||||
},
|
||||
selectedMode: 'single',
|
||||
selectedOffset: 30,
|
||||
animation: true,
|
||||
animationType: 'scale',
|
||||
animationEasing: 'elasticOut',
|
||||
animationDelay: function (idx) {
|
||||
return Math.random() * 200;
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
borderWidth: 2,
|
||||
borderColor: '#0C2E5A',
|
||||
opacity: 0.8,
|
||||
shadowBlur: 20,
|
||||
shadowColor: 'rgba(0,0,0,0.5)'
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 18,
|
||||
name: '实反馈',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#FF6B9A' },
|
||||
{ offset: 1, color: '#FF4B7A' }
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 13,
|
||||
name: '超时反馈',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#FFAA33' },
|
||||
{ offset: 1, color: '#FF8A00' }
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 17,
|
||||
name: '处置下发',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#FFE699' },
|
||||
{ offset: 1, color: '#FFD666' }
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
name: '未反馈',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#66B5FF' },
|
||||
{ offset: 1, color: '#3AA1FF' }
|
||||
])
|
||||
}
|
||||
}
|
||||
],
|
||||
zlevel: 10,
|
||||
emphasis: {
|
||||
scale: true,
|
||||
scaleSize: 10,
|
||||
itemStyle: {
|
||||
shadowBlur: 30,
|
||||
shadowColor: 'rgba(0,0,0,0.6)'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
};
|
||||
|
||||
// export default {
|
||||
// name: 'Bkjbtj',
|
||||
// data() {
|
||||
// return {
|
||||
// chart: null,
|
||||
// chartData: [
|
||||
// { value: 18, name: '红色', itemStyle: { color: '#ff4d4f' } },
|
||||
// { value: 13, name: '橙色', itemStyle: { color: '#ff7a45' } },
|
||||
// { value: 17, name: '黄色', itemStyle: { color: '#ffc53d' } },
|
||||
// { value: 2, name: '蓝色', itemStyle: { color: '#40a9ff' } }
|
||||
// ]
|
||||
// };
|
||||
// },
|
||||
// mounted() {
|
||||
// this.initChart();
|
||||
// window.addEventListener('resize', this.resizeChart);
|
||||
// },
|
||||
// beforeDestroy() {
|
||||
// window.removeEventListener('resize', this.resizeChart);
|
||||
// this.chart && this.chart.dispose();
|
||||
// },
|
||||
// methods: {
|
||||
// initChart() {
|
||||
// this.chart = echarts.init(this.$refs.chartRef);
|
||||
// const option = {
|
||||
// backgroundColor: 'transparent',
|
||||
// tooltip: {
|
||||
// trigger: 'item',
|
||||
// formatter: '{b}: {c} ({d}%)'
|
||||
// },
|
||||
// legend: {
|
||||
// orient: 'vertical',
|
||||
// right: '5%',
|
||||
// top: 'middle',
|
||||
// textStyle: {
|
||||
// color: '#fff'
|
||||
// }
|
||||
// },
|
||||
// series: [{
|
||||
// name: '告警统计',
|
||||
// type: 'pie3D',
|
||||
// radius: '55%',
|
||||
// center: ['40%', '50%'],
|
||||
// viewControl: {
|
||||
// beta: 40,
|
||||
// alpha: 20,
|
||||
// distance: 200,
|
||||
// rotateSensitivity: 1,
|
||||
// zoomSensitivity: 1
|
||||
// },
|
||||
// label: {
|
||||
// show: true,
|
||||
// formatter: '{d}%',
|
||||
// textStyle: {
|
||||
// color: '#fff',
|
||||
// fontSize: 14,
|
||||
// borderWidth: 1
|
||||
// }
|
||||
// },
|
||||
// labelLine: {
|
||||
// show: true,
|
||||
// lineStyle: {
|
||||
// color: '#fff'
|
||||
// }
|
||||
// },
|
||||
// itemStyle: {
|
||||
// opacity: 0.8,
|
||||
// borderWidth: 1,
|
||||
// borderColor: '#fff'
|
||||
// },
|
||||
// emphasis: {
|
||||
// itemStyle: {
|
||||
// opacity: 1
|
||||
// }
|
||||
// },
|
||||
// data: this.chartData
|
||||
// }]
|
||||
// };
|
||||
// this.chart.setOption(option);
|
||||
// },
|
||||
// resizeChart() {
|
||||
// this.chart && this.chart.resize();
|
||||
// }
|
||||
// }
|
||||
// };
|
||||
option && myChart.setOption(option);
|
||||
|
||||
// 监听窗口大小变化
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Reference in New Issue
Block a user