vue3使用echarts5

最新推荐文章于 2024-08-08 00:23:29 发布

samscat

最新推荐文章于 2024-08-08 00:23:29 发布

阅读量1k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/samscat/article/details/123003484

版权

echarts javascript vue.js

vue 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<template>
    <div id="echarts168" :style="{width: nwidth+'%', height: nheight+'px'}"></div>
</template>
<script lang="ts">
import * as echarts from 'echarts'
import {onMounted, defineComponent, nextTick } from 'vue'
const props = {
    ewidth: {
        type: Number ,
        default: 100
    },
    eheight: {
        type: Number,
        default: 440
    }
}
    export default defineComponent({
        props,
        
        setup (props:any, context) {
            console.log(context)
            let {ewidth: nwidth, eheight: nheight} = props
            const initCharts = () => {
                console.log('init charts')
                const option = {
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: 'line'
                        }
                    ]
                };

                const myChart = echarts.init(document.getElementById('echarts168') as HTMLDivElement);
                myChart.setOption(option)
            
                window.onresize = () => {
                    myChart.resize()
                };

            }
            onMounted(() => {
                initCharts()
            })
            
            // 向外暴露初始化方法
            context.expose({
                initCharts
            })

            return {
                nwidth,
                nheight
            }
        }

    })  
</script>