ECharts可视化库--常用组件

news2024/12/24 9:01:30

目录

一.series系列

二.常见组件 

1.标题title

2.图例legend 

3.工具栏toolbox

4.提示框tooltip 

5.坐标轴 xAxis yAsix

6.series系列


        上一篇已经介绍了ECharts库的导入工作和绘制基本的图标,今天我们来了解一下常用的组件,如果对数据可视化感兴趣的麻烦点个关注,内容会持续更新。

        如果不清楚ECharts库的导入过程的可以参考:ECharts导入

在介绍常用组件之前,先了解一下series系列

一.series系列

        我们知道数据的可视化包含了我们可以直接看见的图表,还包含了数据,而这些都包含series系列里,一个series系列必须包含两个要素:图表数值data图表类型type,有了这两个要素数据才可以表现出来

常见的图表类型:

  • 折线图line
  • 柱状图bar
  • 饼图pie
  • 散点图scatter
  • 关系图graph
  • 树图tree

        例如:一个折线图表,type为line,给定数据data

<script type="text/javascript">
    // 因为该demo会经常更该,所以要销毁前一个图表
    echarts.init(document.getElementById('div')).dispose();
    //定义
    var myChart = echarts.init(document.getElementById('div'));
    var option={
        xAxis:{
            data:[
                'jan','feb','mar','apr','may','jun',
                'jul','aug','sep','oct','nov','dec'
            ]
        },
        yAxis:{},
        series:[
            {
                type:'line',
                data:[43,62,56,91,23,5,12,31,38,97,86,57]
            }
            ]
    }
  myChart.setOption(option);
</script>

二.常见组件 

1.标题title

  • 主标题 title
  • 副标题 subtext
  • 位置 left
  • 主标题样式 textStyle
  • 副标题样式 subtextStyle
  • 可见性 show

例如:在上面的例子中加入标题


2.图例legend 

        图例legend方便对数据的分辨,它的data参数和series系列搭配使用

 var option={
        legend:{
         data:['人数'],  //要和series的name对于
    },
        xAxis:{
            data:[
                'jan','feb','mar','apr','may','jun',
                'jul','aug','sep','oct','nov','dec'
            ]
        },
        yAxis:{},
        series:[
            {
                name:'人数',
                type:'line',
                data:[43,62,56,91,23,5,12,31,38,97,86,57]
            }
            ]
    }

在数据上会多出legend图例 


3.工具栏toolbox

  • 保存图片 saveAslmage
  • 配置项还原 restore
  • 数据视图工具 dataView
  • 数据区域缩放 dataZoom
  • 动态类型切换 magicType

例如:加上toolbox后

toolbox:{
          feature:{
              saveAsImage:{type:'jpg'},
              dataView:{},
              restore:{},
              dataZoom:{},
              magicType:{
                  type:[
                      'line',
                      'bar',
                      'stack',
                      'titled'
                  ]
              }
          }
        },

图表上会多出一些工具 


4.提示框tooltip 

提示触发方式trigger

item 图形触发,主要在散点图,饼图等无类目轴的图表中使用

axis 坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表

none什么都不触发

例如:在上面的例子中加入提示框

 tooltip:{
          trigger:'axis'
        },

当鼠标触碰到图表坐标时,会有提示信息


5.坐标轴 xAxis yAsix

  •  坐标名称 name
  • 类名数据 data 

y轴的分割设置:

  • splitNUmber 分割段数
  • interval 坐标分割间隔
  • minlnterval 坐标轴最小间隔
  • maxlnterval 坐标轴最大间隔

6.series系列

  •  类型 type
  • 类名名 name
  • 数据data
  • 标记点 markPoint

markPoint:{

        data:[

{type:'min'},{type:'max'},{value:'value',coord:[x,y]}        //coord 坐标

]

}

  • 标记线 markLine

markLine:{

        data:[

{type:'min'},{type:'max'},{value:'value',coord:[x,y]}        //coord 坐标

]

}


全例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<script src="echart.js"></script>
    <style>

    </style>
