yudao-init/src/views/warehouse/lineChart.vue

<!--
 * @Author: zwq
 * @Date: 2022-01-21 14:43:06
 * @LastEditors: zhp
 * @LastEditTime: 2024-04-29 16:00:13
 * @Description:
-->
<template>
  <!-- <div> -->
    <!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> -->
    <div :id="id" class="costChart" :style="{  height: height, width: width }" />
  <!-- </div> -->
</template>

<script>
import * as echarts from 'echarts'
import 'echarts/theme/macarons' // echarts theme
// import resize from './mixins/resize'

export default {
  name: 'OverviewBar',
  // mixins: [resize],
  props: {
    id: {
      type: String,
      default: 'OverviewLine'
    },
    data:{
      type: Object,
      default: () => {}
    },
    // className: {
    //   type: String,
    //   default: 'epChart'
    // },
    width: {
      type: String,
      default: '100%'
    },
    beilv: {
      type: Number,
      default: 1
    },
    height: {
      type: String,
      default: '400px'
    },
    legendPosition: {
      type: String,
      default: 'center'
    },
    showLegend: {
      type: Boolean,
      default: false
    },
    legendData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chartData: [
        {
          name: '产品1',
          num: 1112,
          yield: 0.97,
        },
        {
          name: '产品2',
          num: 1112,
          yield: 0.97,
        },
        {
          name: '产品3',
          num: 1112,
          yield: 0.97,
        },
        {
          name: '产品4',
          num: 1112,
          yield: 0.97,
        },
        {
          name: '产品5',
          num: 1112,
          yield: 0.97,
        }
      ],
      chart: null,
      colors: ['rgba(113, 99, 254, 1)', 'rgba(39, 139, 255, 1)', 'rgba(100, 189, 255, 1)', 'rgba(143, 240, 170, 1)', 'rgba(246, 189, 22, 0.85)'],
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  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
    },
    initChart() {
      console.log(1111)
      let num = 0
      this.data.child && this.data.child.length > 0 && this.data.child.map(i => {
        num += i.num
      })
      if (
        this.chart !== null &&
        this.chart !== '' &&
        this.chart !== undefined
      ) {
        this.chart.dispose()
      }
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption({
        color: this.colors,
        title: {
          text: num,
          subtext: '总数/片',
          top: '32%',
          left: '49%',
          textAlign: 'center',
          textStyle: {
            fontSize: 32,
            color: 'rgba(140, 140, 140, 1)',
          },
          subtextStyle: {
            fontSize: 20,
            color: '#fff00',
          },
        },
        legend: {
          bottom: '2%',
          left: 'center',
          itemWidth: 12,
          itemHeight: 12,
          icon: 'roundRect',
          textStyle: {
            color: 'rgba(140, 140, 140, 1)'
          },
          data: this.data.child && this.data.child.length > 0 && this.data.child.map((item, index) => ({
            name: item.name,
            itemStyle: {
              color: this.colors[index % 4]
            }
          }))
        },
        series: [{
          name: this.data.factory,
          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\n" + params.name, 10);
              },
              textStyle: {            // 提示文字的样式
                // color: 'rgba(0, 0, 0, 0.65)',
                fontSize: 18
              }
            }
          },
          labelLine: {
            show: true,
            length: 25,
            length2: 100,
          },
          data: this.data.child && this.data.child.length > 0 && this.data.child.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"
        },
      })
    }
  }
}
</script>

<style scoped>

</style>