Echarts 配置项 series 中的 data 是多维度

已于 2024-03-06 10:25:40 修改
阅读量1k 收藏 10
点赞数 11
分类专栏： 数据可视化开发 文章标签： echarts 前端 javascript
于 2024-03-06 09:29:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53810245/article/details/136496280
版权

文章目录

需求

如下图数据格式所示，现要求按照该格式进行绘制折线图
在这里插入图片描述

在这里插入图片描述

分析

在绘制折线图时，通常我们的 series 中的 data 数据是这样的格式

option = {
   
  title: {
   
    text: 'Stacked Area Chart'
  },
  tooltip
了解本专栏 订阅专栏 解锁全文 超级会员免费看
博客zhu虎康
关注
  • 11
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
echarts 配置项 series 中的data 多维度
weixin_33898876的博客
12-04 2290
//系列中的数据内容数组。数组项通常为具体的数据项。 //通常来说，数据用一个二维数组表示。如下，每一列被称为一个『维度』。 series: [{ data: [ // 维度X 维度Y 其他维度 ... [ 3.4, 4.5, 15, 43], [ 4.2, 2.3, 20, 91], ...
ECharts配置项.md
04-22
ECharts配置项.md
echarts配置项讲解
qq_38053677的博客
10-22 1056
echarts笔记
Echarts中series、option、component究竟是啥？
sd6022的博客
12-28 8855
Echarts创建 一个网页中可以创建多个echarts图例。一个DOM节点可作为echarts的渲染容器。每个DOM节点只能放一个echarts实例。 series 系列 一个系列至少包含的要素为：一组数值，图表类型（series.type），以及其他的关于这些数据如何映射成图的参数。 图表类型 echarts中的图表类型主要为：line-折线，bar-柱状图，pie-饼图，scatter-散点图，graph-关系图，tree-树图，等等 类同地，系列的数据从dataset中获取的另一种配置方式。 c
pandas中的数据结构Series和DataFrame
oyall520的博客
03-30 568
一、Series类 1. 创建一个Series对象 通过 pandas.Series 来创建Series数据结构 pandas.Series(data, index, dtype, name) data可以为列表，array或者dict； index表示索引，必须与数据同长度； name代表对象的名称 import numpy as np import pandas as pd ser...
Echarts--series--data自定义
最新发布
Z_Wonderful的博客
07-25 982
【代码】Echarts--series--data自定义。
获得echarts饼图需要的series中的data格式
rxt2012kc的博客
04-11 1万+
需求格式series中的dataseries : [ { name: '风险等级', type: 'pie', radius: '55%', center: ['50%', '60%'], /* data: [ {value:300, name:'0~5'}, {v
echarts_series总结
王轩的博客
12-20 3万+
echarts_series总结 echarts官网实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>echarts</title> <script src="./static/echarts.min.js"></script> </head> <body> &l
Echart 饼状图，柱状图series.data数据动态设置
热门推荐
u011287126的专栏
03-23 3万+
echart 动态绑定数据，动态设置数据 关于echart的饼状图的数据参数主要在option中设置，我们需要根据自己的要求来设置 有时需要从数据库中取得数据然后设置。因此就涉及动态设置参数的问题。 option.xAxias[0]['data']=data; mychart.setOption(option);
echart.js给series,xAxis中的data动态赋值(三种方式)
yehaocheng520的博客
05-08 2万+
最近用echart.js比较多，感觉我的js技能又加深了…… 给echart中的x轴或者series动态赋值，是echart的基本操作： 场景： //引入echart.js 下面的是引入的本地文件 <script src="~/yisha/js/echarts.min.js"></script> //获取图表的容器：dom 并初始化 var myChart = echarts.init(document.getElementById("skuId")); //配置项初始化 因为我
Echarts3配置项手册离线网页版
02-06
完整拷贝官网配置项页面,彻底离线查询各个配置项.........
Echarts-配置项手册.zip
10-24
百度echart4.x版本配置手册离线版本。用于数据可视化，便于数据分析分析展示。PDF格式。
ECharts3 配置项手册part5
03-02
根据百度ECharts3官方文档整理而成，便于离线使用和查阅，由于上传大小的限制，该手册被分成了5部分。
echarts配置项详细解释.pdf
07-13
apache echarts配置项详细解释
ECharts配置项（内容）.md
04-22
ECharts中配置项总结，方便查看
echarts的series——折线图，饼图，柱状图，散点图的配置
杜永康的博客
03-22 9248
Line（折线图）：用于展示数据随时间或其他变化而变化的趋势。 Bar（柱状图）：用于展示数据的大小或数量的差异。 Scatter（散点图）：用于展示两个变量之间的关系。 Pie（饼图）：用于展示数据的占比关系。 Radar（雷达图）：用于展示多个变量之间的关系。 Map（地图）：用于展示地理位置上的数据分布。 Tree（树图）：用于展示层级结构数据的关系。 Heatmap（热力图）：用于展示数据密度分布。
Highcharts图表中数据data的三种表达方式
weixin_30439067的博客
02-23 720
　　series:[{data:[]}]中的data有三种表达方式： 数字数组例如data:[2,4,8]，数组中的数字可以理解为y轴的值，图表的x值将会自动计算（从0开始递增，步长为1，或者是由plotOptions中的pointStart和pointInterval指定），如果xAxis坐标轴有categories，则将自动分配数组中的每个值给每个category。 <h...
echarts图表使用-折线图的属性
楠楠子鱼的博客
07-28 414
1.折现图中，相关参数记录 title-text：显示标题，title-left:center：可居中文字，grid-top：调整上高度，tooltip-formatter：重设鼠标指示显示文字。 为实现以下类似功能，需要设置tooltip-formatter： this.chart.setOption({ title: { text: '记录' // left: 'center', // alig..
echarts series data中的value字段怎么改成其他名称
05-31
在Echarts中，`series`中的`data`数据项对象中的`value`字段是默认的数据项数值属性名，如果需要将其改成其他名称，可以通过在`option`中定义`visualMap`组件，或者在`series`中的`encode`属性中进行配置。 下面是两种方法的具体实现： - 方法一：通过`visualMap`组件进行配置 ```javascript option = { visualMap: { dimension: 1, // 指定用于映射的数据维度 seriesIndex: 0, // 指定映射到哪个系列中的数据项 text: ['高', '低'], // 显示的文本 inRange: { color: ['#e0ffff', '#006edd'] // 映射到的颜色范围 } }, series: [{ type: 'map', map: 'china', data: [ {name: '北京', val: 100}, {name: '上海', val: 50}, {name: '广州', val: 70}, {name: '深圳', val: 80}, {name: '重庆', val: 60}, {name: '天津', val: 90} ] }] } ``` 在上述代码中，我们通过定义`visualMap`组件，指定了要映射的数据维度为`1`，也就是`data`中每个对象的第二个属性，即`val`属性，这样就把`data`中的`value`字段替换成了`val`字段。 - 方法二：通过`encode`属性进行配置 ```javascript option = { series: [{ type: 'map', map: 'china', encode: { value: 2 // 将数据项中第三个属性映射到数值上 }, data: [ {name: '北京', value: 100, other: 'abc'}, {name: '上海', value: 50, other: 'def'}, {name: '广州', value: 70, other: 'ghi'}, {name: '深圳', value: 80, other: 'jkl'}, {name: '重庆', value: 60, other: 'mno'}, {name: '天津', value: 90, other: 'pqr'} ] }] } ``` 在上述代码中，我们通过在`series`中的`encode`属性中对`value`进行配置，将数据项中第三个属性（即`other`属性）映射到数值上，这样就把`data`中的`value`字段替换成了`other`字段。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

博客zhu虎康

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值