ECharts介绍及使用方法

聊五分钱的天吗?|ω・)و ̑̑༉

今天我们来聊一聊ECharts图表
ECharts图表

首先简单介绍一下,ECharts是一个纯JavaScript图表库,底层依赖于轻量级的Canvas类库ZRender,基于BSD开原协议,是一款非常优秀的可视化前端框架。

1. 官网

ECharts官网

首先就是在官网上下载合适的版本,比如我就是在写这个项目的时候需要用到ECharts图表我下载的就是5.2.2版本

下载:npm install echarts@5.2.2 --save
@符号表示要下载规定的版本
在这里插入图片描述

在package.json中能够看到echarts是否安装成功,以及echarts的版本号

2. 引入ECharts

在echarts的官网,我们首先要找到示例页面
在这里插入图片描述
打开示例页面找到我们所需要的堆叠面积图
在这里插入图片描述

在哪个页面使用ECharts,就在script标签里引入

// 1.导入echarts
import echarts from 'echarts'
// 2.echarts的折线图表示
import _ from 'lodash'

在这里插入图片描述

3. 绘制一个简单的图表

准备一个DOM容器

    <div id="main" style="width: 750px;height:400px;"></div>

4. 创建一个简单的折线图

export default {
  data() {
    return {
      options: {
        title: {
          text: "用户来源",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#E9EEF3",
            },
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            boundaryGap: false,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
      },
    };
  },

在插入已经编辑好的数据这样一个简单的折线图就写好了
效果图如下:
在这里插入图片描述

练习:用echarts图表写一个学生分数统计图

效果图:

在这里插入图片描述

源码如下:

<template>
    <div>Welcome</div>
    <div id="container" style="width: 800px;height:500px;"></div>
</template>
<script>
    // import * as echarts from 'echarts';
    const echarts = require('echarts')

    export default {
        mounted() {
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById('container'));
            // 绘制图表
            myChart.setOption({
                title: {
                    text: '学生分数统计图'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['张三', '李四', '王五', '赵六', '燕七']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    data: ['第一次', '第二次', '第三次', '第四次', '第五次', '第六次', '第七次']
                }],
                yAxis: [{
                    type: 'value'
                }],
                series: [{
                    name: '张三',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [120, 132, 101, 134, 90, 230, 210]
                }, {
                    name: '李四',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [220, 182, 191, 234, 290, 330, 310]
                }, {
                    name: '王五',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [150, 232, 201, 154, 190, 330, 410]
                }, {
                    name: '赵六',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [320, 332, 301, 334, 390, 330, 320]
                }, {
                    name: '燕七',
                    type: 'line',
                    stack: 'Total',
                    label: {
                        show: true,
                        position: 'top'
                    },
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [20, 32, 1, 34, 90, 100, 120]
                }]
            });
        }
    }
</script>
  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

归途风景111

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值