【ECharts+Vue】学习笔记（快速入门版）-Toy模板网

这篇具有很好参考价值的文章主要介绍了【ECharts+Vue】学习笔记（快速入门版）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、ECharts

1.1 什么是Echarts

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。提供了丰富的可视化图标，帮助你轻松实现大屏展示。

官网地址：Apache ECharts

1.2 ECharts的安装

直接下载

下载官网：https://echarts.apache.org/zh/download.html

如果不挑版本的话，菜鸟教程提供了4.7.0版本地址ECharts 安装 | 菜鸟教程 (runoob.com)

如果是开发学习的话，直接下载echarts.js，建议将代码放在js文件夹下，再在在html页面中<head>中或其他地方插入<script>标签，引入下载的js文件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 使用下载好的包引入echarts.js-->
    <script src="js/echarts.js"></script>
</head>

使用CDN

Staticfile CDN（国内） : https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js

在html页面中<head>中或其他地方插入<script>标签，引入即可

<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 使用CDN引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

NPM方法

该方法需要先完成node.js 和NPM的配置，这一部分见2.2 VUE的安装和配置，这里只列举一下命令，具体使用方法在和VUE一起使用的时候会再详细介绍。

npm install echarts --save

1.3 demo1(直接使用ECharts 实现基本图表)

接着，我们来尝试一下ECharts的基本作图方法。

Step1. <header>中引入js，

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 使用CDN引入 echarts.js -->
    <!--<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> -->
   
    <script src="js/echarts.js"></script>
</head>

Step2: <body> 中准备一个容器div，用来放置图表：

echarts是自适应的，会根据设置的容器的大小来进行绘图，所以不用担心不兼容的问题

<body>
    <!--准备一个容器div，放置图表-->
    <!--echarts 是自适应的， 会根据容器的大小来进行绘图，-->
    <div id="demo1" style="width: 600px;height: 400px" ></div>
</body>

Step3.1: 使用JavaScript代码正式绘制图表，先初始化一个绘制图表的echarts实例，指向该图表想要显示的位置（在哪儿绘制？）

    //初始化绘制图标的echarts实例，想要在那儿显示，参数就传哪个容器
    var myChart = echarts.init(document.querySelector('#demo1'))

Step3.2: 指定想要绘制的图表的配置项和数据，（绘制什么东西？）

    //指定图表的配置，（绘制什么东西？）
    var option = {
        //设置图表的标题
        title:{
            text:"echarts demo1"
        },
        // 图表的提醒框组件
        tooltip:{
            //触发方式  axis最标轴触发
            trigger:'axis'
        },
        // 图例
        legend:{
            data:['人数', '活跃人数']
        },
        // x轴的标记
        xAxis:{
            data:['vue','react','angular','jquery']
        },
        // Y轴
        yAxis:{}, //y为空对象，就代表显示数字，没有其他的
        // 具体的数据
        series:[
            {
                name:"人数", //与lengend 标记是对应的的
                type:"bar", //类型是 条形图
                data:[2000,1500,500,2200]//具体的数据

            },
            // 如果又很多种不同name的数据，可以用大括号进行包裹，逗号分割 ,{},{}
            {
                name:"活跃人数", //与lengend 标记是对应的的
                type:"bar", //类型是 条形图
                data:[1900,1200,400,1000]//具体的数据

            }
        ],
        // 设置颜色, 也可以不设置，我觉得默认的还挺好看的
        // color:['blue','red']
    }

Step3.3: 实例对象的设置配置，将option传给 step3.1中初始化的myCharts (让数据显示出来)

    // 实例对象的设置配置
    myChart.setOption(option)

整个代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 1. 引入js-->
    <script src="js/echarts.js"></script>
</head>
<body>
<!-- 2. 准备一个容器div，放置图表-->
<!--echarts 是自适应的， 会根据容器的大小来进行绘图，-->
<div id="demo1" style="width: 600px;height: 400px" ></div>

