echarts 升级5.1版本后 点击还原按钮图像消失

w1jd8yoj  于 2022-11-02  发布在  Echarts
关注(0)|答案(7)|浏览(823)

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?

yvfmudvl

yvfmudvl1#

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that it containsa minimum reproducible demoand necessaryimagesto illustrate. Otherwise, our committers will ask you to do so.

  • A minimum reproducible demo* should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster.

You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org . Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe to our mailing list .

Have a nice day! 🍵

vawmfj5a

vawmfj5a2#

@yrx0823 It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people, we'd like to suggest using English next time. 🤗

TRANSLATED

TITLE

After upgrading to version 5.1, click the restore button and the image disappears

ki0zmccv

ki0zmccv3#

@yrx0823 Please provide a minimum reproducible demo for the issue either with https://codepen.io/Ovilia/pen/dyYWXWM , https://www.makeapie.com/editor.html or https://codesandbox.io/s/mystifying-bash-2uthz .

  • A minimum reproducible demo* should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster.
agyaoht7

agyaoht74#

请问这个问题解决了吗?我也遇到这个问题了。

uwopmtnx

uwopmtnx5#

还原为什么还原到初始化未赋值的状态,以前都是还原到最后赋值的状态的呀

z9ju0rcb

z9ju0rcb6#

请问这个问题解决了吗?我也遇到这个问题了。

解决了。

首先,这个问题出现的原因是5.x版本的toolbox.feature.restore会恢复到第一次chart.setOption(option1)后的状态,之后执行setOption是对之前的option1配置项的更新,大致意思是:option1 + option2 + ... , restore事件会直接恢复到option1状态。

解决方式:官方文档配置项里有 https://echarts.apache.org/zh/api.html#echartsInstance.setOption
更新图表时,加个参数:
setOption(option, { notMerge: true }) // 精简写法:setOption(option, true)

例如:
import { merge } from 'lodash'

  • 恢复到option1:默认是恢复到setOption(option1)后的状态
  • 恢复到option2:setOption(merge(chart.getOption(), option2), true)
  • 恢复到option3:setOption(merge(chart.getOption(), option3), true)
  • 以此类推
nwwlzxa7

nwwlzxa77#

请问这个问题解决了吗?我也遇到这个问题了。

解决了。

首先,这个问题出现的原因是5.x版本的toolbox.feature.restore会恢复到第一次chart.setOption(option1)后的状态,之后执行setOption是对之前的option1配置项的更新,大致意思是:option1 + option2 + ... , restore事件会直接恢复到option1状态。

解决方式:官方文档配置项里有 https://echarts.apache.org/zh/api.html#echartsInstance.setOption 更新图表时,加个参数: setOption(option, { notMerge: true }) // 精简写法:setOption(option, true)

例如: import { merge } from 'lodash'


* 恢复到option1:默认是恢复到setOption(option1)后的状态

* 恢复到option2:setOption(merge(chart.getOption(), option2), true)

* 恢复到option3:setOption(merge(chart.getOption(), option3), true)

* 以此类推

感觉这种修改就很多余,组件修复的难点是什么呢?

相关问题