blackteay/ray-template
1
0
Fork 0
mirror of https://github.com/XiaoDaiGua-Ray/ray-template.git synced 2025-04-06 03:57:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

可视化组件相关问题修复

Browse Source
This commit is contained in:
chuan_wuhao 2022-12-01 17:06:53 +08:00
parent c1aeb6ec6f
commit 57f051f7c4
3 changed files with 22 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/production-dist/index.html vendored
View File

@ -5,7 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/ray.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ray template</title>
<script type="module" crossorigin src="/assets/index.f7ae9ef9.js"></script>
<script type="module" crossorigin src="/assets/index.9839d7cd.js"></script>
<link rel="stylesheet" href="/assets/index.4a9527dd.css">
</head>
<body>

29
src/components/RayChart/index.tsx
View File

@ -140,7 +140,8 @@ const RayChart = defineComponent({
const settingStore = useSetting()
const { themeValue } = storeToRefs(settingStore)
const rayChartRef = ref<HTMLElement>() // `echart` 容器实例
const echartInstance = ref<EChartsInstance>() // `echart` 实例
const echartInstanceRef = ref<EChartsInstance>() // `echart` 拷贝实例, 解决直接使用响应式实例带来的问题
let echartInstance: EChartsInstance // `echart` 实例
const cssVarsRef = computed(() => {
const cssVars = {
@ -215,9 +216,10 @@ const RayChart = defineComponent({
const element = rayChartRef.value as HTMLElement
const options = useMergeOptions()
echartInstance.value = echarts.init(element, theme)
echartInstance = echarts.init(element, theme)
echartInstanceRef.value = echartInstance
options && echartInstance.value.setOption(options)
options && echartInstance.setOption(options)
}
const renderThemeChart = (bool?: boolean) => {
@ -237,15 +239,15 @@ const RayChart = defineComponent({
* 销毁 `chart` 实例, 释放资源
*/
const destroyChart = () => {
if (echartInstance.value) {
echartInstance.value.clear()
echartInstance.value.dispose()
if (echartInstance) {
echartInstance.clear()
echartInstance.dispose()
}
}
watch(
() => [themeValue.value, props.showAria],
([theme]) => {
() => themeValue.value,
(theme) => {
if (props.autoChangeTheme) {
destroyChart()
@ -254,6 +256,15 @@ const RayChart = defineComponent({
},
)
watch(
() => props.showAria,
() => {
destroyChart()
renderThemeChart()
},
)
onBeforeMount(async () => {
await registerChartCore()
})
@ -275,7 +286,7 @@ const RayChart = defineComponent({
return {
rayChartRef,
cssVarsRef,
echartInstance,
echartInstance: echartInstanceRef,
}
},
render() {

2
src/views/echart/index.tsx
View File

@ -11,7 +11,7 @@ const Echart = defineComponent({
const baseOptions = {
legend: {
data: ['日期'],
// data: ['日期'],
},
tooltip: {},
xAxis: {