这是我参与「第四届青训营 」笔记创作活动的第10天

前言

刚看完数据可视化的课，刚好就在考虑给项目增加点图表组件，就此记录下学Echarts的笔记吧。

1.什么是数据可视化？

其实就是将数据转换成我们能看到的一种形式，比如图表等内容。

2.Echarts是什么？

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。

ECharts 遵循 Apache-2.0 开源协议，免费商用。

ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。

使用Echarts

1.安装 Echarts

以下几种安装方式选择其中一种

// yarn
yarn add echarts
// npm
npm install echarts -S
// cnpm
cnpm install echarts -S

2.全局引入

​ 在main.js中

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

ps：这里我用最简单的方法来引入，还有引路方法可以看官网教程。

​ 到了这一步说明已经把准备工作做完了

3.创建一个容器

<div ref="EChart" style="width: 500px; height:300px;">

4.创建一个echart

    mounted() {
        // 基于准备好的dom，初始化echarts实例
        this.echart = this.$echarts.init(this.$refs.EChart)
        this.render()
    },
    methods: {
        render() {
            // 清除之前的数据参数
            this.echart.clear()
            let EChart = this.echart
            let option = getoption()
            // 设置参数
            let config = {
                ...option,
            }
            // 配置参数
            EChart.setOption(config)
        },

这里我来解释一下这里面的内容，首先echart是由canvas渲染而成的，所以我们这个是属于dom内容，我们获取到echart是需要现在mounted中获取到。

具体操作就是在内置的$echart.init()函数中，以基于准备好的dom元素，获取到初始化echarts实例。

紧接着我们就可以调用echart来渲染我们的图表

先用echart.clear()清除掉我们之前的数据参数，接着把我们的参数内容写在config中，最后通过setOption()把参数配置进去。

这里提供一个例子

const optionscatter = {
    xAxis: {
        data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    },
    yAxis: {},
    series: [
        {
            type: 'scatter',
            data: [220, 182, 191, 234, 290, 330, 310],
        },
    ],
}

实现效果

可以发现里面有一些参数我们第一次接触不了解，没关系，官网提供了很详细的资料给我们。

4.了解其参数

参数名	作用	链接地址
title	作为图表名称	https://echarts.apache.org/zh/option.html#title
legend	作为图表的标记	echarts.apache.org/zh/option.h…
xAxis	作为图表的X轴	echarts.apache.org/zh/option.h…
yAxis	作为图表的Y轴	echarts.apache.org/zh/option.h…
series	作为图表的系列	echarts.apache.org/zh/option.h…
color	作为图表的颜色列表	echarts.apache.org/zh/option.h…