【Vue】Vue 中引入 ECharts

谁践踏了优雅 2023-07-11 08:41 29阅读 0赞

**目录**

1、安装

2、在 main.js 中引入

3、在需要调用的页面中的 js 使用

4、最重要的一点！

--------------------

**介绍**

Echarts 是百度开发优秀的图表控件，种类全，易上手，本文将介绍如何在 Vue 中引入该组件

示例默认引入整个 echarts 模块，包会相对较大。对性能要求较高的，可以进行按需引入，参考[官方文档][Link 1]

### 1、安装 ###

npm install echarts -S

### 2、在 main.js 中引入 ###

import echarts from 'echarts'
    Vue.prototype.$echarts = echarts

### 3、在需要调用的页面中的 js 使用 ###

setEcharts:function(){
        var echarts = require('echarts');
    
        // 基于准备好的dom，初始化echarts实例
        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]
        }]
    });
    }

### 4、最重要的一点！ ###

生成图表的函数（以上述代码为例即：setEcharts() ）需要在 mounted 生命周期中去调用进行实例化，因为这时 dom 元素才挂载到页面中，图表才能显示出来！

[Link 1]: https://www.echartsjs.com/zh/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue中引入-ECharts折线图

适用于vue2.0 也可以直接查看安装文档 [GitHub][] 1、安装全局组件(划重点) npm install echarts vue-echarts

古城微笑少年丶/ 2023年10月03日 19:58/ 0 赞/ 3 阅读

相关【Vue】Vue 中引入 ECharts

目录 1、安装 2、在 main.js 中引入 3、在需要调用的页面中的 js 使用 4、最重要的一点！ -------------------- 介绍 Echa

谁践踏了优雅/ 2023年07月11日 08:41/ 0 赞/ 30 阅读

相关 uni-app 引入 echarts

<template> <view class="container"> <view>

ゝ一纸荒年。/ 2023年02月14日 06:55/ 0 赞/ 25 阅读

相关 Vue中引入echarts

第一步：通过npm安装echarts依赖包 npm install echarts --save 第二步：在js中引用 import as ec

清疚/ 2022年10月19日 04:07/ 0 赞/ 275 阅读

相关 vue项目中引入echarts

关于如何搭建vue项目，引入vue-router和vuex。请移步 [vue项目中引入vue-router][vue_vue-router] [vue项目中引入vu

àì夳堔傛蜴生んèń/ 2022年09月10日 02:14/ 0 赞/ 380 阅读

相关 vue-cli 引入echarts

1. [echarts官网传送门][echarts] 2. vue-cli如何引入详情点击查看：[在 webpack 中使用 ECharts][webpack _ ECh

电玩女神/ 2022年05月16日 11:44/ 0 赞/ 282 阅读

相关 Ant Design 中引入echarts

首先在Ant Design项目上安装 echarts 相关的包： npm install echarts --save npm install echarts

超、凢脫俗/ 2022年05月10日 18:28/ 0 赞/ 693 阅读

相关 vue中引入echarts

一、全局引入 1.通过以下命令安装Echarts ![在这里插入图片描述][20190429213452843.png] 2.main.js中引入echarts 和

骑猪看日落/ 2022年04月24日 22:10/ 0 赞/ 425 阅读

相关 Ant Design引入Echarts

目录 1.首先在Ant Design项目上安装echarts相关的包 2.在项目里就可以引入相关的包了 3.示例代码 4. 运行结果 ----------------

绝地灬酷狼/ 2022年03月02日 10:50/ 0 赞/ 769 阅读

相关 vue引入echarts

效果图: ![1263537-20190703092539204-1883224357.jpg][] 1.安装Echarts : npm ins

喜欢ヅ旅行/ 2021年11月11日 01:40/ 0 赞/ 479 阅读