You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2021/05/18 03:24:28 UTC
[GitHub] [echarts] kalubin00 opened a new issue #14974: vue3使用echarts5，折线图、柱状图使用datazoom报错
kalubin00 opened a new issue #14974:
URL: https://github.com/apache/echarts/issues/14974
### Version
5.1.1
### Steps to reproduce
vue3环境下创建组件如下：
<template>
<div class="chart" :id="chartId"></div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, ref } from 'vue'
import * as echarts from 'echarts'
export default defineComponent({
name: 'pieChart',
props: {
chartData: {
type: Array
}
},
setup(props) {
const chartId = `barChart${Math.random()}`
const chart = ref<any>()
const chartDatas = reactive({
// dataList: props.chartData
dataList: [
{ title: 'Matcha Latte', count1: 43.3, '2016': 85.8, '2017': 93.7 },
{ title: 'Milk Tea', count1: 83.1, '2016': 73.4, '2017': 55.1 },
{ title: 'Cheese Cocoa', count1: 86.4, '2016': 65.2, '2017': 82.5 },
{ title: 'Walnut Brownie', count1: 72.4, '2016': 53.9, '2017': 39.1 }
]
})
console.log(props)
onMounted(() => {
// console.log(echarts)
chart.value = echarts.init(document.getElementById(chartId) as HTMLDivElement)
chart.value.setOption({
legend: {
orient: 'vertical',
left: '75%',
top: '30%'
},
xAxis: {
type: 'category',
axisTick: { alignWithLabel: true }
},
yAxis: {
type: 'value'
},
dataZoom: [
{
type: 'slider',
start: 50,
end: 100,
realtime: true,
height: 7
}
],
dataset: { source: chartDatas.dataList },
series: [
{
name: '',
type: 'bar',
encode: {
x: 'title',
y: 'count1'
}
}
]
})
})
return {
chartId,
chart,
...toRefs(chartDatas)
}
}
})
</script>
<style lang="stylus" scoped>
.chart
width 100%
height 100%
</style>
页面中引用组件<bar-chart />
组件上拖动滑动条，或拖动手柄调整窗口大小，即console中报错。组件数据没有变化
### What is expected?
可调整图表显示数据范围
### What is actually happening?
柱状图的报错如下：
barPolar.js:63 Uncaught TypeError: Cannot read property 'type' of undefined
at barPolar.js:63
at GlobalModel2.<anonymous> (Global.js:661)
at Array.forEach (<anonymous>)
at each (util.js:206)
at GlobalModel2.eachSeriesByType (Global.js:657)
at Object.barLayoutPolar (barPolar.js:61)
at Object.overallReset (util.js:311)
at Task2.overallTaskReset [as _reset] (Scheduler.js:460)
at Task2._doReset (task.js:202)
at Task2.perform (task.js:117)
报错语句为：
if (seriesModel.coordinateSystem.type !== 'polar') {
return;
}
此处的seriesModel.coordinateSystem为undefined。
这是为什么呢？
<!-- This issue is generated by echarts-issue-helper. DO NOT REMOVE -->
<!-- This issue is in English. DO NOT REMOVE -->
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] kalubin00 closed issue #14974: vue3使用echarts5，折线图、柱状图使用datazoom报错
Posted by GitBox <gi...@apache.org>.
kalubin00 closed issue #14974:
URL: https://github.com/apache/echarts/issues/14974
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] echarts-bot[bot] commented on issue #14974: vue3使用echarts5，折线图、柱状图使用datazoom报错
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #14974:
URL: https://github.com/apache/echarts/issues/14974#issuecomment-842796847
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] plainheart edited a comment on issue #14974: vue3使用echarts5，折线图、柱状图使用datazoom报错
Posted by GitBox <gi...@apache.org>.
plainheart edited a comment on issue #14974:
URL: https://github.com/apache/echarts/issues/14974#issuecomment-842812114
应该跟之前一些开发者反馈的问题类似，先改用 `shallowRef` 试试看。
```ts
const chart = shallowRef<any>()
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] junweipan edited a comment on issue #14974: vue3使用echarts5，折线图、柱状图使用datazoom报错
Posted by GitBox <gi...@apache.org>.
junweipan edited a comment on issue #14974:
URL: https://github.com/apache/echarts/issues/14974#issuecomment-1050465991
> 应该跟之前一些开发者反馈的问题类似，先改用 `shallowRef` 试试看。
>
> ```ts
> const chart = shallowRef<any>()
> ```
hi, 如果chart是定义在data中的, 应该怎么赋初始类型?
```vue
data() {
return {
// chart: shallowRef<any> 不能这样定义类型
chart: null
}
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
...
}
}
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] junweipan removed a comment on issue #14974: vue3使用echarts5，折线图、柱状图使用datazoom报错
Posted by GitBox <gi...@apache.org>.
junweipan removed a comment on issue #14974:
URL: https://github.com/apache/echarts/issues/14974#issuecomment-1050457544
data() {
return {
// chart: null
chart: echarts.ECharts
}
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
...
}
}
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] junweipan commented on issue #14974: vue3使用echarts5，折线图、柱状图使用datazoom报错
Posted by GitBox <gi...@apache.org>.
junweipan commented on issue #14974:
URL: https://github.com/apache/echarts/issues/14974#issuecomment-1050457544
data() {
return {
// chart: null
chart: echarts.ECharts
}
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
...
}
}
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] plainheart commented on issue #14974: vue3使用echarts5，折线图、柱状图使用datazoom报错
Posted by GitBox <gi...@apache.org>.
plainheart commented on issue #14974:
URL: https://github.com/apache/echarts/issues/14974#issuecomment-842871865
`ref` 会把包裹的值变成响应式的对象，可能会影响 echarts 内部一些 model 属性的正常访问，暂时还不清楚具体原因。而 `shallowRef` 则是浅引用，不会将值变成响应式对象，不会影响 echarts 内部属性的访问。
可以参考：https://v3.cn.vuejs.org/api/refs-api.html#shallowref
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] pissang closed issue #14974: vue3使用echarts5，折线图、柱状图使用datazoom报错
Posted by GitBox <gi...@apache.org>.
pissang closed issue #14974:
URL: https://github.com/apache/echarts/issues/14974
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] kalubin00 commented on issue #14974: vue3使用echarts5，折线图、柱状图使用datazoom报错
Posted by GitBox <gi...@apache.org>.
kalubin00 commented on issue #14974:
URL: https://github.com/apache/echarts/issues/14974#issuecomment-842867698
> 应该跟之前一些开发者反馈的问题类似，先改用 `shallowRef` 试试看。
>
> ```ts
> const chart = shallowRef<any>()
> ```
万分感谢，卡了我两天，问题终于解决了。但是原理是什么呢？vue3刚刚试水，有没有shallowRef相关解释说明的资料可以参考呀？再次拜谢大神～
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] junweipan commented on issue #14974: vue3使用echarts5，折线图、柱状图使用datazoom报错
Posted by GitBox <gi...@apache.org>.
junweipan commented on issue #14974:
URL: https://github.com/apache/echarts/issues/14974#issuecomment-1050465991
> 应该跟之前一些开发者反馈的问题类似，先改用 `shallowRef` 试试看。
>
> ```ts
> const chart = shallowRef<any>()
> ```
hi, 如果chart是定义在data中的, 应该怎么赋初始值
```vue
data() {
return {
chart: echarts.ECharts
}
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
...
}
}
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] plainheart commented on issue #14974: vue3使用echarts5，折线图、柱状图使用datazoom报错
Posted by GitBox <gi...@apache.org>.
plainheart commented on issue #14974:
URL: https://github.com/apache/echarts/issues/14974#issuecomment-842812114
应该跟之前一些开发者反馈的问题类似，先改用 `shallowRef` 试试看。
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] kalubin00 commented on issue #14974: vue3使用echarts5，折线图、柱状图使用datazoom报错
Posted by GitBox <gi...@apache.org>.
kalubin00 commented on issue #14974:
URL: https://github.com/apache/echarts/issues/14974#issuecomment-842920587
@plainheart 好的，多谢～
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org