新增模块

src/views/cost/lineChart.vue

@@ -0,0 +1,233 @@
+<!--
+ * @Author: zwq
+ * @Date: 2022-01-21 14:43:06
+ * @LastEditors: zhp
+ * @LastEditTime: 2024-04-16 14:16:17
+ * @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'
+    },
+    // className: {
+    //   type: String,
+    //   default: 'epChart'
+    // },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    },
+    height: {
+      type: String,
+      default: '35vh'
+    },
+    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.chartData && this.chartData.length > 0 && this.chartData.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.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: 'rgba(0, 0, 0, 0.65)',
+                fontSize: 18
+              }
+            }
+          },
+          labelLine: {
+            show: true,
+            length: 25,
+            length2: 100,
+          },
+          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"
+        },
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>