11-mes-new/src/components/Charts/LineChart.vue

<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>