【一】ECharts----【基本概念、基本实例】

目录

零.前言

一.ECharts的安装

1.1独立版本的安装

1.2CDN的安装

 1.3NPM的安装

二.ECharts实例

三.系列(series)

四.创建一个ECharts图表的基本步骤

4.1创建一个DOM容器

4.2使用DOM节点初始化ECharts对象

4.3设置配置信息

4.3.1图表标题

4.3.2提示信息

4.3.3图例组件

4.3.4X轴

4.3.5Y轴

4.3.6系列列表

4.4将配置信息交给ECharts对象

零.前言

本博客记录学习:“ECharts的知识点,方便回顾查询

基于EChart官方文档制作:Documentation - Apache ECharts

一.ECharts的安装

ECharts的安装有三种方法:“独立版本”、“使用CDN”、“使用NPM

1.1独立版本的安装

直接下载“echarts.min.js”并用script标签引入:

下载地址:下载 - Apache ECharts

独立版本也有三个版本

  • 完全版echarts.js:体积最大,包含所有的图表和组件
  • 常用版echarts.common.js:体积适中,包含常见的图表和组件
  • 精简版echart.simple.js:体积较小,仅包含最常用的图表和组件

1.2CDN的安装

CDN的安装相对简单,可以直接通过<script>API调用:

常见的CDN有以下三种:

  • echarts CDN by jsDelivr - A CDN for npm and GitHub
  • UNPKG - echarts
  • echarts - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

 1.3NPM的安装

NPM的安装需要NPM版本大于3.0:

cnpm install echarts --save

二.ECharts实例

一个网页可以创建多个:“echarts实例”,每个“echarts实例”可以包含多个图表和坐标系。

一个“DOM节点”作为一个“echarts实例”的渲染容器,每个“DOM节点”只可以渲染一个“echarts实例”。

三.系列(series)

系列是指:“一组数值以及他们映射成的图

一个“系列”至少要包含:“一组数值、图表类型、关于这些数值如何映射成图的参数

series: [{name: '销量',  // 系列名称type: 'bar',  // 系列图表类型data: [5, 20, 36, 10, 10, 20]  // 系列中的数据内容
}]

四.创建一个ECharts图表的基本步骤

创建一个ECharts基本图表可分为四步:“创建一个DOM容器”、“使用DOM节点初始化一个ECharts对象”、“设置配置信息(json格式设置)”、“将配置信息交给ECharts对象展示

下面,我们通过一个例子,来讲解四个步骤:

4.1创建一个DOM容器

EChartsDOM容器一般是:“div”,我们要为这个div设置一个高度和宽度,用来承载图表,图表的最大高度宽度就是div高度宽度

<body><!-- 创建一个DOM容器 --><div id="myecharts" style="width: 400px;height: 400px;"></div>
</body>

4.2使用DOM节点初始化ECharts对象

初始化ECharts对象我们使用ECharts库中的“init()”方法来初始化,使用方法:

  • init(dom,theme,opts):返回一个ECharts对象

参数说明

  • “dom”:dom节点
  • “thme”:应用主题,可以是一个主题的配置对象,也可以是自定义配置对象
  • “opts”:附加参数,参数如下:
  • opts(renderer):渲染模式,支持‘canvas’或者‘svg’
  • opts(width):显式指定ECharts对象宽度,如不指定默认为DOM节点宽度
  • opts(height):显式指定ECharts对象高度,如不指定,默认为DOM节点高度

 一个示例:

var myecharts = echarts.init(mydom,null,{renderer:'svg',height:400px,width:200px});

4.3设置配置信息

设置配置信息有两种方法:“创建一个option变量存储信息再将这个变量后续传递给ECharts对象”、“将配置信息显式的写入到setOption方法内”,我们推荐使用第一种

需要配置的信息大致有以下几种:

  • title:图标标题
  • tooltip:提示信息
  • legend:图例组件
  • xAxis:X轴
  • yAxis:Y轴
  • series:系列列表

下面是一个我们已经配置好的图表代码,我们将在这个图表代码上修改来演示上述配置信息:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
</head>
<body><!-- 创建一个DOM容器 --><div id="myecharts" style="width: 400px;height: 400px;border: 2px solid;"></div><script>// 初始化echarts对象var myChart = echarts.init(document.getElementById("myecharts"))// 设置图表配置var option = {title:{text:"第一个EChart示例"},tooltip:{},legend:{data:['销量']},xAxis:{data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']},yAxis:{},series:[{name:'销量',type:'bar',data:[5,20,36,10,10,20]}]};// 将图表配置显示myChart.setOption(option);</script>
</body>
</html>

 效果如下:

