vue当中使用echarts的简单可视化

最新推荐文章于 2025-03-19 14:28:07 发布

sweet_doris

最新推荐文章于 2025-03-19 14:28:07 发布

阅读量464

点赞数 1

分类专栏： vue 文章标签：可视化 vue

本文链接：https://blog.youkuaiyun.com/sweet_cookie/article/details/118725583

版权

本文介绍了在Vue项目中如何使用ECharts进行数据可视化，包括全局与局部引入ECharts，解决DOM未加载时初始化的问题，定时刷新数据，处理X轴标签显示不全的策略，以及针对不同webpack版本的注意事项。

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

vue当中使用echarts的简单可视化

echarts做可视化数据视图很优美直观，echarts的官网有示例的代码

一、全局引入echarts

npm install echarts --save

二、单页面当中使用局部echarts

//editTaskItem.vue

<template>
<!-- echart需要操作dom来实现-->
    <div>
        <div rel="myEcharts" style=""></div>
    </div>
</template>
<script>
    const echarts = require('echarts')
    export defualt{
        data(){
            
        },
        mounted(){
            this.setMyEcharts()
        },
        methods:{
           setMyEcharts(){
               let mychart = echarts.init(this.$rels.myEcharts)
               let option = {
                   //x轴
                   xAxis:{
                       type:'category',
                       //x轴上的值
                       data:[]
                   },
                   //y
                   yAxis:{
                     type:'value',
                     //可以不设置y的值，若不设置y轴上的值，会使用echarts默认的         
                     data:[]
                     
                   },
                   series:[{
                       //x轴上每个对应的值
                       data:[],
                       type:'bar',
                       showBackground:true,
                       backgroundStyle:{
                           color:'xxx'
                       }

最低0.47元/天解锁文章