在Vue3中如何使用echarts图表

最新推荐文章于 2024-05-06 18:59:36 发布

开心点啦.

最新推荐文章于 2024-05-06 18:59:36 发布

阅读量402

点赞数 9

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/zxcvb0825/article/details/134698914

版权

下载：

npm i echarts

参考echarts图表链接

https://echarts.apache.org/examples/zh/index.html

主要内容

<template>
    <div>
        <div id="tu1" style="width: 100%;height: 500px;"></div>
    </div>
</template>

<script setup>
import { onMounted } from "vue";
import * as echarts from 'echarts'

const main1 = function () {
    var myChart = echarts.init(document.getElementById('tu1'))

    var option = {
        .......
    };
    

    myChart.setOption(option)
}

onMounted(() => {
    main1()
})


</script>

<style lang="scss" scoped></style>