yudao-dev/src/views/OperationalOverview/components/ISRAChart.vue

<!--
 * @Author: zhp
 * @Date: 2024-01-29 13:45:56
 * @LastEditTime: 2024-04-17 15:48:21
 * @LastEditors: zhp
 * @Description:
-->
<template>
	<div>
		<!-- <NotMsg v-show="notMsg"/> -->
		<div id="israChart" class="isra-chart" style="height:390px;"></div>
	</div>
</template>

<script>
import { position } from '@antv/x6-common/lib/dom/position';
import * as echarts from 'echarts';
// import resize from './../mixins/resize'
// import NotMsg from './../components/NotMsg'

export default {
	name: 'ISRAChart',
	// mixins: [resize],
	// components:{ NotMsg },
	props: {},
	data() {
		return {
			chart: null,
			// notMsg:true,
      colors: ['#2760ff', '#518eec', '#49FBD6', '#ddb523'],
			chartData: []
		};
	},
	activated() {
	},
	computed: {
		israChartMsg() {
			return this.$store.state.websocket.israKiln
		}
	},
	watch: {
		israChartMsg: {
			handler(newVal, oldVal) {
				this.chartData = newVal || []
				this.updateChart()
				this.$emit('emitFun')
			}
		}
  },
  mounted() {
    this.chartData = [
      {
        name: '0904褶皱/严重',
        num: 1112,
        yield: 0.97,
      },
      {
        name: '0904褶皱/严重',
        num: 1112,
        yield: 0.97,
      },
       {
         name: '0904褶皱/严重',
        num: 1112,
        yield: 0.97,
      },
       {
         name: '0904褶皱/严重',
        num: 1112,
        yield: 0.97,
      }
    ]
    this.updateChart()
  },
  methods: {
    getEqualNewlineString(params, length) {
      let text = ''
      let count = Math.ceil(params.length / length) // 向上取整数
      // 一行展示length个
      if (count > 1) {
        for (let z = 1; z <= count; z++) {
          text += params.substr((z - 1) * length, length)
          if (z < count) {
            text += '\n'
          }
        }
      } else {
        text += params.substr(0, length)
      }
      return text
    },
		updateChart() {
			console.log('update')
			let num = 0
			this.chartData && this.chartData.length > 0 && this.chartData.map(i => {
				num+=i.num
			})
			if (
        this.chart !== null &&
        this.chart !== '' &&
        this.chart !== undefined
      ) {
        this.chart.dispose()
      }
			// if (this.chartData && this.chartData.length > 0) {
      //    this.notMsg = false
      // } else {
      //   this.notMsg = true
			// 	return
      // }
			this.chart = echarts.init(document.getElementById('israChart'));
			var option = {
				color:this.colors,
				title:{
					text: num,
					subtext: '总数/片',
					top: '32%',
					left: '49%',
					textAlign: 'center',
					textStyle: {
						fontSize: 32,
						color: '#fff',
					},
					subtextStyle: {
						fontSize: 20,
						color: '#fff00',
					},
        },
        grid: {
          left: '1%',
          right: '1%',
          bottom: '0',
          containLabel: true
        },
				// legend: {
				// 	bottom: '10%',
				// 	left: 'center',
				// 	itemWidth: 12,
				// 	itemHeight:12,
        //   icon: 'roundRect',
				// 	textStyle: {
				// 		color: '#fff'
				// 	},
				// 	data:this.chartData && this.chartData.length > 0 && this.chartData.map((item,index)=>({
				// 		name:item.name,
				// 		itemStyle:{
				// 			color: this.colors[index%4]
				// 		}
				// 	}))
				// },
				series:[{
						name: 'ISRA缺陷检测',
            type: 'pie',
            // position:outerHeight,
						center: ['50%', '40%'],
						radius: ['45%', '70%'],
						avoidLabelOverlap: true,
          label: {
            show: true,
            normal: {
              alignTo: 'labelLine',
              margin: 10,
              edgeDistance: 10,
              lineHeight: 16,
              // 各分区的提示内容
              // params: 即下面传入的data数组,通过自定义函数，展示你想要的内容和格式
              formatter: function (params) {
                console.log(params);
                return ;
              },
              formatter: (params) => {
                //调用自定义显示格式
                return this.getEqualNewlineString(params.value + " | " + params.percent.toFixed(0) + "%" + "\n" + params.name,10);
              },
              textStyle: {            // 提示文字的样式
                // color: '#595959',
                fontSize: 18
              }
            }
						},
						labelLine: {
              show: true,
              length: 25,
              length2: 10,
						},
						data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({
						name:item.name,
            value: item.num,
            label: {
              color: this.colors[index % 4]
            },
						itemStyle:{
							color:{
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								global: false,
								colorStops:[
									{offset: 0,color: this.colors[index%4]},
									{offset: 1,color: this.colors[index%4]+'33'}
								]
							}
						}
					}))}],
					tooltip: {
						trigger: 'item',
						className: "isra-chart-tooltip"
					},
			}
			this.chart.setOption(option);
		}
	},
};
</script>

<style scoped lang="scss">
.isra-chart {
	width: 100%;
	height: 100%;
  position: absolute;
  top: 7%;
}
    .isra-chart-tooltip {
      background: #0a2b4f77 !important;
      border: none !important;
      backdrop-filter: blur(12px);
    }

    .isra-chart-tooltip * {
      color: #fff !important;
    }
</style>
<style>

</style>