17394961322021-01-29 16:35:48
等
echarts柱状图鼠标悬浮时样式变化问题
想要的效果,当鼠标悬浮某个柱时,该柱能变宽,变大,但不能超出x轴。
现在的情况是,当鼠标悬浮某个柱时,该柱能变宽,变大,但超出x轴。
源码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>echart 柱状图 带箭头 调整柱子宽度 设置柱子颜色 hover时改变柱子颜色</title> <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 120px;height:80px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { grid: { top: '10%', left: '3%', right: '10%', bottom: '3%', containLabel: false }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu'], axisLabel: { show: false }, axisTick: { show: false }, axisLine: { symbol: ['none', 'arrow'], symbolSize: [5, 7], lineStyle: { color: '#979797' } } }, yAxis: { type: 'value', axisLabel: { show: false }, axisTick: { show: false }, splitLine: { show: false }, axisLine: { symbol: ['none', 'arrow'], symbolSize: [5, 7], lineStyle: { color: '#979797' } } }, series: [{ data: [120, 200, 150, 80], type: 'bar', barCategoryGap:'80%', //调整柱子宽度 itemStyle: { color: '#62A1A9' //设置柱子颜色 }, emphasis: { itemStyle: { color: '#2F4654', //hover时改变柱子颜色 // shadowColor: 'rgba(102,102,102,0.50)', // shadowOffsetX: 0, // shadowOffsetY: 2, // shadowBlur: 6, borderWidth: 4, borderColor: '#2F4654', borderType: 'solid' } }, }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
评论

- 等最代码怎么获取牛币啊?
- 完谁来告诉我最代码上线的时间,答对者给5牛币,先来先得
- 等牛友们,大家好,你们做程序员多久了?现在还好吗?
- 完在微信打开的页面里进行app下载
- 等最代码2014年欢乐聚声会
- 完mysql如何查询表数据并且对3个字段降序的SQL?
- 完最代码牛币机制改革
- 完成功的在bae上使用了自定义运行环境 jetty+nginx的组合,大家对jetty+nginx优化有哪些心得?
- 完进来分享一下各位牛牛是如何加入最代码大家庭的?
- 等为什么java BufferedImage类处理大图直接抛出内存溢出的异常?
- 等最代码是否开发手机app客户端?
- 完java程序员学习哪些java的技术?java有哪些框架?都能做哪方面的开发?
- 等echarts柱状图鼠标悬浮时样式变化问题
- 等swagger 的@ApiModelProperty 注解和 @JacksonXmlProperty 注解不能同时使用
- 等Android Q如何获取所有运行进程的pid cpu 内存占用
- 等内网穿透client报错
- 等navicat要上传图片按加载后老是出现“只允许一个BLOB字段”是怎么回事?
- 等web开发遇到的安全问题
- 等百万级余额更新方案
- 等idea报Error connecting to reason: failed to create a child event loop,必须重启电脑才能正常,请问谁遇到过这样的问题吗?
- 等hibernate+MySQL8一直提示Access denied for user ''@'localhost' (using password: NO)
- 等技术人何去何从?
- 等hibernate我怎么去写自定义sql
- 等jstl的问题 :http://java.sun.com/jsp/jstl/core cannot be resolved in either web.xml or the jar files


暂无贡献等级
212828939 LV123月6日
liupengfei LV73月2日
ilkzyt3月1日
暂无贡献等级
sjshdzdm2月28日
暂无贡献等级
wghai22月27日
暂无贡献等级
ld2805644085 LV12月27日
shoucheng LV192月23日
562650727 LV102月20日
1986hxc LV62月20日