在vue中使用Echarts的自适应问题

最新推荐文章于 2024-10-12 14:32:34 发布

siyi_blog

最新推荐文章于 2024-10-12 14:32:34 发布

阅读量1.2k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/siyi_blog/article/details/89146384

本文详细介绍了在Vue项目中如何添加并使用ECharts图表，包括通过npm安装依赖，组件内引入ECharts，模板创建DOM，以及编写JavaScript实现图表。在实际操作中遇到'getAttribute' of undefined的错误，文章提供了相应的解决方案。

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

1.在vue中添加Echarts图表使用详解

使用npm添加package.json文件中的配置并下载相关npm包依赖

npm install echarts --save

然后在需要创建图表的组件中引入

  // 引入echarts  
import echarts from "echarts"

在模板中创建所需的dom

<div class="echarts-wrap">    
      <div class="item1-l" ref="myChart"></div>
      <div class="item1-r" ref="myPie"></div>
</div>

写入js

 <script>
   export default {
     name: "Index",
     data() {
       return {
         myChart: null,   //关键一
         myPie: null,
       }
     },
     mounted() {
       this.drawLine();
       this.drawPie();
       this.init(); //让echarts窗口自适应   //关键二
     },
     methods: {
       drawLine() {
         // 基于准备好的dom，初始化echarts实例
         this.myChart = echarts.init(this.$refs.myChart);
         this.myChart.setOption({
           title: {
             text: "折线图"
           },
           tooltip: {
             trigger: "axis"
           },
           legend: {
             y: "bottom",
             data: ["2的指数", "3的指数"]
           },
           grid: {
             left: "3%",
             right: "5%",
             bottom: "10%",
             containLabel: true
           },
           xAxis: {
             type: "category",
             boundaryGap: false,
             data: ['一', '二', '三', '四', '五']
           },
           yAxis: {
             type: "value"
           },
           series: [{
               name: "2的指数",
               type: "line",
               data: ['10', '20', '30', '40', '50']
             },
             {
               name: "3的指数",
               type: "line",
               data: ['20', '30', '40', '50', '60']
             }
           ]
         });
       },
       drawPie() {
         this.myPie = echarts.init(this.$refs.myPie);
         this.myPie.setOption({
           title: {
             text: '某站点用户访问来源',
             subtext: '纯属虚构',
             x: 'center'
           },
           tooltip: {
             trigger: 'item',
             formatter: "{a} <br/>{b} : {c} ({d}%)"
           },
           legend: {
             orient: 'vertical',
             left: 'left',
             data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
           },
           series: [{
             name: '访问来源',
             type: 'pie',
             radius: '55%',
             center: ['50%', '60%'],
             data: [{
                 value: 335,
                 name: '直接访问'
               },
               {
                 value: 310,
                 name: '邮件营销'
               },
               {
                 value: 234,
                 name: '联盟广告'
               },
               {
                 value: 135,
                 name: '视频广告'
               },
               {
                 value: 1548,
                 name: '搜索引擎'
               }
             ],
             itemStyle: {
               emphasis: {
                 shadowBlur: 10,
                 shadowOffsetX: 0,
                 shadowColor: 'rgba(0, 0, 0, 0.5)'
               }
             }
           }]
         });
       },
       init() {  //关键三
         setTimeout(() => {
           window.addEventListener('resize', () => {
             this.myChart.resize();
             this.myPie.resize();
           })
         }, 20)
       },
       destroyed() {   //关键四
         window.removeEventListener('resize', this.init, 20)
       }
     }
   }

 </script>

参考博文：

vue中echarts3.0自适应

echarts各个配置项详细说明总结

在vue中添加echarts图表使用详解

项目中报错Cannot read property 'getAttribute' of undefined解决