Echarts基础学习 2-Series

于 2024-06-05 16:30:58 发布
阅读量257 收藏 1
点赞数 8
分类专栏： Echarts 文章标签： echarts 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qkdgz/article/details/139475709
版权

series

series是的属性非常多，并且其他的模块的属性也可以在此进行配置。比如X轴的data可以从这里获取。

对于一些常见的配置还是要熟悉，不理解的地方可以直接在官网查阅文档，并在案例图进行编辑，查看配置结果

案例选自官网示例图——渐变堆叠面积图

从案例代码中可以看出，在series数组中有5条元素，对应的是图表中的5个折线，所以每个折线的属性可以通过对应的元素进行配置。

在这里插入图片描述

stack 堆叠

stack 选项的值没有固定数量的限制，字符串类型，相同的值会进行堆叠在同一组

从图中可以看出Line 5的值为 302，但其位置却在 1400 多，所以stack的作用是将不同系列的数据堆叠起来。使用柱形图可以更好理解stack的作用

在这里插入图片描述

emphasis 高亮提示

在这里插入图片描述

color 颜色渐变

请直接阅读官网文档——option.color

翻斗花园正门保安小夏
关注
  • 8
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Echarts学习之四：series-pie饼图_echarts里的pie可以倾斜吗
2401_84418883的博客
04-28 987
mypoint={symbol:“pin”, //图形 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’symbolSize:50, //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。symbolRotate:0, //标记的旋转角度。
Echarts中常用的参数总结以及参数自定义示例_echarts series参数
最新发布
2301_76379606的博客
04-29 405
scale: true, // 设置数据自动缩放，要不然数据多的话就堆一块了。itemWidth: 10, // 设置宽度。itemHeight: 10, // 设置高度。itemGap: 40 // 设置间距。name: “答辩评分”,
echarts的series——折线图，饼图，柱状图，散点图的配置
杜永康的博客
03-22 1万+
Line（折线图）：用于展示数据随时间或其他变化而变化的趋势。 Bar（柱状图）：用于展示数据的大小或数量的差异。 Scatter（散点图）：用于展示两个变量之间的关系。 Pie（饼图）：用于展示数据的占比关系。 Radar（雷达图）：用于展示多个变量之间的关系。 Map（地图）：用于展示地理位置上的数据分布。 Tree（树图）：用于展示层级结构数据的关系。 Heatmap（热力图）：用于展示数据密度分布。
Echarts中的series设置stack参数
qq_41700374的博客
02-13 1万+
Echarts中series设则stack参数
echarts---series
weixin_43390711的博客
05-23 2343
一、series (Array[object]) // 1、type 指定图表的类型 // 2、name 指定系列的名称，用于tooltip中的显示和legend图例筛选 // 3、symbol 标记的图形，用于legend的标记 预定义值：circle、rect base64格式的图片：'image://data:image/gif;base64,xxxxxxxxxxx' // 4、data （Array[object]） 当前系列的一组数据 data: [ { .
echarts中的stack参数
renaissance79的博客
03-22 1万+
在echarts中series里有个参数stack： 用于数据堆叠，同个类目轴上，系列配置相同的stack，后一个系列的值会加在前一个系列之后，如图： series部分代码： series: [{ type: 'bar', stack: 'Total1', itemStyle: { borderColor: 'transparent', color: 'transparent' }, emphasis: { itemSt
数据可视化高级技术Echarts(堆叠柱状图)
m0_63181360的博客
04-08 4202
下面定义了五种数据，分别定义了五个不太的名字来设定，再分别在各个数据下设定stack（名称为total）更改为三列，即设置三个不同的stack名称（total，total11，total22）即在series中将设置stack即可。其他设置与普通柱状图相同，语法：相同名称的数据会堆叠起来，不同则会新生成一列。数据堆叠，同个类目轴上系列配置相同的。相同（相同的堆叠，不同的新生成一列）stack名称相同（直接堆叠）类型的类目轴上，不持。stack:"名称"
echarts最新版4.2.0-rc.2
10-23
在深入探讨 ECharts 4.2.0-rc.2 的知识点之前，我们先了解一下 ECharts 的基础概念。 ECharts 是百度开发的一款轻量级、高性能的数据可视化图表库，支持丰富的图形类型，包括折线图、柱状图、饼图、散点图、地图等...
echarts-for-weixin-master.zip
04-15
这个组件是ECharts在微信小程序中运行的基础，它是专门为微信小程序设计的一个轻量级的渲染层。`ec-canvas`能够将ECharts的渲染过程与微信小程序的渲染层进行桥接，使得ECharts可以在这个特殊的环境下正常工作。在...
echarts-doc-gh-pages.zip
10-27
2. **示例代码**：官方示例展示了ECharts的多种用法，涵盖了基础图表如折线图、柱状图、饼图，以及复杂图表如热力图、散点图、地图等。通过这些实例，我们可以学习如何加载ECharts库，初始化图表，以及如何与用户...
echarts 属性全动态设置 数据动态绑定
07-31
java实现对echarts 属性全动态设置 数据动态绑定。封装echarts 的绘图方法，使得js只需要getLine（data），getBar（data）等就可以绘制图形。echarts上的所有属性都可以在java中设置。
echarts里面常用的属性
qq_39039128的博客
02-26 3762
option = { tooltip:{ //提示框浮层 // position:[10,10], //默认是在同一个地方的 formatter:'{c}', //{a} 系列名 series[0].name {b} 横坐标 {c} 纵坐标 // backgroundColor:'blue', //背景颜色 }, le...
【Echarts】配置项 之 series
Fulling的博客
07-01 6078
箱型图、箱线图，是一种用作显示一组数据分散情况资料的统计图。数图、主要用来可视化树形数据结构，是一种特殊的层次类型，具有唯一的根节点，左子树和右子树。主题河流，是一种特殊的流图, 它主要用来表示事件或主题等在一段时间内的变化。路径图，用于带有起点和终点信息的线数据的绘制，主要用于航线、路线可视化。旭日图，由多层的环形图组成，在数据结构上，内圈是外圈的父节点。直角坐标系上的散点图可以用来展示数据的 x、y 之间的关系。雷达图，主要用于表现多变量的数据，例如属性分析。关系图，用于展现节点与节点之间的关系数据。
echarts设置之stack参数
夏已微凉、
12-20 1万+
echarts设置之stack参数 1、效果 2、代码（复制可用） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl...
Echarts横向柱状图：叠加、堆叠(stack)以及点击事件
热门推荐
qq_42396791的博客
10-10 1万+
html <div class="box" id="echartModel" style="background-color: #191e3e;"></div> js $(function(){ var myChart = echarts.init(document.getElementById('echartModel')); opti...
echarts基本属性大全
weixin_46518533的博客
07-06 9748
echarts基本属性大全 // 全图默认背景  //backgroundColor:"#fff000",        //设置背景颜色,注意是逗号 backgroundColor:“rgba(0,0,0,0.1)”,  // 第四个参数是设置透明度 // 图表标题 title: {  text:“图表标题”,  // 标题内容     x: ‘left’,        // 水平安放位置，默认为左对齐，可选为：                       // ‘center’ ¦ ‘left’ ¦ 
echarts仅作个人临时笔记 stack属性防止堆叠颜色 symbol: ‘none‘取消折点圆圈
weixin_43914278的博客
10-28 716
option = { title: { text: 'Rainfall and Flow Relationship', left: 'center' }, grid: { bottom: 80 }, toolbox: { feature: { dataZoom: { yAxisIndex: 'none' }, restore: {}, saveAsImage: {} } },
《前端》Echarts--stack--实现堆叠功能--待处理--2020年9月26日
BelleDiao的博客
04-26 1149
实现堆叠的核心是 stack 属性！只要两个柱状图的stack值相同，就会堆叠在一起，否则就会并排放置。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值