xiangan_pc/src/components/data-vision/history-data-echarts.vue

<template>
  <div :id="idName" :style="{ height: height, width: width }" />
</template>
<script>
export default {
  props: {
    idName: { type: String, default: 'chart' },
    width: { type: String, default: '100%' },
    height: { type: String, default: '100%' },
    chartData: { type: Array, default: () => [] },
    desc: { type: String, default: '' }
  },
  data() {
    return {
      dataX: [],
      dataY: [],
      legend: [],
      seriesList: [],
      disabled: false,
      color: ['#5721f0', '#ff5c00', '#e33283', '#00ffff', '#1c76fd', '#ff5c00', '#d357ff', '#89b277', '#ffe000']
    }
  },
  watch: {
    chartData: {
      handler(val, olVal) {
        this.initFun()
      },
      deep: true
    }
  },
  mounted() {
    this.initFun()
  },
  methods: {
    initFun() {
      if (this.chartData && this.chartData.length > 0) {
        this.seriesList = []
        this.dataX = []
        this.dataY = []
        this.legend = []
        this.chartData.forEach((item, i) => {
          this.legend.push(item.userName)
          this.seriesList.push({
            name: item.userName,
            type: 'line',
            stack: 'Total',
            symbolSize: 8, // 设定实心点的大小
            // 设置小圆点的颜色
            itemStyle: {
              color: this.color[i]
            },
            lineStyle: {
              color: this.color[i]
            },
            // areaStyle: {
            //   color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 2, [{
            //     offset: 0,
            //     color: this.color[i]
            //   }, {
            //     offset: 1,
            //     color: 'transparent'
            //   }])
            // },
            emphasis: {
              focus: 'series'
            },
            // endLabel: {
            //   show: true,
            //   color: '#fff',
            //   borderColor: 'none',
            //   formatter: function(params) {
            //     console.log(params)
            //     return params.seriesName + ':' + params.value
            //   }
            // },
            data: item.date.map(iten => iten.num)
          })
        })
        // console.log(this.seriesList)
        this.chartData[0].date.forEach(item => {
          this.dataX.push(item.month)
        })
      }
      this.$nextTick(() => {
        this.visionFun()
      })
    },
    visionFun() {
      // 基于准备好的dom，初始化echarts实例
      const historyEcharts = this.$echarts.init(document.getElementById(this.idName))
      historyEcharts.setOption({
        backgroundColor: 'transparent',
        animationDuration: 3000,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          type: 'scroll',
          data: this.legend,
          icon: 'circle',
          right: 0,
          itemHeight: 9, // 设置icont图形大小
          // 设置字体样式
          textStyle: {
            fontSize: 12,
            color: '#fff',
            padding: [0, 0, 0, -8] // 修改文字和图标距离
          }
        },
        grid: {
          left: '3%',
          right: '8%',
          bottom: '3%',
          top: '18%',
          containLabel: true
        },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.dataX,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: false,
              lineStyle: {
                color: 'white'
              }
            },
            offset: 10,
            axisTick: {
              show: false,
              length: 9,
              alignWithLabel: true,
              lineStyle: {
                color: '#7DFFFD'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#6b7284'
              }
            }
          }

        ],
        series: this.seriesList
      })
      window.addEventListener('resize', () => { historyEcharts.resize() })
    }
  }
}

</script>
<style style="scss" scoped>
</style>