echarts柱状图x，y轴对应多条数据(可自定义)
echarts，x，y轴对应多条数据，y轴取反就行
先说需求，我做这个图表是多个物流商对应不同月份的数值
配置项option
option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {data: ['2021-07', '2021-11', '2021-12', '2022-01'] // 换接口的值},xAxis: [{type: 'category',axisTick: { show: false },data: ['物流商1', '物流商2', '物流商3', '物流商4', '物流商5'] // 换接口的值}],yAxis: [ // 如果是y轴显示，将上面xAxis里的值互换一下就行了{type: 'value'}],series: [ // 循环接口的值，也就是legend里的data数据{name: '2021-07',//legend里的data数据分别渲染上去type: 'bar',barGap: 0,label: { // 在柱状图上面显示show: true,position: 'top'},emphasis: { // 这个属性是强调，突出的focus: 'series'},data: [113, 113, 113, 334, 390] // 换接口的值},{name: '2021-11',type: 'bar',label: {show: true,position: 'top'},emphasis: {focus: 'series'},data: [220, 182, 191, 234, 290]},{name: '2021-12',type: 'bar',label: {show: true,position: 'top'},emphasis: {focus: 'series'},data: [150, 232, 201, 154, 190]},{name: '2022-01',type: 'bar',label: {show: true,position: 'top'},emphasis: {focus: 'series'},data: [98, 77, 101, 99, 40]}]
};
循环月份批量生产数据，对应series的数据，数据格式可根据自己风格来定
let mmm = temp.shippingCompany0.map(item => item.deliverMonth)
seriesValue = mmm.map((key, index) => {return {name: key,type: 'bar',label: {show: true,position: 'top'},barMaxWidth: 36, // 柱图宽度data: Object.keys(temp).map(key => temp[key][index].effectRate)}
})
// series: seriesValue
echarts柱状图x，y轴对应多条数据(可自定义)相关推荐
- Echarts 柱状图调整 y 轴单位标题与图表之间的距离
Echarts 柱状图调整 y 轴单位标题与图表之间的距离 在我们绘制图标的时候,有时 y 轴单位标题的位置距离图标太近,影响美观,如图所示: 我们想把 元 离图表远一些,怎么操作? option = ...
- echarts折线图怎么从y轴开始_基于echarts的双y轴实时更新折线图
一款基于echarts的双y轴实时更新折线图效果,页面加载后开始自动更新数据并绘制对应的折线图,可以点击右上角的按钮:显示数据视图.刷新数据和将数据存储为png的图片. 查看演示 下载资源: 46 次 ...
- Echarts (option.yAxis) Y轴 的属性
Echarts (option.yAxis) Y轴 的属性 yAxis: [{show: true, // 是否显示 Y轴type: 'value', //('value''category''tim ...
- 14. echarts画双y轴
用echarts实现双y轴,并且实现指定数据使用y轴 参考链接:https://blog.csdn.net/qq_44827865/article/details/107000180 在使用echar ...
- 设置echarts图表上Y轴的单位
设置echarts图表上Y轴的单位 代码如下: yAxis: [{type: 'value',axisLabel: {show: true,interval: 'auto',formatter: '{ ...
- ECharts 柱状图横轴(X轴)文字内容显示不全
1.问题描述 ECharts在限制显示区域大小或者数据内容过多的时候有时会使得柱状图横轴(X轴)显示不全的问题,效果如下图所示. 2.解决办法 1)更改grid布局 原来布局 option = {gr ...
- R语言head函数和tail函数获取dataframe、列表list、向量vector的头部和尾部数据：tail提取数据对象的尾部数据、head提取数据对象的头部数据、默认6条数据、自定义设置返回条数
R语言head函数和tail函数获取dataframe.列表list.向量vector的头部和尾部数据:tail提取数据对象的尾部数据.head提取数据对象的头部数据.默认6条数据.自定义设置返回条数 ...
- echarts柱状图的x轴（刻度、标签名、刻度线），y轴（单位、刻度线样式（虚线、实线、）、字体样式（颜色、大小），图例排列 、柱状宽度、颜色，柱状背景）完整的柱状图
完整的数据大屏柱状图要从哪些方面考虑 1.x轴要考虑那些? 1. 标签文字要不要 2.刻度要不要 3.x轴的颜色要不要 例子三要素 代码对应的是我上面最终的样式 xAxis: [{type: &quo ...
- echarts柱状图的X轴Y轴加单位的写法
yAxis : [{type : 'value',axisLabel:{formatter:'{value} %'}}], 如果想控制百分比最大到100% 可添加 yAxis : [{type : ' ...
最新文章
- Spring4实战学习笔记
- 基于sharepoint 2003的内容管理1.0
- Linux下运行C语言程序
- java创建二叉树并递归遍历二叉树
- iOS：弹出窗控制器：UIPopoverController
- 《Swift编程语言教程》中文翻译及读书笔记page21
- 硬盘重新分区后有一个分区表信息丢失的数据恢复
- uvalive5092(找规律)
- QT的QAssociativeIterable类的使用
- redux中间件的用法
- python集合用法_Python 集合(Set)
- html5的高级选择器,web@css高级选择器(after，befor用法),基本css样式
- java仓库管理实验报告,基于java的仓库管理系统.doc
- 深度学习---之显存单位，KiB,MiB与MB区别
- abaqus截面惯性矩_各种截面的惯性矩怎么计算？
- java实现，获取今日0时0分0秒(最小时间)-获取今日23时59分59秒(最大时间) -线程安全方法
- 校园网络设备巡检的准备工作
- html页面在ie上出现404怎么解决,ie浏览器网页上有错误解决方法详解
- JavaWeb（狂神老师上课笔记）
- mac 终端 创建java文件_第一个 终端Java程序 （Mac）