380新产品,优化

yyt

2024-05-23 04b8eff075a04db23e6f908855699b4d2954588c

 jcdm-ui/src/views/dashboard/PieChart.vue

@@ -6,6 +6,7 @@
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import { getTopProcess } from "@/api/main/da/passingStationCollection/passingStationCollection";

export default {
  mixins: [resize],
@@ -20,18 +21,19 @@
    },
    height: {
      type: String,
      default: '300px'
      default: '350px'
    }
  },
  data() {
    return {
      chart: null
      chart: null,
      data: [],
      title:[],
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
    this.getData()

  },
  beforeDestroy() {
    if (!this.chart) {
@@ -41,33 +43,54 @@
    this.chart = null
  },
  methods: {
    getData(){
      getTopProcess().then(res => {
        if (res.code === 200){
          this.data = res.rows
          this.data.forEach(x => {
            this.title.push(x.name)
          })
          this.$nextTick(() => {
            this.initChart()
          })
        }
      })
    },
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({
        title: {
          text: '工位堵塞Top5', // 标题文本
          left: 'center' // 标题位置
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        // textStyle
        legend: {
          left: 'center',
          bottom: '10',
          data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
          orient: 'vertical',

          left: 'left',
          // left: 'center',
          // bottom: '10',//左侧高度
          data: this.title
        },
        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' }
            ],
            // roseType: 'radius',//更改样式
            radius: '50%',
            // labelLine: {
            //   length: 10 // 调整标签线的长度
            // },
            center: ['50%', '60%'],
            data: this.data,
            label: {
              formatter: '{b}: {c} ({d}%)'
            },
            animationEasing: 'cubicInOut',
            animationDuration: 2600
          }