</head>
<body>
<div style="height: 500px;width: 600px" id="div"></div>
<script type="text/javascript">
    // 因为该demo会经常更该,所以要销毁前一个图表
    echarts.init(document.getElementById('div')).dispose();
    //定义
    var myChart = echarts.init(document.getElementById('div'));
    var option={
        legend:{
         data:['人数'],  //要和series的name对于
    },
  title:{
          text:'主标题',
            subtext:'副标题',
            textStyle:{
              color:'blue',
                fontSize:20
            },
            subtextStyle:{
              color: 'red',
                fontSize: 10
            }
        },
        toolbox:{
          feature:{
              saveAsImage:{type:'jpg'},
              dataView:{},
              restore:{},
              dataZoom:{},
              magicType:{
                  type:[
                      'line',
                      'bar',
                      'stack',
                      'titled'
                  ]
              }
          }
        },
        tooltip:{
          trigger:'axis'
        },
        xAxis:{
            data:[
                'jan','feb','mar','apr','may','jun',
                'jul','aug','sep','oct','nov','dec'
            ]
        },
        yAxis:{},
        series:[
            {
                name:'人数',
                type:'bar',
                data:[43,62,56,91,23,5,12,31,38,97,86,57],
            markPoint:{
                    data:[
                        {type:'min'},
                        {type: 'max'},
                        {coord:[0,70],value:70},
                    ]
            },
                // markLine:{
                //     date:[
                //         {name:'平均线',type:'min'},
                //     ]
                // },
            }
            ]
    }
  myChart.setOption(option);

</script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/390034.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

嵌入式安防监控项目——前期知识复习

目录 一、概述 二、C语言 三、数据结构 四、IO进程 五、网络 六、ARM体系结构和接口技术 七、系统移植 八、内核驱动 一、概述 我再报班之前学过51和32&#xff0c;不过都是自学的。报班开始先从应用层入手的&#xff0c;C语言和数据结构。只要是个IT专业的大学这都是必…

【剑指Offer】JZ14--剪绳子

剪绳子详解1.问题描述2.解题思路3.具体实现1.问题描述 2.解题思路 首先想到的思路&#xff1a;因为是求乘积的最大值&#xff0c;所以如果截取剩下的是1&#xff0c;那还是它本身就没有意义。从此出发&#xff0c;考虑绳子长度是2、3、4、5…通过穷举法来找规律。 值–》拆分–…

Keychron K7 Pro 轻薄矮轴机械键盘开箱体验

文章目录1. 拆箱2. 零件3. 外观4. 声音5. 特点5.1 有线 / 无线5.2 RGB背光5.3 轻薄5.4 mac / win / iphone 切换5.5 人体工程学支持5.6 扁平双射PBT键帽5.7 重新设计的稳定器5.8 扁平Gateron(佳达隆)轴体5.9 热插拔5.10 支持 QMK / VIA 改键6. 对比6.1 K7 与 K7 Pro 参数对比6.…

Windows10下使用CMake编译ITK5.2.1步骤

编译环境&#xff1a;Windows10VS2017Cmak3.24.0ITK5.2.1 编译步骤&#xff1a; 1、下载ITK到本地&#xff1a;ITK官网Download | ITK&#xff0c;ITK5.2.1下载地址 https://github.com/InsightSoftwareConsortium/ITK/releases/download/v5.2.1/InsightToolkit-5.2.1.zip ​…

13_pinctrl子系统

总结 pinctrl作为驱动 iomuxc节点在设备树里面 存储全部所需的引脚配置信息 iomux节点匹配pinctrl子系统 控制硬件外设的时候 要知道有哪些gpio 再看gpio有哪些服用寄存器 接着在程序配置gpio相关寄存器 这样搞效率很低 所以用iomux节点保存所有的引脚组 pinctrl驱动起来的时…

Linux(基于 Centos7) 常用操作

1.Linux 简介Linux 是一种 免费使用、自由传播的类 Unix 操作系统Linux操作系统内核&#xff0c;由林纳斯托瓦兹在1991年10月5日首次发布...Linux 是一套开源操作系统&#xff0c;它有稳定、消耗资源小、安全性高等特点大多数人都是直接使用 Linux 发行版&#xff08;就是将 Li…

一文讲明白一致性hash算法

一致性Hash算法常用来解决数据分片时的数据扩容/缩容的性能问题。 一、业内数据分片用的Hash算法&#xff0c;将节点的hash值对节点数取余。 存取通过key / value的方式对节点取余。 二、数据分片使用hash算法的优缺点&#xff1a; 优点&#xff1a;简单&#xff0c;方便。 缺…

【笔记】OpenMPI基本使用1

【笔记】OpenMPI基本使用1 介绍 在 90 年代之前&#xff0c;对不同的计算架构写并发程序是一件困难而且复杂的事情。当时&#xff0c;虽然很多软件库可以帮助写并发程序&#xff0c;但是并没有一个大家都接受的标准。 在当时&#xff0c;大多数的并发程序出现在科学研究领域…

为什么我复制的中文url粘贴出来会是乱码的? 浏览器url编码和解码

