Echarts快速入门

月光晒了很凉快

已于 2022-03-29 21:01:26 修改

阅读量1.5k

点赞数 1

分类专栏：前端Web 文章标签： html5 前端 echarts javascript

于 2021-11-17 08:51:01 首次发布

本文链接：https://blog.csdn.net/weixin_45605541/article/details/121370166

版权

前端Web 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

文章目录

一. 概述
二. Echarts使用步骤
三. Echarts基础配置

一. 概述

Echarts，一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库ZRender，提供直观、交互丰富、可高度个性化定制的数据可视化图表。

二. Echarts使用步骤

下载并引入echarts.js文件

图表依赖这个js库。

下载：

在echarts官网依据引导下载echarts.min.js文件。

引入：

在文件中写入如下代码，即可引入：
```
    <script src="js/echarts.min.js"></script>
```

准备一个具备大小的DOM容器

生成的图表会放入这个容器内。

准备容器：

    <div class="box"></div>

设置参数：

    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>

初始化echarts实例对象

实例化echarts对象。

        //初始化实例对象    echarts.init(dom容器)
        var myChart=echarts.init(document.querySelector('.box'));

指定配置项和数据（option）

根据需求修改配置选项。

可查询echarts官网获取。

 var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

将配置选项设置给echarts实例对象

让echarts对象根据修改好的配置生效。
```
      //把配置项给实例对象
      myChart.setOption(option);
```

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script src="js/echarts.min.js"></script>
    <script>
        //初始化实例对象    echarts.init(dom容器)
        var myChart=echarts.init(document.querySelector('.box'));
        //指定配置项和数据
        var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
      //把配置项给实例对象
      myChart.setOption(option);
    </script>
</body>
</html>

三. Echarts基础配置

需要了解的主要配置：series xAxis yAxis grid tooltip title legend color

series
- 系列列表。每个系列通过 type 决定自己的图表类型
- 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。
- stack：数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
xAxis：设置直角坐标系 grid 中的 x 轴的相关配置
- boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间
yAxis：直角坐标系 grid 中的 y 轴
grid：可以控制线型图、柱状图的图标大小
- containLabal：显示或不显示刻度
title：标题组件，设置图表的标题
tooltip：提示框组件，显示提示信息
- trigger：触发方式。
legend：图例组件，如果series里面有了name值，则legend里面的date可以删掉
color：调色盘颜色列表，可修改线条的颜色
toolbox：工具箱组件，可以实现另存为图片等功能