Version

5.1.0

Steps to reproduce

<script>
import macarons from '@json/macarons.json'
import echarts from 'echarts'
export default {
  props: ['line_data'],
  data() {
    return {
      chart: null,
      options: {
        color: ['#13d6b2'],
        legend: {
          show: true,
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          right: 5,
          feature: {
            dataZoom: {
              show: true,
              yAxisIndex: 'none',
            },
            restore: {},
          },
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            formatter: function (value, index) {
              const arr = value.split(' ')
              const arr1 = arr[0].split('-')
              if (index === 0) {
                return value
              } else {
                return arr1[1]   '-'   arr1[2]   ' '   arr[1]
              }
            },
          },
          boundaryGap: false,
          data: [],
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: (val) => {
              return val   this.line_data.unit
            },
          },
        },
        series: [
          {
            name: '',
            type: 'line',
            data: [],
            symbol: 'diamond',
            symbolSize: '4',
            smooth: false,
            lineStyle: {
              width: 1.5,
            },
            itemStyle: {
              color: '',
            },
          },
        ],
      },
    }
  },
  methods: {
    init_chart() {
      if (!this.chart) {
        echarts.registerTheme('macarons', macarons)
        this.chart = echarts.init(this.$refs.chart, 'macarons')
        this.chart_click()
      }

      this.chart.resize()
      this.chart.setOption(this.options)
    },
    chart_click() {
      this.chart.on('click', (params) => {
        this.$emit('view_client', params.name)
      })
    },
    listen_resize() {
      if (this.chart) {
        this.chart.resize()
      }
    },
  },
  watch: {
    line_data: {
      handler(newValue) {
        this.options.xAxis.data = newValue.time
        this.options.series[0].data = newValue.value
        this.options.series[0].name = newValue.series_name
        this.options.series[0].itemStyle.color = newValue.line_color
        this.$nextTick(() => {
          this.init_chart()
        })
      },
      deep: true,
      immediate: false,
    },
  },
  created() {
    window.addEventListener('resize', this.listen_resize)
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', this.listen_resize)
    })
  },
}
</script>

What is expected?

None

What is actually happening?