'init'

src/components/Charts/LineChart.vue

@@ -0,0 +1,220 @@
+<template>
+  <div :id="id" :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+import resize from './mixins/resize'
+
+const colorList = ['#FFB61F', '#283D68', '#5AD8A6', '#E97466']
+const shadowList = ['rgba(255, 179, 24, 0.5)', 'rgba(53, 66, 93, 0.5)', 'rgba(90, 216, 166, 0.6)', 'rgba(233, 116, 102, 0.5)']
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '200px'
+    },
+    height: {
+      type: String,
+      default: '200px'
+    },
+    chartData: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: {
+      handler: function(val) {
+        this.initChart()
+      }
+      // deep: true
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+
+      this.chart.setOption({
+        // backgroundColor: '#394056',
+        tooltip: {
+          trigger: 'axis',
+          padding: 0,
+          backgroundColor: 'transparent',
+          renderMode: 'html',
+          textStyle: {
+            color: 'rgba(0, 0, 0, 0.85)',
+            fontSize: 12,
+            lineHeight: 14
+          },
+          formatter: function(param) {
+            var text = ''
+            console.log(param)
+            const paramItem = param.map(item => {
+              return `<div style="display: flex; min-width: 150px">
+                <span>
+                  <span style="display: inline-block; width: 4px; height: 4px; border-radius: 4px; background-color: ${item.color}; position: relative; top: -3px"></span>
+                  <span>${item.seriesName}</span>
+                </span>
+                <span style="flex: 1;text-align: right">${item.value}</span>
+              </div>`
+            })
+            text = `<div class="line-tooltip">
+              <p style="margin: 0">${param[0].name}</p>
+              ${paramItem.join('')}
+            </div>`
+            return text
+          }
+        },
+        color: colorList,
+        legend: {
+          top: 0,
+          data: ['设备CT', '设备TT', '产线CT', '产线TT'],
+          right: '4%',
+          textStyle: {
+            fontSize: 12,
+            color: '#8C8C8C'
+          }
+        },
+        grid: {
+          top: 50,
+          left: '2%',
+          right: '2%',
+          bottom: '2%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          boundaryGap: false,
+          axisLine: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          },
+          data: this.chartData.timeArr
+        }],
+        yAxis: [{
+          type: 'value',
+          name: '',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          },
+          axisLabel: {
+            margin: 10,
+            textStyle: {
+              fontSize: 14
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(0, 0, 0, .15)'
+            }
+          }
+        }],
+        series: [{
+          name: '设备CT',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 5,
+          showSymbol: false,
+          lineStyle: {
+            normal: {
+              width: 2,
+              shadowBlur: 4,
+              shadowColor: shadowList[0],
+              shadowOffsetY: 2
+            }
+          },
+          data: this.chartData.eqCT
+        }, {
+          name: '设备TT',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 5,
+          showSymbol: false,
+          lineStyle: {
+            normal: {
+              width: 2,
+              shadowBlur: 4,
+              shadowColor: shadowList[1],
+              shadowOffsetY: 2
+            }
+          },
+          data: this.chartData.eqTT
+        }, {
+          name: '产线CT',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 5,
+          showSymbol: false,
+          lineStyle: {
+            normal: {
+              width: 2,
+              shadowBlur: 4,
+              shadowColor: shadowList[2],
+              shadowOffsetY: 2
+            }
+          },
+          data: this.chartData.lineCT
+        }, {
+          name: '产线TT',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 5,
+          showSymbol: false,
+          lineStyle: {
+            normal: {
+              width: 2,
+              shadowBlur: 4,
+              shadowColor: shadowList[3],
+              shadowOffsetY: 2
+            }
+          },
+          data: this.chartData.lineTT
+        }]
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.line-tooltip{
+  background: #FFFFFF;
+  box-shadow: 0px 2px 6px 0px rgba(154, 170, 164, 0.5);
+  border-radius: 4px;
+  opacity: 0.85;
+  backdrop-filter: blur(23px);
+  padding: 8px;
+}
+</style>