首页 > 其他分享 >【Echarts】 柱状图折线图X轴随鼠标滑动延伸

【Echarts】 柱状图折线图X轴随鼠标滑动延伸

时间:2023-05-17 12:33:39浏览次数:30  
标签:dataZoom 柱状图 xAxis 折线图 100 Echarts

dataZoom属性://做自适应的时候精良不要使用E charts的interVal属性

 

dataZoom:[
{
  id:'dataZoom',
  type:'inside',
  xAxisIndex:[0],
  filterMode:'none',
  start:xAxis.length>100?100-(60*100/xAxis):0. //从哪个位置开始,自适应位置变化
  end:100 //百分比,100的意思是100%
}
]

 

标签:dataZoom,柱状图,xAxis,折线图,100,Echarts
From: https://www.cnblogs.com/Esai-Z/p/17408264.html

相关文章

  • 【Echarts】饼图pie总结
    center[]:饼图中心的位置,可以是百分比也可以是具体的数值center:['228','142'],radius[]:空心圆环,第一个值是内径,第二个值是外径,中间部分是圆环饼图,可以是具体数值,也可以是百分比radius:['76','100'],avoidLabelOverlap  =true是否启用防止标签重叠策略,默认开启,在标......
  • 【Echarts】tooltip自定义提示框
    1组件可直接使用。2tooltip:{3show:true,4trigger:'axis',5confine:true,6padding:0,7borderWidth:0,8backgroundColor:'rgba(1,1,1,0)',9//axisPointer:{10......
  • echarts电池柱形图
     <divclass="aside-echartslastPosition-wrap"><divclass="echarts"id="lastPositionEchat"ref="lastPositionEchat":style="'height:......
  • 【Echarts】 grid网格
    Echarts网格问题:grid:{//直角坐标系内绘图网格left:'10',//grid组件离容器左侧的距离,//left的值可以是80这样具体像素值,//也可以是'80%'这样相对于容器高度的百分比top:'10',right:'30',bottom:'0',......
  • 【Echarts】渐变色实现方式
    实现方式一:color:{type:'linear',//颜色渐变函数前四个参数分别表示四个位置依次为左、下、右、上x:1,y:1,x2:0,y2:0,colorStops:[{offset:0,color:'#00FF6......
  • 解决Echarts折线图的y轴刻度值与图表渲染不一致的BUG
    目录问题描述:原因分析:解决方案: 最终效果:问题描述:在做Echarts图表时,发现当有多条折线图渲染时,折线图和y轴上面的数字不匹配的bug。如下图所示,本文记录一下解决方案。原因分析:怀疑过因为数据格式不符合标准导致的,通过修改格式发现并没有解决问题。后怀疑是不是配置的原因,经过上网查......
  • 单文件报表:vue + element + echarts + axios
    最近做个专项,需要做结果展示,又不想再搭建个复杂工程,今天尝试了单文件的vue,基本做出来了。效果图参考文档1.自己写的v-charts文档:https://www.cnblogs.com/dannyyao/p/10728210.html2.vue官方文档:https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html#declari......
  • echarts 的使用
    <template>//option通过id行绑定  <divid="myRangChart"style="width:100%;height:300px;">  </div></template><scriptsetup>//option引入全部import*asechartsfrom"echarts"import{onMount......
  • echarts的散点图和中国地图配合使用
    热力图,我觉得也是叫散点图,我做的是分散在地图上面的点,主要效果如下:图是在晚上抄的:主要配置有几个:第一个需要配置两个地图属性,即两个series:series:[{//地图,可以是数组,多个label:{//label就是你地图上展示的名字,比如四川,重庆等等......
  • 几个echarts使用小案例
    1y轴名称放左边、辅助线、时间轴标签、数值轴间隔<divid="main"style="height:400px"></div><script>varchartDom=document.getElementById("main");varmyChart=echarts.init(chartDom);varoption;option={xAxis......