一、效果

遇到一个需要固定宽度和对应的背景，背景比柱状要宽一点,并且选中有选中效果阴影
上图：

原本以为直接用官方的就可以了，结果官方的showBackground是不能这是宽度的，与柱状图同等宽度，选中阴影通过axisPointer做出来，没法设置宽度，也是差强人意
官网的是这样的：不符合要求

二、解决方法

到论坛里，看到有人是通过用两个柱状图，用 barGap配置项偏移做出来的
但我我发现，这种方法做出来的，偏移量很难把握，而且他只能是一个柱状图，两个直接gg
最终我采用两x轴分开渲染背景和柱状图，避免柱状图数据被背景数据影响

三、最终效果

option配置项

const data = [120, 200, 150, 80, 70, 110, 130]
const lineData = [150, 230, 224, 218, 135, 147, 260]
const max = data.concat(lineData).reduce((pre, cur) => pre > cur ? pre : cur, 0)
const color = [{type: 'linear',x: 0,x2: 0,y: 0,y2: 1,colorStops: [{offset: 0,color: '#40BDF7',},{offset: 0.5,color: '#40BDF7',},{offset: 1,color: '#3F82F7',},],
}, ]
const option = {color,xAxis: [{type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}, {type: 'category',show: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}],yAxis: {type: 'value',max: max},series: [{data: data,barWidth: 20,type: 'bar'}, {data: lineData,type: 'line'}, {xAxisIndex: 1,itemStyle: {color: 'rgba(180, 180, 180, 0.2)'},data: data.map(() => max),barWidth: 60,emphasis: {itemStyle: {color: {type: 'linear',x: 0,x2: 0,y: 0,y2: 1,colorStops: [{offset: 0,color: 'rgba(64, 247, 176, 0.25)'},{offset: 1,color: 'rgba(17, 34, 64, 0.25)'},],},},},type: 'bar'}]
};

固定宽度柱状图添加固定宽度的背景和选中阴影～echarts奇奇怪怪系列相关推荐

echarts 柱状图柱子改成圆柱体_玩转ECharts之实现“顶端装饰”
前言玩转ECharts系列,主要为大家讲解我们基于ECharts如何实现企业级大屏项目中较为常用的各种"奇奇怪怪"的图表,接下来我们将通过几篇文章从基础图表开始为大家详细讲解实现 ...
R语言ggplot2可视化柱状图添加数值说明并控制文本、数值字体大小、轴标签字体大小实战
R语言ggplot2可视化柱状图添加数值说明并控制文本.数值字体大小.轴标签字体大小实战目录
CSS添加多个背景图片
CSS添加多个背景图片如果给页面添加多个背景,但是,在CSS中一个标记只能用一次background属性. 因此,只有给多个标记添加不同背景来实现,比如,在body标记设置了背景图片的基础上,可以再 ...
wordpress 背景_如何在WordPress中添加全屏背景图片
wordpress 背景 Full screen background image seems to be a new design trend that is becoming fashionabl ...
Hexo博客主题Next添加动态线条背景canvas_nest
欢迎光临我的博客查看最新文章: https://river106.cn Hexo 版本:5.4.0 Next版本:8.7.1 为了美化Hexo博客,可以给博客添加动态线条背景,这里使用canvas_ ...
php添加背景图及设置格式,PHP添加PNG图片背景透明水印操作类定义与用法示例
本文实例讲述了PHP添加PNG图片背景透明水印操作类定义与用法.分享给大家供大家参考,具体如下: 图片相关操作类 class ImageTool { private $imagePath;//图片路径 ...
关于echarts图中的柱状图添加横线问题
echarts图柱状图添加横线先看一下效果图: 话不多说先上代码,看注释应该能看懂点什么. // An highlighted blocklet that = this;let e5Data = t ...
html中加入透明flash动画,HTML Flash透明动画或文字特效添加一幅背景图
this.p={ m:2, b:2, loftPermalink:'', id:'fks_082064083083084066093095086095083084084067083083082065' ...
个性U盘制作（添加图标、背景）
个性U盘制作(添加图标.背景) 添加图标 1.首先选择一个你喜欢的图标,记住,图标的扩展名是.ico. 2.将这个图标文件拷到U盘,并在U盘中新建一个文本文件. 3.在文本文件中写入一下内容:(注意, ...

固定宽度柱状图添加固定宽度的背景和选中阴影～echarts奇奇怪怪系列

一、效果

二、解决方法

三、最终效果

option配置项

固定宽度柱状图添加固定宽度的背景和选中阴影～echarts奇奇怪怪系列相关推荐

最新文章

热门文章