在vue中使用Echarts图表工具

曾经终败给现在 2023-06-25 10:18 69阅读 0赞

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

npm install echarts --save

二、第二步，引入`Echarts`，代码如下所示：

var echarts = require('echarts');

三、第三步，对于`Echarts`进行初始化，`main` 是之前定义好的`DOM`元素，代码如下所示：

var myChart = echarts.init(document.getElementById('main'));

四、第四步，定义数据并且进行绘制图表，代码如下所示：

myChart.setOption({ 
        title: { 
            text: 'ECharts 入门示例'
        },
        tooltip: { },
        xAxis: { 
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: { },
        series: [{ 
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    });

五、第五步，解决浏览器窗口缩小导致超出边界，可以添加这一行代码，代码如下所示：

window.addEventListener('resize',function() { myChart.resize()});

六、第六步，最后的Echarts图表显示，如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191228110158384.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

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

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

相关阅读

相关 vue3 中使用 echarts 图表——准备篇

我们常常在项目中使用图表来表示数据，而目前最常用的图标就是echarts，接下来我们就开始学习在vue中使用echarts图标。

骑猪看日落/ 2024年04月22日 15:19/ 0 赞/ 86 阅读

相关在vue中通过Echarts封装图表组件

一、需求问题在开发vue的项目中，我们可能会遇到这样的需求。我们需要去封装一个图表组件，然后这个图表组件在多个不同的页面中都是可以使用的。下面也就是我所封装的图表组件Cha

痛定思痛。/ 2023年06月25日 10:24/ 0 赞/ 39 阅读

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

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

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

相关如何在vue中使用echart图表

人狠话不多，先上效果图！ ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

川长思鸟来/ 2023年03月13日 05:14/ 0 赞/ 28 阅读

相关在Vue中使用echarts

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

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

相关在Vue中使用Echarts

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

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

相关 VUE + ECharts实现图表

因为这里演示了多种图表，使用的 echarts 引入方式是引入的所有组件，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。 1.安装echar

亦凉/ 2022年11月07日 14:34/ 0 赞/ 277 阅读

相关 Vue中使用echarts图表

一、安装引入echarts插件安装 npm install echarts -S 在main.js中配置引入 // 引入echarts i

水深无声/ 2022年05月19日 04:08/ 0 赞/ 313 阅读

相关在vue中使用echarts

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

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

相关在Vue中使用echarts

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

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