为什么我复制的中文url粘贴出来会是乱码的&#xff1f; 浏览器url编码和解码 Start 番茄最近涉及到一些和单点登录相关的业务需求&#xff0c;在实现功能的过程中&#xff0c;难免少不了和 url 打交道。但是在打交道的过程中&#xff0c;遇到一个痛点&#xff1a;明明我复制的…

网络基础(二)之HTTP与HTTPS

应用层 再谈 "协议" 协议是一种 "约定". socket api的接口, 在读写数据时, 都是按 "字符串" 的方式来发送接收的. 如果我们要传输一些"结构化的数据" 怎么办呢? 为什么要转换呢&#xff1f; 如果我们将struct message里面的信息…

【C++】-- 类型转换

目录 前言 C语言中的类型转换 C强制类型转换 static_cast&#xff08;static静止的&#xff09; reinterpret_cast&#xff08;reinterpret重新解释&#xff09; const_cast&#xff08;const常量&#xff09; 总结 dynamic_cast&#xff08;dynamic动态&#xff09; …

JavaWeb开发(三)3.5——Java的反射机制

一、反射机制的概念 指在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法&#xff0c;对于任意一个对象&#xff0c;都能调用它的任意一个方法。这种动态获取信息&#xff0c;及动态调用对象方法的功能叫java语言的反射机制。 Java反射机制的核心是在程序运行时动…

Vue3电商项目实战-购物车模块4【11-购物车页面-确认框组件】

文章目录11-购物车页面-确认框组件11-购物车页面-确认框组件 目的&#xff1a;通过vue实例调用$confirm函数弹出确认框。import导入函数使用也需要支持。 大致步骤&#xff1a; 实现组件基础结构和样式。实现函数式调用组件方式和完成交互。加上打开时动画效果。给购物车删除加…

飞鹤奶粉营销杀手级动作,让对手郁闷

飞鹤奶粉杀手级动作&#xff0c;让对手绝望 不是“更适合中国宝宝体质”一句话的事 而是杀手级资源匹配&#xff1a; 飞鹤奶粉一年50万场线下活动 趣讲大白话&#xff1a;让别人无路可走 【安志强趣讲信息科技94期】 ********************************** 战略定位后&#xff0…

多重背包问题中的二进制状态压缩

1.多重背包问题 经典的多重背包问题和01背包问题的相似之处在于二者的一维遍历顺序都是从右侧往左侧遍历。 同时多重背包的一维写法不比二维写法降低时间复杂度。 2.多重背包标准写法:(平铺展开形式&#xff09; class Solution {public int maxValue(int N, int C, int[] s…

Raspbian镜像无头烧录

Raspbian镜像无头烧录1. 源由2. 需求3. 分析4. 步骤4.1 删除tf卡分区内容4.2 balena烧录镜像4.3 配置USB直接登录4.4 配置WiFi 2.4G网络登录4.5 修改登录账号密码4.6 数据同步和弹出tf卡5. 登录5.1 登录异常处理5.2 WiFi 2.4G网络登录5.3 USB直接登录6. 参考资料7. 补充资料这里…

HCIP-5OSPF域内域间外部路由学习笔记

1、OSPF区域 每个区域都维护一个独立的LSDB。 Area 0是骨干区域&#xff0c;其他区域都必须与此区域相连。 划分OSPF区域可以缩小路由器的LSDB规模&#xff0c;减少网络流量。 区域内的详细拓扑信息不向其他区域发送&#xff0c;区域间传递的是抽象的路由信息&#xff0c;而不…

【Flutter·学习实践·UI篇】基础且重要的UI知识

前言 参考学习官网&#xff1a;《Flutter实战第二版》 学习前先记住&#xff1a;Flutter 中万物皆为Widget&#xff0c;心中默念3次以上铭记于心。 这一点和开发语言Dart的变量一切皆是对象的概念&#xff0c;相互对应。 Widget 在前面的介绍中&#xff0c;我们知道在Flutt…

CSAPP第八章 异常控制流

目录 异常 异常处理 异常的类别 中断 陷阱和系统调用 故障 终止 ​编辑 Linux/x86-64 系统中的异常 进程 ​编辑 逻辑控制流 并发流 私有地址空间 用户模式和内核模式 上下文切换 ​编辑系统调用错误处理 进程控制 获取进程ID 创建和终止进程 回收子进程 …

汇编系列03-不借助操作系统输出Hello World

每天进步一点点&#xff0c;加油&#xff01; 上一节&#xff0c;我们通过汇编指令&#xff0c;借助操作系统的系统调用实现了向标准输出打印Hello world。这一节我们打算绕过操作系统&#xff0c;直接在显示屏幕上打印Hello world。 计算机的启动过程 当我们给计算机加电启…