首页 > 其他分享 >echarts的折线图的鼠标滚轮移动不缩放

echarts的折线图的鼠标滚轮移动不缩放

时间:2023-06-06 10:02:17浏览次数:45  
标签:触发 滚轮 鼠标 缩放 折线图 滑动 true echarts

dataZoom:[
{
type: 'slider',
maxValueSpan:5,//显示数据的条数(默认显示10个)
show: true,
yAxisIndex: [0],
left: '93%', //滑动条位置
start:100,//默认为0
end: 70,//默认为100
orient:"vertical",
filterMode: 'empty',
zoomLock:true,
},
{
type: 'inside', //内置滑动,随鼠标滚轮展示
yAxisIndex: [0],
start: 1,//初始化时,滑动条宽度开始标度
end: 100, //初始化时,滑动条宽度结束标度
zoomOnMouseWheel:false, //如何触发缩放。可选值为:true:表示不按任何功能键,鼠标滚轮能触发缩放。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标滚轮能触发缩放。'ctrl':表示按住 ctrl 和鼠标滚轮能触发缩放。'alt':表示按住 alt 和鼠标滚轮能触发缩放。。
moveOnMouseMove:true,
moveOnMouseWheel:true,//鼠标滚轮实现移动
}
]

     

标签:触发,滚轮,鼠标,缩放,折线图,滑动,true,echarts
From: https://www.cnblogs.com/czb1218/p/17459715.html

相关文章

  • echarts 曲线图组件
    样式如图使用:     <echartLine      ref="day30Echat"      :xAxis="timeList"      :xlist="xlist30Day"      :xlist2="xlist230Day"      :smooth="true"     ><......
  • 递归获取省市区的边界信息文件,用于echarts的map地图
    数据来源为阿里云,单个省市区信息可直接在这里面下载:http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5由于需求需要点击省份里面的城市就展示新的城市的地图,所以需要把所有省市区的边界信息json全部下载下来......
  • 关于echarts无法在mounted中渲染的问题
    最初实现:echarts图标被单独作为一个组件引入,通过传入数据来显示。<divclass="echart"><divclass="echarts-cont"><Charts:dataList="list":total="total"></Charts></div>echarts组件代码:exportdefault{name:"......
  • 记录--手把手教你Vue+ECharts+高德地图API实现天气预报数据可视化
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言所谓数据可视化,我们可以理解为从宏观角度来看一眼就能看出来整个数据的占比,走向。对于数据可视化,很多互联网公司是很看重这一块的,包括大厂;就比如阿里的淘宝,双十一的时候往往就需要将消费者的一些数据通过图的......
  • echarts折线图颜色渐变设置
    constcolor1="rgb(229,53,59,0.05)"constcolor2="rgb(229,53,59,0)"series:[{data:[12,30,60,80,100,60,130,12,30,60,80,100,60,130],type:'line',......
  • echarts折线修改鼠标移动上去的内容
    tooltip:{trigger:'axis',backgroundColor:'#FFFFFF',//textStyle:{//color:'#E5353B',//fontSize:'16px'//},for......
  • ECharts点击横坐标事件实现超链接跳转
    需求:微博排行榜,横坐标展示出了微博对应的id,现在需要通过点击横坐标来实现跳转到对应的微博页面。设置横坐标中的triggerEvent属性为true;xAxis:{...triggerEvent:true,...},添加on点击事件。thisChart.on("click",function(params){window.location.......
  • 高分辨率大图像可缩放 Web 查看器的实践
    高分辨率大图像可缩放Web查看器的实践一、使用vips将高分辨率大图像转换为DZI安装vips具体安装步骤请参考libvipsInstall。注意,在windows11中安装v8.14.2版本后,在运行vipsdzsave**.jpgmydz命令时,出现vips:unknownaction"dzsave"报错,解决办法是重装低版......
  • Echarts——如何默认选中图表并显示tooltip
    前言参考资料实现预览地址内容很简单借助于dispatchAction来触发事件;import*asechartsfrom'echarts';varchartDom=document.getElementById('main');varmyChart=echarts.init(chartDom);varoption;option={tooltip:{trigger:'axis'......
  • echarts更新数据后报错 There is a chart instance already initialized on the dom
    产生原因使用Echarts插件的时候,多次加载会出现Thereisachartinstancealreadyinitializedonthedom.的警告,表示DOM上已经初始化了一个图表实例。解决方案定义一个全局变量,在初始化之前先判断该实例是否存在,若存在,先销毁。varmyChart;//全局变量functiondrawChart(......