首页 > 其他分享 >数据可视化高级技术Echarts(快速上手&柱状图&进阶操作)

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

时间:2024-04-05 14:29:21浏览次数:30  
标签:10 20 进阶 series 柱状图 设置 type data Echarts

目录

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]
  }
  ]
}

 

标签:10,20,进阶,series,柱状图,设置,type,data,Echarts
From: https://blog.csdn.net/m0_63181360/article/details/137226335

相关文章

  • Python进阶:使用requests库轻松发送HTTP请求并获取响应
    Python进阶:使用requests库轻松发送HTTP请求并获取响应简介:本文将带您深入了解Python中强大的requests库,学会如何使用它发送各种HTTP请求,并轻松获取响应内容。无论您是初学者还是有一定经验的Python开发者,本文都将为您提供实用、详细的指导,助您在网络请求与响应的处理上更上......
  • 分布式进阶(四)——分布式框架之高性能:消息丢失
    作者简介:大家好,我是smart哥,前中兴通讯、美团架构师,现某互联网公司CTO联系qq:184480602,加我进群,大家一起学习,一起进步,一起对抗互联网寒冬学习必须往深处挖,挖的越深,基础越扎实!阶段1、深入多线程阶段2、深入多线程设计模式阶段3、深入juc源码解析阶段4、深入jdk其余源码解析......
  • 分布式进阶(五)——分布式框架之高性能:消息有序性
    作者简介:大家好,我是smart哥,前中兴通讯、美团架构师,现某互联网公司CTO联系qq:184480602,加我进群,大家一起学习,一起进步,一起对抗互联网寒冬学习必须往深处挖,挖的越深,基础越扎实!阶段1、深入多线程阶段2、深入多线程设计模式阶段3、深入juc源码解析阶段4、深入jdk其余源码解析......
  • 第六章 面向对象进阶——6-3 继承
    一,构造方法:this(…)-访问本类构造方法super(…)-访问父类构造方法 二,继承中构造方法的访问特点(理解)注意:子类中所有的构造方法默认都会访问父类中无参的构造方法子类会继承父类中的数据,可能还会使用父类的数据。所以,子类初始化之前,一定要先完成父类数据的初始化,原因......
  • MyDumper/MyLoader的进阶玩法
    一、前言从mydumperv0.11.5版本开始,mydumper提供了--load-data参数,使用此参数导出的sql文件将不再是insert语句,而是loaddata语句。在MySQL官方文档中关于loaddata是这么描述的:Whenloadingatablefromatextfile,useLOADDATA.Thisisusually20timesfasterthanus......
  • Caddy进阶:因为Nginx占用了80和443端口导致Caddy无法启动
    日志里面有个红色的error,表示安装后没有启动caddy的服务。看了很多文章,感觉都没有把我当小白。自己折腾了几个小时,总算搞明白了。1、如果80端口和443端口被其它程序(比如Nginx)占用了,得先卸载Nginx。查看443端口被谁占用了:root@web005:~#sudolsof-i:443COMMANDPIDUSE......
  • Spark进阶(四)Spark性能优化和调优
    一、Spark的性能优化工具和技术Spark的性能优化工具和技术主要包括以下几个方面:数据分区和缓存:合理地将数据进行划分和缓存,可以提高数据的访问效率。可以使用repartition或coalesce进行数据分区,使用persist或cache进行数据缓存。并行度设置:通过调整并行度,可以提高Spark......
  • 加入云原生实战营(星球),带你进阶 Go + 云原生高级开发工程师
    过去1年,趁着闲暇时间,我创建了一个Go+云原生技术学习社群,旨在帮助你快速进阶为Go+云原生高级开发工程师,提高你的职场竞争力、扩展职业宽度,最终谋得一份好差事(进入大厂、升职加薪)。本篇文章,我来详细介绍下云原生实战营知识星球,让你对本知识星球有一个充分的了解,通过这些了......
  • 每日面经分享(python进阶 part2)
    Python中的装饰器和上下文管理器区别是什么?它们分别适用于哪些场景?a.装饰器用于在函数或类的外部添加额外功能,而上下文管理器用于管理资源的获取和释放。b.装饰器是一种用于修改函数或类行为的技术。适用于需要在函数或类的外部添加额外功能的场景,比如日志记录、性能监......
  • Python_matplotlib进阶
    Python_matplotlib跳转链接之前的博客中已经展示了使用python的matplotlib库进行一些基础图像的绘制,本篇进一步展示一些matplotlib中的一些进阶图像绘制。importpandasaspdimportmatplotlib.pyplotaspltplt.rcParams['font.sans-serif']=['SimHei']Titanic=......