如何在Vue中使用echarts可视绘图工具

客官°小女子只卖身不卖艺 2021-07-24 23:12 735阅读 0赞

**由于在项目中需要对数据进行可视化处理，也就是用图表展示。  
而刚刚好echarts可以给我们提供帮助**  
**废话不多说 我们从最基本开始**

**引入脚手架**

> npm install echarts -S  
> 如果这个没有安装成功可以换成  
> cnpm install echarts -S

**首先需要全局引入  
在main.js中**

> // 引入echarts  
> import echarts from ‘echarts’  
> Vue.prototype.$echarts =echarts

然后在创建一个vue文件开始写一下样式

<template>
        <div id="Mimelist"></div>
    </template>

然后去echarts官网找我们需要的图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center]

> 官方网站 https://echarts.apache.org/zh/index.html

在Script标签中

<script>
    export default { 
      data() { 
        return { 
        //把option转换
        //就是把= 换成 :
          option: { 
            title: { 
              text: "堆叠区域图",
            },
            tooltip: { 
              trigger: "axis",
              axisPointer: { 
                type: "cross",
                label: { 
                  backgroundColor: "#6a7985",
                },
              },
            },
            legend: { 
              data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
            },
            toolbox: { 
              feature: { 
                saveAsImage: { },
              },
            },
            grid: { 
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: [
              { 
                type: "category",
                boundaryGap: false,
                data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
              },
            ],
            yAxis: [
              { 
                type: "value",
              },
            ],
            series: [
              { 
                name: "邮件营销",
                type: "line",
                stack: "总量",
                areaStyle: { },
                data: [120, 132, 101, 134, 90, 230, 210],
              },
              { 
                name: "联盟广告",
                type: "line",
                stack: "总量",
                areaStyle: { },
                data: [220, 182, 191, 234, 290, 330, 310],
              },
              { 
                name: "视频广告",
                type: "line",
                stack: "总量",
                areaStyle: { },
                data: [150, 232, 201, 154, 190, 330, 410],
              },
              { 
                name: "直接访问",
                type: "line",
                stack: "总量",
                areaStyle: { },
                data: [320, 332, 301, 334, 390, 330, 320],
              },
              { 
                name: "搜索引擎",
                type: "line",
                stack: "总量",
                label: { 
                  normal: { 
                    show: true,
                    position: "top",
                  },
                },
                areaStyle: { },
                data: [820, 932, 901, 934, 1290, 1330, 1320],
              },
            ],
          },
        };
      },
      mounted() { 
             //创建echarts对象
        let myChart = this.$echarts.init(document.getElementById("Mimelist"));
         //设置echarts对象的option属性
         myChart.setOption(this.option);
      },
    };
    </script>
    <style scoped>
    #Mimelist { 
      width: 50%;
      height: 70%;
      border: 1px solid red;
    }
    .box { 
      width: 100%;
      height: 50vh;
    }
    </style>

然后就是效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center 1]

> 注意：我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/ac8754b6d2e8431ebd8e8ff21241cffc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210724/04dba4086b394c919e94b3baf8f61c9b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，735人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 项目中使用Apache ECharts 生成可视化图表库

步骤：第一步：通过： NPM 安装 ECharts； npm install echarts --save 第二步：在 vu

蔚落/ 2023年10月04日 20:47/ 0 赞/ 43 阅读

相关在vue中使用Echarts图表工具

一、第一步，下载`Echarts`，通过`npm install echarts --save` 或者是 `cnpm install echarts --save` 命令进行下

曾经终败给现在/ 2023年06月25日 10:18/ 0 赞/ 52 阅读

相关在Vue中使用echarts

安装echarts依赖 npm install echarts -S 或者使用淘宝的镜像 npm install -g cnpm --regist

绝地灬酷狼/ 2022年12月27日 08:49/ 0 赞/ 241 阅读

相关在Vue中使用Echarts

前端可视化是一个前端最基本的技能，要想做的好看，还是得借助一下百度家的echarts，那要怎么在Vue中使用echarts？这个官网没有给出实例，实例基本都是在jquery里面

素颜马尾好姑娘i/ 2022年12月20日 01:28/ 0 赞/ 247 阅读

相关如何在vue中使用echart，以及使用的事项

019年10月23日进行更新，这里不再建议使用document.getElementById的方式获取元素的id,而是建议使用ref来代替。这样的话就会避免Echarts的图

￡神魔★判官ぃ/ 2022年10月30日 05:23/ 0 赞/ 161 阅读

相关 Vue echart大屏幕数据可视化

[Make A Pie][] [Make A Pie]: https://www.makeapie.com/explore.htmlsort=rank~timeframe

超、凢脫俗/ 2022年09月15日 05:36/ 0 赞/ 257 阅读

相关 echarts系列——在vue工程化项目中如何使用echarts

安装echarts依赖 npm install echarts --save 点击查看 [echarts官网安装教程][echarts] 创建图表

灰太狼/ 2022年04月08日 08:45/ 0 赞/ 323 阅读

相关在vue中使用echarts

1. 直接引入echarts npm install echarts –save 1. 全局引入在 main.js 中全局引入 echarts

刺骨的言语ヽ痛彻心扉/ 2021年07月25日 16:13/ 0 赞/ 507 阅读

相关在Vue中使用echarts

一，安装echarts cnpm i echarts@4.9.0 -S ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow

- 日理万妓/ 2021年07月25日 12:46/ 0 赞/ 654 阅读

相关如何在Vue中使用echarts可视绘图工具

由于在项目中需要对数据进行可视化处理，也就是用图表展示。而刚刚好echarts可以给我们提供帮助废话不多说我们从最基本开始引入脚手架 > npm insta

客官°小女子只卖身不卖艺/ 2021年07月24日 23:12/ 0 赞/ 736 阅读