4.3.1图表标题

设置图表标题使用“title”属性:

我们如下修改之后

            title:{text:"这是修改之后的标题"},

效果:

4.3.2提示信息

我们将tooltip修改如下样式后:

            tooltip:{valueFormatter:function (value){return value + '件'},textStyle:{color:"red"}},

效果:

tooltip其它的属性:

 tooltip: {axisPointer: {type: "line", // 指示器类型('line' 直线指示器;'shadow' 阴影指示器;'none' 无指示器;'cross' 十字准星指示器。)snap: false, // 坐标轴指示器是否自动吸附到点上。默认自动判断。},showContent: true, // 是否显示提示框浮层,默认显示alwaysShowContent: true, // 是否永远显示提示框内容,默认情况下在移出可触发提示框区域后一定时间后隐藏triggerOn: "mousemove", // 提示框触发的条件('mousemove',鼠标移动时触发;'click',鼠标点击时触发;'mousemove|click',同时鼠标移动和点击时触发;'none',不在 'mousemove' 或 'click' 时触发)confine: true, // 是否将 tooltip 框限制在图表的区域内backgroundColor: "rgba(0,0,0,0)", // 提示框浮层的背景颜色padding: 15, // 提示框浮层内边距,单位pxposition: "left",textStyle: {color: "#78EC4E", // 文字的颜色fontStyle: "normal", // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)fontWeight: "normal", // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)},},

4.3.3图例组件

我们修改如下:

            legend:{name:'系列1',icon:'circle',textStyle:{color:'red',fontSize:20}},

效果:

4.3.4X轴

我们修改如下:

            xAxis:{data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子','裤衩子']},

效果:

4.3.5Y轴

修改如下:

            yAxis:{min:0,max:50,axisLabel:{formatter:"{value} 件"}},

效果:

4.3.6系列列表

修改如下:

            series:[{name:'销量',type:'line',data:[5,20,36,10,10,20]}]

效果

4.4将配置信息交给ECharts对象

ECharts对象展示某个配置信息,使用“setOption”方法,使用方法如下:

  • setOption(option)

参数说明

option:参数设置变量,或者一个给定的json

 

        // 将图表配置显示myChart.setOption(option);

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

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

相关文章

90天玩转Python—18—Python面向对象编程:核心概念详解

90天玩转Python系列文章目录 90天玩转Python—01—基础知识篇:C站最全Python标准库总结 90天玩转Python--02--基础知识篇:初识Python与PyCharm 90天玩转Python—03—基础知识篇:Python和PyCharm(语言特点、学习方法、工具安装) 90天玩转Python—04—基础知识篇:Pytho…

提取点云-------PCL

提取点云 /// <summary> /// VoxelGrid滤波下采样 /// </summary> /// <param name"cloud">需要滤波的点云</param> /// <param name"lx">三维体素栅格的x</param> /// <param name"ly">三维体素栅格…

全新Linux教程-驱动大全-PCI和PCIe子系统-P2-PCI设备的访问方法-非桥设备

主要讲PCI设备的硬件访问方法。 1、PCI的硬件结构 CPU发出的地址是CPU地址&#xff0c;可能是访问底下任何一个设备。地址范围不一样&#xff0c;访问到的外设就不一样。在嵌入式中&#xff0c;通常将4G内存地址空间分成好几个区域&#xff0c;不同的访问分给不同的地址。桥内…

Github首页美化(updating)

Github首页美化 一、新建仓库二、美化Github首页主页访问量统计仓库状态统计常用语言占比统计社交链接 界面展示 一、新建仓库 对Github首页进行美化&#xff0c;需要新建一个仓库名和自己 Github 用户名相同的仓库&#xff1b;并且需要添加一个 README.md自述文件即可。 如果…

nVisual在线网络规划设计软件

●01● nVisual在线网络规划设计软件 在信息化快速发展的今天&#xff0c;网络基础设施的建设与优化变得尤为关键。为了满足现代通信行业对高效、精准的网络规划需求&#xff0c;nVisual在线网络规划设计软件应运而生&#xff0c;它通过集成先进的GIS技术和网络规划工具&#…

Ansible相关

Ansible 环境准备 主机名ip分组crontol192.168.88.1node1192.168.88.11testnode2192.168.88.12proxynode3192.168.88.13webserversnode4192.168.88.14webserversnode5192.168.88.15database 所有操作只需在crontol上操作即可 安装ansible # 依赖一般也会跟着一起装好 yum …

sprinboot+vue集成neo4j图数据库

一 、java后台 1.1 package com.admin.domain;/*** 功能描述&#xff1a;** author wangwei* date 2024-01-15 22:13*/ public class ConnectWeb {private String connectWebId;private String connectWebName;private String connectWebInfo;private String personWebIdAlph…

Vue.js------Vue组件基础

能够理解Vue组件概念和作用能够掌握封装创建组件能力能够使用组件之间通信能够完成todo案例 一.Vue组件创建和使用 1.折叠面板-实现多个 创建一个文件夹demo 具体步骤请参考vue.js---vue基础 ⚫ 解决方案: 采用vue提供的单.vue文件-组件方式来封装一套然后复用 在component…

华为校招机试 - 会议通知转发总人数(20240410)

题目描述 在一个办公区内,有一些正在办公的员工,当员工 A 收到会议通知: 他会将这个会议通知转发给周围四邻(上下左右工位的同事)团队内的同事,周围收到该邮件的同事会继续转发给周围四邻(上下左右工位的同事)团队内的同事,直到周围没有再需要往下传播的同事则会停止…

构建Python中的分布式日志系统:ELK与Fluentd的结合

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 在现代软件开发中&#xff0c;日志系统是至关重要的组成部分。它们不仅用于故障排查和性能监…

利用Python进行大规模数据处理

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 利用Python进行大规模数据处理&#xff1a;Hadoop与Spark的对比 随着数据量的不断增长&…

ZJGSU 1850 不同出栈情况

描述 假设有n个元素依次进栈&#xff0c;给出他们可能的不同的出栈情况。 输入 3 1 2 3 输出 1 2 3 1 3 2 2 1 3 2 3 1 3 2 1 输入样例 1 3 1 2 3 输出样例 1 1 2 3 1 3 2 2 1 3 2 3 1 3 2 1 #include <stdio.h>int tot, res, sta, n; int r[2005], s[2005…

centos linux 7.9安装php8.2.18不支持mysqli模块,如何解决?

&#x1f3c6;本文收录于「Bug调优」专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&&…

蓝桥杯竞赛类型:Web应用开发 全程详解

既然大家准备报名蓝桥杯&#xff0c;那么对蓝桥杯就应该有一定的了解了。没有了解也没关系&#xff0c;简单来说&#xff0c;蓝桥杯就是一个计算机竞赛&#xff0c;竞赛类型大多是使用各种语言写算法&#xff0c;当然还有本文的主体——Web应用开发。对蓝桥杯有了基本了解之后&…

Https协议如何保证安全性?

Https和Http的关系 Https是Http里的一层加密层&#xff0c;如果协议走了这一层加密层&#xff0c;那么就是https。如果没有&#xff0c;则是单纯的http。 因为没有走ssl/tls这层加密层&#xff0c;所以这是单纯的http协议&#xff0c;数据在网络中传输是明文的&#xff0c;也…

用html写一个有趣的动态背景

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>一个有趣的动态背景</title><link rel"stylesheet" href"./style.css"> </head> <body> <canvas id&…

STM32 F103 C8T6开发笔记14:与HLK-LD303-24G测距雷达通信

今日尝试配通STM32 F103 ZET6与HLK-LD303-24G测距雷达的串口通信解码 文章提供测试代码...... 目录 HLK-LD303-24G测距雷达外观&#xff1a; 线路连接准备&#xff1a; 定时器与串口配置准备&#xff1a; 定时器2的初始化&#xff1a; 串口1、2初始化&#xff1a; 串口1、2自定…

【Java开发指南 | 第十五篇】Java Character 类、String 类

读者可订阅专栏&#xff1a;Java开发指南 |【CSDN秋说】 文章目录 Java Character 类转义序列 Java String 类连接字符串 Java Character 类 Character 类是 Java 中用来表示字符的包装类&#xff0c;它提供了一系列静态方法用于对字符进行操作&#xff0c;其主要分为静态方法…

C及C++标准与QT版本介绍

一.软件规范及组织 1.GNU GNU是“GNUs Not Unix”的缩写&#xff0c;是GNU计划&#xff08;GNU Project&#xff09;的官方名称&#xff0c;由理查德斯托曼在1983年9月27日公开发起。 GNU计划的目的是创建一套完全自由的操作系统。为保证GNU软件可以自由地“使用、复制、修改…

AAAI-24 | EarnHFT:针对高频交易的分层强化学习(RL)框架

AAAI-24 | EarnHFT:针对高频交易的分层强化学习&#xff08;RL&#xff09;框架 原创 QuantML QuantML 2024-04-15 09:25 上海 EarnHFT 摘要(Abstract):高频交易&#xff08;HFT&#xff09;使用计算机算法在短时间内&#xff08;例如秒级&#xff09;做出交易决策&#xff…