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 2022/11/29 02:30:02 UTC
[GitHub] [echarts] yujiahan2018 opened a new issue, #17985: [Feature] 能否在文档中增加与vue2，vue3或react整合的相关内容？
yujiahan2018 opened a new issue, #17985:
URL: https://github.com/apache/echarts/issues/17985
### What problem does this feature solve?
现有文档都是纯html+css+js形式，没有与其他第三方js框架整合的相关实例代码，希望文档可以完善
### What does the proposed API look like?
```vue
<template>
<div id="app">
<!-- 相关代码 -->
</div>
</template>
<script>
//相关代码
</script>
<style>
</style>
```
--
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.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 closed issue #17985: [Feature] 能否在文档中增加与vue2，vue3或react整合的相关内容？
Posted by GitBox <gi...@apache.org>.
plainheart closed issue #17985: [Feature] 能否在文档中增加与vue2，vue3或react整合的相关内容？
URL: https://github.com/apache/echarts/issues/17985
--
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 #17985: [Feature] 能否在文档中增加与vue2，vue3或react整合的相关内容？
Posted by GitBox <gi...@apache.org>.
plainheart commented on issue #17985:
URL: https://github.com/apache/echarts/issues/17985#issuecomment-1330654391
与第三方框架整合感觉不是 ECharts 所必要做的事。如果实在不知道如何在 Vue 中使用 ECharts，参考下述简单的使用方式，你可以在此基础上进行优化封装，使之成为一个可复用的公用组件：
以 Vue 3 composition API 为例：
```vue
<template>
<div class="chart-container" ref="chartContainer"></div>
</template>
<script setup>
import { ref, shallowRef, watch, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
import * as echarts from 'echarts'
const chartContainer = shallowRef()
const option = ref({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
})
let chart
// 待组件挂载完成后初始化 ECharts
onMounted(() => {
chart = echarts.init(chartContainer.value)
chart.setOption(option.value)
// 监听 window resize 事件 调整 ECharts 容器大小
// 当然这里示例把容器大小固定为 600 * 400 此事件监听可省略
// 如希望 ECharts 容器随父容器大小变化，可使用 ResizeObserver
window.addEventListener('resize', chart.resize)
})
// 监听 option 变化 自动更新 ECharts （可选）
watch(option, newOption => {
console.log('eatch')
chart && chart.setOption(newOption)
}, { deep: true })
// 销毁 ECharts
onBeforeUnmount(() => {
if (chart) {
window.removeEventListener('resize', chart.resize)
chart.dispose()
}
chart = option.value = null
})
</script>
<style scoped>
.chart-container {
width: 600px;
height: 400px;
}
</style>
```
若希望按需引入可参考[这篇文章](https://echarts.apache.org/handbook/zh/basics/import#%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5-echarts-%E5%9B%BE%E8%A1%A8%E5%92%8C%E7%BB%84%E4%BB%B6)。
--
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] zhangxinyong12 commented on issue #17985: [Feature] 能否在文档中增加与vue2，vue3或react整合的相关内容？
Posted by GitBox <gi...@apache.org>.
zhangxinyong12 commented on issue #17985:
URL: https://github.com/apache/echarts/issues/17985#issuecomment-1330174329
我觉得不用完善。本身就是纯js和框架没有关系。
--
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] yujiahan2018 commented on issue #17985: [Feature] 能否在文档中增加与vue2，vue3或react整合的相关内容？
Posted by GitBox <gi...@apache.org>.
yujiahan2018 commented on issue #17985:
URL: https://github.com/apache/echarts/issues/17985#issuecomment-1330194375
但是现在不会用啊
| |
***@***.***
|
|
***@***.***
|
---- 回复的原邮件 ----
| 发件人 | ***@***.***> |
| 日期 | 2022年11月29日 15:04 |
| 收件人 | ***@***.***> |
| 抄送至 | ***@***.***>***@***.***> |
| 主题 | Re: [apache/echarts] [Feature] 能否在文档中增加与vue2，vue3或react整合的相关内容？ (Issue #17985) |
我觉得不用完善。本身就是纯js和框架没有关系。
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you authored the thread.Message ID: ***@***.***>
--
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