ECharts快速入门

ECharts

一、ECharts简介
二、ECharts的基本使用
三、ECharts相关配置

ECharts官网

一、ECharts简介

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

优点

丰富的可视化类型
多种数据格式支持
流数据的支持
移动端优化
跨平台使用
绚丽的特效
详细的文档说明

二、ECharts的基本使用

步骤1：下载并引入echarts.js文件

官网下载

步骤2：准备一个具备大小的DOM容器

注意：盒子必须具备大小

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>EChartstitle>
    <style>
      .box{
        width: 400px;
        height: 400px;
        background-color: antiquewhite;
      }
    style>
    <script src="js/echarts.min.js">script>
  head>
      <div class="box">div>
  <body>
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

步骤3：初始化echarts实例对象

var mychart = echarts.init(document.querySelector('.box'));
1

步骤4：指定配置项和数据（option）

通过在echarts官网或者其他的网站进行复制粘贴

var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

当需要不同的图表时，只需更改此项配置即可，在官网示例中复制源码进行更改

步骤5：将配置项设置给echarts实例对象

   mychart.setOption(option);
1

在这里插入图片描述

效果：在这里插入图片描述

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>EChartstitle>
    <style>
      .box {
        width: 400px;
        height: 400px;
        background-color: antiquewhite;
      }
    style>
    
    <script src="js/echarts.min.js">script>
  head>
  
  <div class="box">div>
  <script>
    // 3、初始化echarts实例对象
    var mychart = echarts.init(document.querySelector('.box'));
    // 4、指定配置项和数据（option）
    var option = {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    };
    // 5、将配置项设置给echarts实例对象
    mychart.setOption(option);
  script>
  <body>
  body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

三、ECharts相关配置

全部配置

series

type：类型（什么类型的图表）比如line是折线 bar是柱形
name：系列名称，用于tooltip的显示，legend的图例筛选变化
stack：数据堆叠：第二个数据值=第一个数据值+第二个数据值
第三个数据值=第二个数据值+第三个数据值…依次叠加
如果给stack指定不同值或者去掉这个属性则不会发生数据堆叠
- 系列列表。每个系列通过 type 决定自己的图表类型
- 图标数据，指定什么类型的图标，可以多个图表重叠。

xAxis：直角坐标系 grid 中的 x 轴

boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。

yAxis：直角坐标系 grid 中的 y 轴

grid：直角坐标系内绘图网格。

left/right：直角坐标系距离左右box边缘的长度
containLabel：（true/false）：是否显示刻度标签---->常用于房子标签溢出的场景、标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件

title：标题组件

tooltip：提示框组件

鼠标悬停出现的提示框

legend：图例组件

color：调色盘颜色列表

数据堆叠，同个类目轴上系列配置相同的stack值后后一个系列的值会在前一个系列的值上相加。
在这里插入图片描述

相关阅读:
MySQL性能调优关注点和思路
ArduPilot开源飞控之AP_Mission
数据库系统原理实验报告2 | 创建数据库和表
Java进阶之再论面向对象（2）——类的定义及对象的使用 & 封装Encapsulation & 关键字private，this
HarmonyOS应用开发
Tomcat
【深度学习】SDXL-Lightning 体验，gradio教程，SDXL-Lightning 论文
C++：类和对象（上）
Kubernetes Gateway API 攻略：解锁集群流量服务新维度！
《算法导论》第17章-摊还分析 17.1 聚合分析 && 17.2 核算法&&17.3 势能法

原文地址：https://blog.csdn.net/qq_54351538/article/details/128056603