<!-- 3.使用JavaScript绘制图表-->
<script>
    //3.1 初始化绘制图标的echarts实例，想要在那儿显示，参数就传哪个容器
    var myChart = echarts.init(document.querySelector('#demo1'))
    
    //3.2 指定图表的配置，（绘制什么东西？）
    var option = {
        //设置图表的标题
        title:{
            text:"echarts demo1"
        },
        // 图表的提醒框组件
        tooltip:{
            //触发方式  axis最标轴触发
            trigger:'axis'
        },
        // 图例
        legend:{
            data:['人数', '活跃人数']
        },
        // x轴的标记
        xAxis:{
            data:['vue','react','angular','jquery']
        },
        // Y轴
        yAxis:{}, //y为空对象，就代表显示数字，没有其他的
        // 具体的数据
        series:[
            {
                name:"人数", //与lengend 标记是对应的的
                type:"bar", //类型是 条形图
                data:[2000,1500,500,2200]//具体的数据

            },
            // 如果又很多种不同name的数据，可以用大括号进行包裹，逗号分割 ,{},{}
            {
                name:"活跃人数", //与lengend 标记是对应的的
                type:"bar", //类型是 条形图
                data:[1900,1200,400,1000]//具体的数据

            }
        ],
        // 设置颜色, 也可以不设置，我觉得默认的还挺好看的
        // color:['blue','red']
    }

    // 3.2 实例对象的设置配置
    myChart.setOption(option)

</script>

</body>
</html>

实现效果如下图所示（数据是瞎写的）：

二、 Vue

2.1 什么是Vue

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。

官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

官方文档：http://vuejs.org/v2/guide/syntax.html

中文文档: https://v2.cn.vuejs.org/v2/guide/

2.2 Vue 的安装和配置

参考教程：Vue安装及环境配置、开发工具_袁小萌同学的博客-CSDN博客_下载vue

感觉这个教程完胜！本菜菜就不写了。。

2.3 demo2（在Vue2中使用echarts）

Step1: 引入echarts

a. 建好Vue项目后，在终端用npm安装一下echarts

 npm install echarts --save

加入--save，就可以在package.json中看到 echarts了

b. 在App.vue中引入echarts

import * as echarts from 'echarts' // echarts5 以上用这个代码导入
import echarts from 'echarts' //echarts5 以下 用这行导入

Step2: 在<template>的<div>中准备一个容器，用来显示图表

    <div id="demo2" style="width: 600px;height: 400px"></div>

Step3.1 : 初始化 echarts对象的配置

在vue 的 mouted中，来初始化一个echarts实例，并将div传给他

        mounted: function () {
            // 3.1 初始化绘制图标的echarts 实例
            var myChart = echarts.init(document.querySelector('#demo2'))

        }

Step3.2: 设置数据信息，指定图表的配置

在data中,来设置图表的基本信息

        data() {
            return {
                option: {
                    title: {
                        text: "echarts demo1" //title里不能直接写字符串
                    },
                    tooltip: "",  //提示框
                    legend: {
                        data: ['人数']
                    },
                    xAxis: { //x轴的标记
                        data: ['vue', 'react', 'angular', 'jquery']
                    },
                    yAxis: {}, //y为空对象，就代表显示数字，没有其他的
                    series: [ //数据写在这里
                        {
                            name: "人数", //与lengend 标记是统一的
                            type: "bar", //类型是 条形图
                            data: [2000, 1500, 500, 2200]
                        }
                    ]
                }
            }
        },

Step3.3 实例化echarts对象，将图表配置信息传递过去

位置与step3.1 的一样，这里把 data中的 option传递过来

        mounted: function () {
            // 3.1初始化绘制图标的echarts 实例
            var myChart = echarts.init(document.querySelector('#demo2'))
            // 3.3 对实例对象设置配置；
            myChart.setOption(this.option)

        }

可以发现总体步骤与只是用echarts的时候相对应，这里我们扩充一下，增加一个按钮来改变图表中的数据

Step4: 增加一个按钮

    <button @click="changeOption">修改图标数据</button>

Step5: 动态改变option的值

