echarts X轴Y轴鼠标滑动放大缩小

代码：

option = {title: {text: '',},tooltip: {trigger: 'axis',},legend: {data: ['叠翠园', '北岳北', '御东学府', '大同大学北', '富力城一期', '煤场院'], // right:'30'},// dataZoom: [{ //  TYPE: 'SLIDER', //  REALTIME: TRUE, //  //移动端展示方式 //  HANDLESIZE: '100%', //滑动条两侧的大小 START: 0, END: 50, // }],//      DATAZOOM: [{//      TYPE: 'INSIDE',//          START: 0,//       END: DATA.LENGTH > 3 ? 35 : 100//   }],dataZoom: [{type: 'slider',start: 0,end: 50,}, // {  type: 'slider',  showDataShadow: false,//  handleIcon: 'path:M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', //   handleSize: '80%' ,//   start: 0, // //   end: data.length > 3 ? 35 : 100 //  },{type: 'inside',orient: 'vertical',// start: 15,// end: 65,}, // { //  type: 'inside', //  orient: 'vertical', // showDataShadow: false, //  // handleIcon: 'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', //     // handleSize: '80%' // }],grid: {left: '3%',right: '4%',bottom: '10%',height: '80%',containLabel: true,},toolbox: {show: true,feature: {// dataZoom: {},// dataView: {readOnly: false},magicType: { type: ['line', 'bar', 'pie'] }, // restore: {}, // saveAsImage: {}},},xAxis: {type: 'category',boundaryGap: false,data: ['10月1日', '10月2日', '10月3日', '10月4日', '10月5日', '10月6日', '10月7日'],markPoint: {data: [{name: '周最高',value: 120,xAxis: 4,yAxis: 120,},],},},yAxis: {type: 'value',},series: [{name: '叠翠园',type: 'line',smooth: true,data: [280, 192, 181, 174, 210, 280, 210],symbolSize: 1,markPoint: {data: [{name: '周最高',value: 120,xAxis: 4,yAxis: 120,},],},},{name: '北岳北',type: 'line',smooth: true,data: [340, 382, 391, 334, 390, 390, 410],symbolSize: 1,markPoint: {data: [{name: '周最高',value: 150,xAxis: 2,yAxis: 150,},],},},{name: '御东学府',type: 'line',smooth: true,data: [100, 132, 101, 154, 190, 130, 210],symbolSize: 1,},{name: '大同大学北',type: 'line',smooth: true,data: [240, 332, 301, 324, 380, 330, 320],symbolSize: 1,},{name: '富力城一期',type: 'line',smooth: true,data: [230, 312, 351, 321, 280, 350, 310],symbolSize: 1,},{name: '煤场院',type: 'line',smooth: true,data: [250, 382, 231, 344, 310, 70, 390],symbolSize: 1,},],
};

echarts X轴Y轴鼠标滑动放大缩小相关推荐

Echarts (option.yAxis) Y轴的属性
Echarts (option.yAxis) Y轴的属性 yAxis: [{show: true, // 是否显示 Y轴type: 'value', //('value''category''tim ...
echarts折线图怎么从y轴开始_基于echarts的双y轴实时更新折线图
一款基于echarts的双y轴实时更新折线图效果,页面加载后开始自动更新数据并绘制对应的折线图,可以点击右上角的按钮:显示数据视图.刷新数据和将数据存储为png的图片. 查看演示下载资源: 46 次 ...
Echarts 柱状图调整 y 轴单位标题与图表之间的距离
Echarts 柱状图调整 y 轴单位标题与图表之间的距离在我们绘制图标的时候,有时 y 轴单位标题的位置距离图标太近,影响美观,如图所示: 我们想把元离图表远一些,怎么操作? option = ...
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向 option1: {color: ['#21E9F6', '#F2CE2E', '#EE2929', '#006DD9', '#1789FF ...
Echarts去除x轴,y轴网格线,网格区域(背景)
每次写到Echarts时,总会忘记去除x轴,y轴网格线,网格区域(背景)是怎么设置的了,在这里记录一下,有个印象 xAxis : [{type : 'value',splitNumber: 2,sca ...
14. echarts画双y轴
用echarts实现双y轴,并且实现指定数据使用y轴参考链接:https://blog.csdn.net/qq_44827865/article/details/107000180 在使用echar ...
设置echarts图表上Y轴的单位
设置echarts图表上Y轴的单位代码如下: yAxis: [{type: 'value',axisLabel: {show: true,interval: 'auto',formatter: '{ ...
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
先详细看一下xAxis和yAxis配置的图表效果下图详细的标注了图表中x轴y轴可见的内容说明一下: x轴y轴在echarts配置项里,从内容上来说大体上没有太大区别,x轴能用的配置项y轴基本也可以 ...
修改echarts的x轴y轴的刻度和刻度线文本颜色和xy轴的轴线颜色和标题title的字体颜色
1,x轴y轴都是一样的: 1.1修改刻度文本颜色: 找到xAxis和yAxis: 添加如下代码:(和data和type同级并列) axisLabel: {show: true,textStyle: { ...

echarts X轴Y轴鼠标滑动放大缩小

echarts X轴Y轴鼠标滑动放大缩小相关推荐

最新文章

热门文章