在Vue3中实现ECharts

I will.874

于 2023-08-30 21:04:19 发布

阅读量224

点赞数

文章标签： vue.js 前端 javascript echarts

本文链接：https://blog.youkuaiyun.com/qq_60754128/article/details/132590381

版权

博客介绍了在项目中安装与使用ECharts的方法。先在项目中安装ECharts，接着在main.js里进行相关注册，最后在组件中使用，需在组件设置有固定大小的div作为展示区域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、首先在项目中安装ECharts

npm install echarts

2、在main.js中进行相关的注册

import { createApp } from 'vue';
import App from './App.vue';

// echarts
import * as echarts from 'echarts'
app.config.globalProperties.$echarts = echarts

3、在组件中使用
首先在组件中设置一个div有固定大小，展示区域即为这个区域

<template>
	<div id="ect" style="width: 100%;height: 300px;"></div>
</template>
<script setup>
import * as echarts from 'echarts'

const option = {
        title: {
            text: '测试'
        },
        tooltip: {},//提示框
        legend: {
            data: ['人数']
        },
        xAxis: {
            data: ['vue', 'react', 'angular', 'jquery']
        },
        yAxis: {},
        series: [
            {
                name: '人数',
                type: 'bar',
                data: [200, 400, 150, 3000],
            }
        ]
    }

onMounted(() => {
    // charts
    var myChart = echarts.init(document.querySelector('#ect'));
    myChart.setOption(option)
})
</script>