1739496132
2021-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>
评论
所有回答列表(2)
- 等 最代码怎么获取牛币啊?
- 完 谁来告诉我最代码上线的时间,答对者给5牛币,先来先得
- 等 牛友们,大家好,你们做程序员多久了?现在还好吗?
- 完 在微信打开的页面里进行app下载
- 等 最代码2014年欢乐聚声会
- 完 mysql如何查询表数据并且对3个字段降序的SQL?
- 完 最代码牛币机制改革
- 完 成功的在bae上使用了自定义运行环境 jetty+nginx的组合,大家对jetty+nginx优化有哪些心得?
- 完 进来分享一下各位牛牛是如何加入最代码大家庭的?
- 等 为什么java BufferedImage类处理大图直接抛出内存溢出的异常?
- 等 最代码是否开发手机app客户端?
- 完 java程序员学习哪些java的技术?java有哪些框架?都能做哪方面的开发?
- 等 php格式网页文件怎么运行?
- 等 Java volatile值获取的问题
- 等 前端vue,拦截了登录后台后,返回的token,requests拦截token,但是发送请求的时候,就出现跨越异常
- 等 大专本科计算机科班怎么找到Java工作?
- 等 eclipse怎么把三个java swing游戏项目合成一个项目?
- 完 伙伴们,大家都有什么好的解压方式么,分享一下~
- 完 三四线城市,6、7k,运维工作,索然无味,想去辞职上培训,各位牛牛有什么建议嘛
- 等 jsp页面输入中文变成问号
- 等 JPA在线上运行一段时间后报错Caused by: java.lang.IncompatibleClassChangeError: null
- 等 PHP 这个规则用preg_match_all怎么写
- 等 大佬们,有没有知道Alfresco如何配置LDAP登录呢?
- 等 php的install目录是框架带的吗?
相关问答
最近浏览
760423530 LV2
2023年9月12日
youwuzuichen LV10
2023年7月25日
微信网友_6149646991806464
2022年9月26日
暂无贡献等级
406503223 LV5
2022年4月22日
15196326201 LV2
2022年4月7日
Java猴 LV1
2022年3月10日
heifenglei LV7
2022年2月24日
liuqingfang LV2
2021年12月10日
A易指通 LV2
2021年10月21日
jessie_fancy LV1
2021年9月27日