数据可视化高级技术Echarts(快速上手柱状图进阶操作)

news2024/10/7 15:28:44

目录

1.Echarts的配置

 2.程序的编码

3.柱状图的实现（入门实现）

相关属性介绍（进阶）：

1.标记最大值/最小值

2.标记平均值

3.柱的宽度

4. 横向柱状图

5.colorBy

series系列（需要构造多组数据才能实现，下面有Sale和Sale1两组数据）

data系列（同一组数据每个柱状图不同的显示）

6.showBackground

7.label

8.title  标题属性及相关设置

9.tooltip  鼠标经过时，出现提示框

10.toolbox  工具按钮（下载、复原什么的操作按钮）

11.legend  图例

1.Echarts的配置

        在  src  下新建目录JS，将echarts.js放入其中(这个是Eclipse的截图，其他开发IDE只需要引入echarts.js即可)

注意：Eclipse需要创建Dynamic Web Project才能运行

 2.程序的编码

        回顾五个基本步骤（通过简单的5个步骤, 就能够把一个简单的图表显示在网页中了。这几个步骤中, 步骤4最重要,一个图表最终呈现什么样,完全取决于这个配置项。所以对于不同的图表, 除了配置项会发生改变之外,其他的代码都是固定不变的。）

1.导入ECharts插件

<script type="text/javascript">

2.为ECharts准备一个DOM容器

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

3.基于准备好的DOM，初始化echarts实例

var myChart=echarts.init(document.getElementById('main'));

4. 指定图表的配置项和数据（对ECharts进行一些配置）

var option={ }

5.将配置和参数传递给ECharts，显示图表

myChart.setOption(option);

3.柱状图的实现（入门实现）

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Insert title here</title>  
<script src="JS/echarts.js"></script>  
</head>  
<body>  
<div id='main' style="width:600px;height:400px"></div>  
<script>  
var chartDom = document.getElementById('main');  
var myChart = echarts.init(chartDom);  
var option;  

option = {
		/* 设置x轴数据 */
		xAxis:{
			data:["冰箱","电视","洗衣机","手机","微波炉"]
		},
		/* 设置x轴数据 */
		yAxis:{
			
		},
		/* 填写series序列的类型 */
		series:{
			type:'bar', /* 设置图标类型 */
			data:[200,128,150,340,178] /* 插入数据 */
		},
		/* 设置提示框 */
		tooltip:{
			
		},
		/* 添加标题 */
		title:{
			text:'电器销售图' /* 设置文本内容 */
		}
}; 

myChart.setOption(option);   
</script>  
</body>  
</html>

相关属性介绍（进阶）：

1.标记最大值/最小值

2.标记平均值

3.柱的宽度

4. 横向柱状图

5.colorBy

从调色盘 option.color 中取色的策略，可取值为：

  • 'series'：按照系列分配调色盘中的颜色，同一系列中的所有数据都是用相同的颜色；
  • 'data'：按照数据项分配调色盘中的颜色，每个数据项都使用不同的颜色。
