- 单个图表
-
//获取dom节点
-
var myChart = echarts. init( document. getElementById( 'main'));
-
//渲染dom
-
myChart. setOption({...})
-
// 响应式
-
window. onresize = function( ) {
-
myChart. resize();
-
}
注意：这种方法只能对一个图表有用，如果一个页面当中同时存在多个图表的话，只会对最后一个图表生效。而我们在vue中使用的时候往往会有多个图表，虽然我们把不同的图表分为多个组件，但是还是只能对一个图表生效。所以最有效的方法就是挂载在全局。
-
-
多个图表（通用方法）
在全局挂载：
-
import { createApp }
from
'vue'
-
import
App
from
'./App.vue'
-
import router
from
'./router/index'
-
//引入element-ui
-
import
ElementPlus
from
'element-plus'
-
import
'element-plus/dist/index.css'
-
-
const app =
createApp(
App)
-
app.
use(
ElementPlus)
-
app.
use(router)
-
app.
mount(
'#app')
-
-
//方法--全局挂载
-
app.
config.
globalProperties.
$echartsResize =
function(
ref:any){
-
window.
addEventListener(
'resize',
function (
) {
-
ref.
resize()
-
})
-
}
-
//属性--全局挂载
-
app.
config.
globalProperties.
$axios =
Axios;
-
app.
config.
globalProperties.
$Test =
"我在全局";
在组件中使用：
在组件实例中需要从vue中引入getCurrentInstance ，再通过 getCurrentInstance 获取proxy，进而可以获取全局挂载的实例进行使用。
-
<script setup>
-
import { onMounted }
from
'vue';
-
import *
as echarts
from
'echarts';
-
-
//引入getCurrentInstance
-
import { getCurrentInstance }
from
'vue'
-
const { proxy } =
getCurrentInstance();
-
-
const
echartInit = (
data) => {
-
// 基于准备好的dom，初始化echarts实例
-
var myChart = echarts.
init(
document.
getElementById(
'main'));
-
// 绘制图表
-
myChart.
setOption({...});
-
// 响应式--使用
-
proxy.$echartsResize(myChart)
-
}
-
-
onMounted(
async () => {
-
echartInit()
-
})
-
</script>
- 单个图表
-
//获取dom节点
-
var myChart = echarts. init( document. getElementById( 'main'));
-
//渲染dom
-
myChart. setOption({...})
-
// 响应式
-
window. onresize = function( ) {
-
myChart. resize();
-
}
注意：这种方法只能对一个图表有用，如果一个页面当中同时存在多个图表的话，只会对最后一个图表生效。而我们在vue中使用的时候往往会有多个图表，虽然我们把不同的图表分为多个组件，但是还是只能对一个图表生效。所以最有效的方法就是挂载在全局。
-
-
多个图表（通用方法）
在全局挂载：
-
import { createApp }
from
'vue'
-
import
App
from
'./App.vue'
-
import router
from
'./router/index'
-
//引入element-ui
-
import
ElementPlus
from
'element-plus'
-
import
'element-plus/dist/index.css'
-
-
const app =
createApp(
App)
-
app.
use(
ElementPlus)
-
app.
use(router)
-
app.
mount(
'#app')
-
-
//方法--全局挂载
-
app.
config.
globalProperties.
$echartsResize =
function(
ref:any){
-
window.
addEventListener(
'resize',
function (
) {
-
ref.
resize()
-
})
-
}
-
//属性--全局挂载
-
app.
config.
globalProperties.
$axios =
Axios;
-
app.
config.
globalProperties.
$Test =
"我在全局";
在组件中使用：
在组件实例中需要从vue中引入getCurrentInstance ，再通过 getCurrentInstance 获取proxy，进而可以获取全局挂载的实例进行使用。
-
<script setup>
-
import { onMounted }
from
'vue';
-
import *
as echarts
from
'echarts';
-
-
//引入getCurrentInstance
-
import { getCurrentInstance }
from
'vue'
-
const { proxy } =
getCurrentInstance();
-
-
const
echartInit = (
data) => {
-
// 基于准备好的dom，初始化echarts实例
-
var myChart = echarts.
init(
document.
getElementById(
'main'));
-
// 绘制图表
-
myChart.
setOption({...});
-
// 响应式--使用
-
proxy.$echartsResize(myChart)
-
}
-
-
onMounted(
async () => {
-
echartInit()
-
})
-
</script>