在methods里增加对应的方法（例如button点击的时候的方法），在该方法中改变data中的option数据，或者只改变option中的需要改变的值，例如this.option.series[0].data = [3000, 1500, 500, 1200]

    methods: {
            // 5. 写一个方法改变option的值，方法名对应button按钮的click
            changeOption() {
                console.log("1212");
                this.option = {
                    title: {
                        text: "echarts demo1" //title里不能直接写字符串
                    },
                    tooltip: "",  //提示框
                    legend: {
                        data: ['人数']
                    },
                    xAxis: { //x轴的标记
                        data: ['vue', 'react', 'angular', 'jquery']
                    },
                    yAxis: {}, //y为空对象，就代表显示数字，没有其他的
                    series: [ //数据写在这里
                        {
                            name: "人数", //与lengend 标记是统一的
                            type: "bar", //类型是 条形图
                            data: [3000, 1500, 500, 1200]
                        }
                    ]
                }
            }
        }

Step6: 监听option的改变，再次对echarts进行初始化和实例化

        watch: {
            option () {
                //再次对option进行初始化和配置
                // 初始化绘制图标的echarts 实例
                var myChart = echarts.init(document.querySelector('#demo2'))
                //对实例对象设置配置；
                myChart.setOption(this.option)
            }
        }

下图是各个部分之间的位置关系，可以总体上把握整个开发的步骤：

完整代码如下：

<template>
  <div id="app">
    <!-- 2. 准备一个容器装图表   -->
    <div id="demo2" style="width: 600px;height: 400px"></div>
    <!-- 4. 增加一个按钮   -->
    <button @click="changeOption">修改图标数据</button>
    <router-view/>
  </div>
</template>

<script>
    // 1. 导入 echarts
    import * as echarts from 'echarts'// echarts5 以上用这个代码导入
    //import echarts from 'echarts' //echarts5 以下 用这行导入

    export default {

        name: 'App',
        // 3. 初始化并实例化 echarts
        // 3.2: 设置数据信息，指定图表的配置
        data() {
            return {
                option: {
                    title: {
                        text: "echarts demo1" //title里不能直接写字符串
                    },
                    tooltip: "",  //提示框
                    legend: {
                        data: ['人数']
                    },
                    xAxis: { //x轴的标记
                        data: ['vue', 'react', 'angular', 'jquery']
                    },
                    yAxis: {}, //y为空对象，就代表显示数字，没有其他的
                    series: [ //数据写在这里
                        {
                            name: "人数", //与lengend 标记是统一的
                            type: "bar", //类型是 条形图
                            data: [2000, 1500, 500, 2200]
                        }
                    ]
                }
            }
        },
        // 3.1  和3.3 初始化和实例化echarts
        mounted: function () {
            // 3.1初始化绘制图标的echarts 实例
            var myChart = echarts.init(document.querySelector('#demo2'))
            // 3.3 对实例对象设置配置；
            myChart.setOption(this.option)

        },

        // 5. 写一个方法改变option的值，方法名对应button按钮的click
        methods: {
            // 5. 写一个方法改变option的值，方法名对应button按钮的click
            changeOption() {
                console.log("1212");
                this.option = {
                    title: {
                        text: "echarts demo1" //title里不能直接写字符串
                    },
                    tooltip: "",  //提示框
                    legend: {
                        data: ['人数']
                    },
                    xAxis: { //x轴的标记
                        data: ['vue', 'react', 'angular', 'jquery']
                    },
                    yAxis: {}, //y为空对象，就代表显示数字，没有其他的
                    series: [ //数据写在这里
                        {
                            name: "人数", //与lengend 标记是统一的
                            type: "bar", //类型是 条形图
                            data: [3000, 1500, 500, 1200]
                        }
                    ]
                }
            }
        },

        // 6.监听changeOption操作
        watch: {
            option () {
                //再次对option进行初始化和配置
                // 初始化绘制图标的echarts 实例
                var myChart = echarts.init(document.querySelector('#demo2'))
                //对实例对象设置配置；
                myChart.setOption(this.option)
            }
        }
    }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

（运行的方法，在终端进入到该项目，输入npm run dev即可运行）

实现效果如图所示：