2025-04-14 19:48:42 +08:00
|
|
|
<template>
|
2025-04-15 14:38:12 +08:00
|
|
|
<div class="echartsBox" ref="chartRef"></div>
|
2025-04-14 19:48:42 +08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
2025-04-15 14:38:12 +08:00
|
|
|
import * as echarts from 'echarts';
|
|
|
|
|
import 'echarts-gl';
|
2025-04-14 19:48:42 +08:00
|
|
|
|
2025-04-15 14:38:12 +08:00
|
|
|
// 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();
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// };
|
2025-04-14 19:48:42 +08:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.echartsBox {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: rgba(0,29,75,0.6);
|
|
|
|
|
border-radius: 0 0 4px 4px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