series系列（需要构造多组数据才能实现，下面有Sale和Sale1两组数据）
option = {
  tooltip: {},
  legend: {},
  xAxis: {
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {},
  series: [{
    name: "Sale",
    type: "bar",
    data: [5, 20, 36, 10, 10, 20, 4],
    colorBy: "series"
  },
  {
    name: "Sale1",
    type: "bar",
    data: [3, 25, 76, 18, 14, 4, 10],
    colorBy: "series"
  }
  ]
}

data系列（同一组数据每个柱状图不同的显示）
option = {
  tooltip: {},
  legend: {},
  xAxis: {
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {},
  series: [{
    name: "Sale",
    type: "bar",
    data: [5, 20, 36, 10, 10, 20, 4],
    colorBy: "data"
  }
  ]
}

6.showBackground
  • 是否显示柱条的背景色。通过 backgroundStyle 配置背景样式。
  • 每一个柱条的背景样式。需要将 showBackground 设置为 true 时才有效。

注意：两个参数需要同时使用才能生效

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};

7.label

图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。

  • show：是否显示标签
  • distance：距离图形元素的距离
  • rotate：旋转标签。从-90°到90°。正值是逆时针。
  • offset：文字偏移量。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。
option = {
  tooltip: {},
  legend: {},
  xAxis: {
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {},
  series: [{
    name: "Sale",
    type: "bar",
    data: [5, 20, 36, 10, 10, 20, 4],
    colorBy: "series",
    legendHoverLink: true,
    label: {
      show: true,
      distance: 5,
      rotate: 50,
      offset: [5, 8]
    }
  }]
}

8.title  标题属性及相关设置
  • text：设置文章（主）标题
  • subtext：设置文章（副）标题
  • left：设置标题的 --水平-- 位置（可以为 'left'，'center'，'right'，或者指定为数值）
  • top：设置标题 --垂直-- 位置（可以为 'up'，'center'，'down'，或者指定为数值）
  • textStyle：设置（主）标题的颜色
  • borderWidth：设置标题边框宽度（厚度）
  • borderColor：设置标题边框颜色
  • boderRadius：设置标题边框圆角
option = {
  tooltip: {},
  legend: {},
  xAxis: {
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {},
  series: [{
    name: "Sale",
    type: "bar",
    data: [5, 20, 36, 10, 10, 20, 4]
  }],
  title:{
    text:'柱状图的标题',
    subtext:'这个是副标题（注意观察位置）',
    textStyle:{
      color:'green' 
    },
    borderWidth:2,
    borderColor:'blue',
    borderRadius:5,
    // left:'right',
    left:180,
    top:10
  }
}

9.tooltip  鼠标经过时，出现提示框
  • trigger：设置触发类型（分为 item 和 axis ）
  • triggerOn：设置触发时机（分为 mousemove 和 click ）
  • formatter：设置格式化显示，即显示的标签格式（字符串模板，eg：{b}:{c} ）
  • axisPointer：设置触发显示为阴影（trigger为  axis 时生效） -->  下面图二
{
  tooltip: {
    trigger:'axis',
    triggerOn:'mousemove',
    // triggerOn:'click',
    formatter:'{b}:{c}',
    axisPointer:{
      type:'shadow'
    }
  },
  legend: {},
  xAxis: {
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {},
  series: [{
    name: "Sale",
    type: "bar",
    data: [5, 20, 36, 10, 10, 20, 4]
  }],
}

此时设置鼠标经过显示（mousemove）且axisPointer未生效（注释掉）

此时设置鼠标点击（click）且axisPointer生效

不想设置的话，建议加一个空白的tooltip，会自动给你有一些默认显示

 

10.toolbox  工具按钮（下载、复原什么的操作按钮）

只有五个工具：

  • 保存图片：savaAsImage
  • 数据视图：dataView（显示原始数据）
  • 重置还原：restore
  • 数据区域缩放：dataZoom
  • 动态类型切换：magicType（需要设置类型）
option = {
  tooltip: {
  },
  legend: {},
  xAxis: {
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {},
  series: [{
    name: "Sale",
    type: "bar",
    data: [5, 20, 36, 10, 10, 20, 4]
  }],
  toolbox:{
    feature:{
      saveAsImage:{
        
      },
      dataView:{
        
      },
      restore:{
        
      },
      dataZoom:{
        
      },
      magicType:{
        type:['bar','line']
      }
    }
  }
}

11.legend  图例

        图例需要和数据组对应，才能正确显示（设置name）

  • left：设置到左边的距离（可以是数值，或者百分比）
  • top：设置到上边的距离（可以是数值，或者百分比）
  • orient：设置图例的排列方向  horizontal（水平，默认） ，vertical（垂直）
option = {
  tooltip: {
  },
  legend: {
    left:200,
    top:50,
    orient:'vertical'
  },
  xAxis: {
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {},
  series: [{
    name: "Sale",
    type: "bar",
    data: [5, 20, 36, 10, 10, 20, 4]
  },
  {
    name: "Sale1",
    type: "bar",
    data: [5, 20, 36, 10, 10, 20, 4]
  }
  ]
}

 

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

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

相关文章

基于java实现的二手车交易网站

基于java实现的二手车交易网站

开发语言&#xff1a;Java 框架&#xff1a;ssm 技术&#xff1a;JSP JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7&#xff08;一定要&#xff09; 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea…
阅读更多...
C++初级----string类（STL）

C++初级----string类（STL）

1、标准库中的string 1.1、sring介绍 字符串是表示字符序列的类&#xff0c;标准的字符串类提供了对此类对象的支&#xff0c;其接口类似于标准字符容器的接口&#xff0c;但是添加了专门用于操作的单字节字符字符串的设计特性。 string类是使用char&#xff0c;即作为他的字符…
阅读更多...
蓝桥杯 【日期统计】【01串的熵】

蓝桥杯 【日期统计】【01串的熵】

日期统计 第一遍写的时候会错了题目的意思&#xff0c;我以为是一定要八个整数连在一起构成正确日期&#xff0c;后面发现逻辑明明没有问题但是答案怎么都是错的才发现理解错了题目的意思&#xff0c;题目的意思是按下标顺序组成&#xff0c;意思就是可以不连续&#xff0c;我…
阅读更多...
vue快速入门（八）绑定方法

vue快速入门（八）绑定方法

注释很详细&#xff0c;直接上代码 上一篇 新增内容 v-if与button响应回顾事件方法写法 源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, …
阅读更多...
《QT实用小工具·十七》密钥生成工具

《QT实用小工具·十七》密钥生成工具

1、概述 源码放在文章末尾 该项目主要用于生成密钥&#xff0c;下面是demo演示&#xff1a; 项目部分代码如下&#xff1a; #pragma execution_character_set("utf-8")#include "frmmain.h" #include "ui_frmmain.h" #include "qmessag…
阅读更多...
Spring Boot 学习（1）——环境搭建

Spring Boot 学习（1）——环境搭建

一只老辣鸟的自我救赎 不科普&#xff0c;简单记录学习过程。 开发环境约束&#xff1a; jdk1.8 Spring Boot 1.5.9 Spring 4.3.13 Maven 3.3.3 Intellij IDEA 2017 【脑瓜灵光的开发环境随意&#xff0c;不灵光尽量按上述约束设置。看了好些教程总…
阅读更多...
使用vue开发的前后台框架推荐

使用vue开发的前后台框架推荐

对于Vue后台前台框架&#xff0c;以下是几个值得推荐的选项&#xff1a; Element UI&#xff1a;一个基于Vue.js的桌面端组件库&#xff0c;提供了丰富的UI组件和交互方式&#xff0c;非常适合构建后台管理系统。 Element UI是一套为开发者、设计师和产品经理准备的基于Vue 2.…
阅读更多...
蓝桥杯第十三届省赛C++B组(未完)

蓝桥杯第十三届省赛C++B组(未完)

目录 刷题统计 修剪灌木 X进制减法 【前缀和双指针】统计子矩阵 【DP】积木画 【图DFS】扫雷 李白打酒加强版 DFS (通过64%&#xff0c;ACwing 3/11&#xff09;; DFS(AC) DP&#xff08;AC&#xff09; 砍竹子(X) 刷题统计 题目描述 小明决定从下周一开始努力刷题准…
阅读更多...
springboot之RESTful接口与Swagger

springboot之RESTful接口与Swagger

一、RESTful GET获取资源、POST新建资源、PUT更新资源、DELETE删除资源。 RESTful两大特性 1、安全性&#xff1a;GET请求不会引起资源本身改变。 2、幂等性&#xff1a;对一个接口请求和多次请求返回的资源应该一致。 2xx&#xff1a;成功 4xx&#xff1a;客户端错误。 …
阅读更多...
Spring Boot集成JWT快速入门demo

Spring Boot集成JWT快速入门demo

1.JWT是什么&#xff1f; JWT&#xff0c;英文全称JSON Web Token&#xff1a;JSON网络令牌。为了在网络应用环境间传递声明而制定的一种基于JSON的开放标准(RFC 7519)。这个规范允许我们使用JWT在客户端和服务端之间传递安全可靠的信息。JWT是一个轻便的安全跨平台传输格式&am…
阅读更多...
学习天机04（优惠劵）

学习天机04（优惠劵）

1.使用Redis和Mq优化领取优惠卷的高并发操作 实现思路&#xff1a; 因为领取优惠券的操作&#xff0c;涉及到操作db的操作很多&#xff0c;比如说查询优惠卷&#xff0c;统计已经领取的数量&#xff0c;更新已经发放的数量和新增用户券。所以了防止在高并发的情况下对我们的数…
阅读更多...
【Java+Springboot】------ 通过JDBC+GetMapping方法进行数据select查询、多种方式传参、最简单的基本示例!

【Java+Springboot】------ 通过JDBC+GetMapping方法进行数据select查询、多种方式传参、最简单的基本示例!

一、JDBC如何使用、PostGresql数据库 1、在pom.xml 先引用jdbc组件。 <!--jdbc--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-jdbc</artifactId></dependency> 2、在pom.xml 再引用p…
阅读更多...
Vue基础知识：路由的封装抽离，路由模块的封装抽离的好处是什么？，如何快速的引入组件，基于@指代src目录，从src目录出发找组件

Vue基础知识：路由的封装抽离，路由模块的封装抽离的好处是什么？，如何快速的引入组件，基于@指代src目录，从src目录出发找组件

如果将所有的路由配置都存放在main.js中&#xff0c;是非常有问题的&#xff0c;杂且乱。所以我们要将路由模块进行抽离&#xff0c;这样有利于&#xff1a;拆分模块&#xff0c;利于维护。大致的做法就是将路由相关的东西放到router这个文件夹的index.js中&#xff0c;而将来只…
阅读更多...
机器学习数据预处理—统计分析方法

机器学习数据预处理—统计分析方法

数据预处理 1 数据规范化 量纲&#xff0c;指将一个物理导出量用若干基本量的乘方之积表示出来的表达式。数据的比较需要关注两点——绝对数值和量纲&#xff0c;而特征间因为量纲的存在导致无法直接通过绝对数值比较大小&#xff0c;也就无法判断特征间的重要性。例如若某个…
阅读更多...
【PyQt5篇】和子线程进行通信

【PyQt5篇】和子线程进行通信

文章目录 &#x1f354;使用QtDesigner进行设计&#x1f6f8;和子线程进行通信&#x1f388;运行结果 &#x1f354;使用QtDesigner进行设计 我们首先使用QtDesigner设计界面 得到代码login.ui <?xml version"1.0" encoding"UTF-8"?> <ui …
阅读更多...
File，IO流，递归详解

File，IO流，递归详解

File类 介绍 java.io.File类是Java语言提供了用来描述文件和目录(文件夹)的 构造 方法 注意&#xff1a; 构造方法中通常用的是第一个方法文件和目录可以通过File封装成对象File封装的对象仅仅是一个路径名&#xff0c;它是可以存在的&#xff0c;也可以不存在 绝对路径…
阅读更多...
图片批量高效管理，图片像素缩放支持自定义操作，让图像处理更轻松

图片批量高效管理，图片像素缩放支持自定义操作，让图像处理更轻松

在数字化时代&#xff0c;图片管理成为了我们生活和工作中不可或缺的一部分。无论是个人用户还是企业用户&#xff0c;都需要对大量的图片进行有效的管理和处理。然而&#xff0c;面对众多的图片&#xff0c;如何进行批量管理并对其进行像素缩放成为了一个挑战&#xff0c;该如…
阅读更多...
web学习笔记（五十三）身份认证

web学习笔记（五十三）身份认证

目录 1.Web 开发模式 1.1 服务端渲染的 Web 开发模式 1.2 服务端渲染的优缺点 1.3 前后端分离的 Web 开发模式 1.4 如何选择 Web 开发模式 2. 身份认证 2.1 Session 认证机制 3. 在 Express 中使用 Session 认证 3.1 安装express-session 中间件 3.2 配置 express-ses…
阅读更多...
JVM内存性能调优思路之：通过GC log、Thread Dump 、Heap Dump分析内存使用说明

JVM内存性能调优思路之：通过GC log、Thread Dump 、Heap Dump分析内存使用说明

文章目录 一. 各日志概述1. Garbage Collection Log - 找到GC规律2. 线程转储(Thread dump) - 分析&#xff08;快照&#xff09;线程状态3. 堆转储(Heap dump) - APP某刻内存使用全貌 二. 命令1. 程序的gc日志2. 线程转储3. 堆转储 概述 在 Java 虚拟机中&#xff0c;(GC) Gar…
阅读更多...
linux 文件提权｜属性修改

linux 文件提权｜属性修改

文章目录 suid&#xff08;set uid&#xff09;添加文件属性查看文件属性i &#xff08;immutable&#xff09; umask suid&#xff08;set uid&#xff09; 让文件在执行的时候具有属主&#xff08;对应文件 user &#xff09;的权限 chmod 7744 temp.txt 第一位的7表示权限位…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023