Vue框架学习3：echarts导入

FORGIVEN_H

已于 2022-11-27 16:17:49 修改

阅读量2k

点赞数 9

分类专栏： PYTHON入门文章标签： echarts vue.js 学习

于 2022-11-26 22:11:07 首次发布

本文链接：https://blog.csdn.net/L_Jane_H/article/details/128057660

版权

PYTHON入门专栏收录该内容

20 篇文章 1 订阅

订阅专栏

本文详细介绍了如何在Vue项目中引入和使用Echarts进行数据可视化。首先，通过npm安装Echarts，并解决权限问题。然后，在main.js中全局挂载Echarts。接着，具体说明在Vue组件内如何设置图表容器，声明并初始化图表的方法。最后，展示了如何配置和使用Echarts的option来展示数据。按照这些步骤，开发者可以顺利在Vue应用中集成Echarts图表。

摘要由CSDN通过智能技术生成

完成基本的Vue框架搭建后，网站数据可视化也是学习的重要一环，本文主要是阐述如何在Vue中导入echarts。正确的学习打开方式应该是参照官网进行学习，但是官网的导入是针对html页面，对于如何导入vue还需要做一些小幅度修改。

echarts官网链接：获取 ECharts - 入门篇 - Handbook - Apache ECharts

第一步，获取Echarts。在项目终端运行以下命令：

npm install echarts --save

tips: 在我的项目运行环境中并没有权限安装库，解决这个问题需要以管理员权限运行cmd，进入项目目录，再运行上述命令。

第二步，导入Echarts。

官网中的导入方式主要是针对html文档页面，针对vue文件，主要包括以下几步：

1. 首先在main.js中输入以下代码：

import * as echarts from 'echarts'  //导入echarts
Vue.prototype.$echarts = echarts    //挂载echarts

2. 进入需要导入图表的页面文件.vue中

2.1 设置挂载对象（<template>中）

<div id="chart"></div>

2.2 声明函数（export default中，与data() ，method()同级）

mounted() {
    this.initChart()
  },

2.3 初始化挂载对象（在method（）中进行函数定义）

initChart() {
      var Chart = this.$echarts.init(document.getElementById('chart'))
      var option = {
        title: { text: 'ECharts 入门示例', subtext: '', x: 'center' },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      } // 根据需要填充
      Chart.setOption(option)
    },

按上述设置完成后，根据需要在echarts官网复制对应option即可。