vue3+ts下的echarts基本写法

最新推荐文章于 2025-06-10 19:10:04 发布

原创最新推荐文章于 2025-06-10 19:10:04 发布 · 243 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

本文介绍了如何在Vue项目中使用ECharts库创建图表，包括设置数据、初始化图表实例、以及在DOM上挂载和配置图表选项的过程。

官方文档：

快速上手 - 使用手册 - Apache ECharts

<template>
    <div class='con'>
        <header>

        </header>
        <section>
            <!--1-->
            <div class="echart-box" id="main" ref="box"></div>
        </section>
    </div>
</template>

<script lang='ts' setup>
/** 接口 */
import { reactive, toRefs, ref, computed, onMounted } from 'vue';
import useCurrentInstance from '@/api/useCurrentInstance';
import * as echarts from 'echarts';
const { proxy } = useCurrentInstance()
/** prop */
/** 计算属性*/
//const xx = computed(() => [])
/** data */
const state = reactive({
    tableData: []
})
const { tableData} = toRefs(state);
//2
const box=ref();
/** 监听 */
/** 生命周期 */
onMounted(() => {
    //3
    showEcarts();
})

//4
const showEcarts=()=> {
    // 基于准备好的dom，初始化echarts实例 两种写法
    var userdom = box.value;
    var myChart = echarts.init(userdom);
    //var myChart = echarts.init(document.getElementById('main'));
    var option = {
        title: {
          text: "ECharts",
        },
        xAxis: {
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {},
        legend: {
          data: ["牛波","撒波"],
        },
        series: [
            {
            name: "牛波",
            type: 'bar',
            data: [23, 24, 18, 25, 27, 28, 25],
            },
            {
            name: "撒波",
            type: 'bar',
            data: [20, 24, 18, 25, 27, 28, 25],
            }
        ]
        };
    myChart.setOption(option);
}
/** 接口 */
</script>
<style>
/**5 */
.echart-box{ 
    width: 500px;
    height: 350px;
    border: 3px solid pink;
    margin: 20px auto;
}
</style>