echarts折线图实现滑动平移，横坐标过多时隐藏部分横坐标，通过滑动平移显示隐藏的部分

这个是HTML的实例，还没做成组件

<!--THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch
-->
<!DOCTYPE html>
<html style="height: 100%"><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"></head><style type="text/css"></style><body style="height: 560px; margin: 0" class="content"><div id="container" style="height: 20rem;"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script><!-- Uncomment this line if you want to dataTool extension<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/extension/dataTool.min.js"></script>--><!-- Uncomment this line if you want to use gl extension<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>--><!-- Uncomment this line if you want to echarts-stat extension<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>--><!-- Uncomment this line if you want to use map<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/map/js/china.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/map/js/world.js"></script>--><!-- Uncomment these two lines if you want to use bmap extension<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@{{version}}/dist/extension/bmap.min.js"></script>--><script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var option = {//dataZoom-inside 内置型数据区域缩放组件 所谓内置 1平移：在坐标系中滑动拖拽进行数据区域平移。2缩放：PC端：鼠标在坐标系范围内滚轮滚动（MAC触控板类同;移动端：在移动端触屏上，支持两指滑动缩放。dataZoom: [{type: 'inside', //1平移 缩放throttle: '50', //设置触发视图刷新的频率。单位为毫秒（ms）。minValueSpan: 6, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目start: 1, //数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。end: 50, //数据窗口范围的结束百分比。范围是：0 ~ 100。zoomLock: true //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。}],// 主要用来控制图表四周留白grid: {left: '15%',top: '10%'},// 提示框组件tooltip: {trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。backgroundColor: '#505050', //提示框浮层的背景颜色。textStyle:{color: '#ffffff' // 坐标轴线线的颜色。},// 自定义提示框内容formatter: function (params, ticket, callback) {var text = params[0].data.date + ': ' + params[0].data.value;return text;},position: function (point, params, dom, rect, size) {// 固定在顶部return 'top';}},//直角坐标系 grid 中的 x 轴，xAxis: {type: 'category', //'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。nameTextStyle: {fontSize: 30},// 坐标轴轴线相关设置axisLine: {lineStyle: {color: '#E5E5E5' // 坐标轴线线的颜色。}},// 坐标轴刻度标签(类目,简单说就是x轴上的内容)的相关设置axisLabel: {//  是否显示坐标刻度标签(这了指是否显示x轴上的月份)show: true,// 标签文字的颜色color: '#000000'},axisPointer: {//去掉移动的指示线type: 'line',// snap: true,handle: {show: true,color: '#969696',size:20}, },//x轴刻度线设置axisTick: {show: true},// 类目数据，在类目轴（type: 'category'）中有效。data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']},//直角坐标系 grid 中的 y 轴，yAxis: {type: 'value', //'value' 数值轴，适用于连续数据。// 坐标轴轴线相关设置axisLine: {show: false //y轴线消失},// 坐标轴刻度标签(类目,简单说就是x轴上的内容)的相关设置axisLabel: {show: true,// 标签文字的颜色color: '#999'},//y轴刻度线设置axisTick: {show: false},splitNumber: 5 //坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整.在类目轴中无效。},series: [{type: 'line', //折线图是用折线将各个数据点标志连接起来的图表，用于展现数据的变化趋势。和全局设置type效果一样,表示折线图// 系列中的数据内容数组。数组项通常为具体的数据项。data: [{value: 1222,date: '2019年1月'},{value: 1020,date: '2019年2月'},{value: 1070,date: '2019年3月'},{value: 1001,date: '2019年4月'},{value: 1800,date: '2019年5月'},{value: 1200,date: '2019年6月'},{value: 1300,date: '2019年7月'},{value: 1030,date: '2019年8月'},{value: 1050,date: '2019年9月'},{value: 1800,date: '2019年10月'},{value: 1003,date: '2019年11月'},{value: 1070,date: '2019年12月'}],// 折线条的样式lineStyle: {color: '#ffaa00',width: 1},// 折线拐点的样式itemStyle: {normal: {// 静止时：color: '#ffaa00'},emphasis: {// 鼠标经过时：color: '#ffaa00'}},symbol: 'emptyCircle', //拐点样式symbolSize: 6 //拐点大小}]
};if (option && typeof option === 'object') {myChart.setOption(option);
}</script></body>
</html>

晚点做成组件。

echarts折线图实现滑动平移，横坐标过多时隐藏部分横坐标，通过滑动平移显示隐藏的部分相关推荐

Echarts折线图的平移假动画
Echarts折线图的平移假动画 #可视化项目中经常用图表的方式来展示数据,折线图是经常出现的,但是在echarts折线图中正常情况是通过删除数据的第一个,添加一个新数据在数组的末尾来实现动画,此动画 ...
Echarts折线图属性设置大全
Echarts折线图属性设置大全 var option = {backgroundColor: '#FFF0F5',title: {text: '折线图',subtext: '模拟数据',x: 'ce ...
echarts 折线图 + 柱状图
Echarts 常用各类图表模板配置注意: 这里主要就是基于各类图表,更多的使用 Echarts 的各类配置项: 以下代码都可以复制到 Echarts 官网,直接预览: 图标模板目录 Echarts ...
d3.js 教程模仿echarts折线图
今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...
echarts折线图默认显示最后一个点的数据
echarts折线图默认显示最后一个点的数据想要达到这种效果图如下: 如果你给折线图设置数据显示,那么要不就全部隐藏,要不就全部显示在折线上.实现指定点的显示就需要你自己去处理这个数据了. 方式有两 ...
echarts折线图设置圆点_echarts 设置折线图单个数据小圆圈样式
在使用echarts 折线图时,可能会遇到针对不同的数据显示不同的小圆点样式,经过查看echarts配置项,其中data中有一个value配置项选项,可以单独设置某一个数据的显示样式,具体使用方式如下 ...
echarts 折线图折线从头开始
在echarts折线图中,默认折线从刻度中心开始,我们为了图标的美观有时需要折线从头开始显示,一个配置项就可以轻松搞定. boundaryGap:false
echarts折线图折现下方显示阴影
echarts折线图折现下方显示阴影实现echarts折现下方显示渐变阴影区域代码: series: [{name: this.chartPropList[this.dataResource]. ...
echarts折线图动态多条线
echarts折线图配置项由于工作中遇到的图表特别多,每次用过配置项总是想不起来,在这里记录一下,希望也可以帮到路过的你.话不多说我们上图: 左边的是设计稿,右边的是echarts的示例图,我们先找 ...
e-charts折线图自适应外层div大小
问题描述: 在tabs页签下使用e-charts折线图,切换tab页签e-charts折线图无法自适应外层div大小: 解决方案: 添加监听器监听浏览窗口变化,两种监听方法 window.addEve ...

echarts折线图实现滑动平移，横坐标过多时隐藏部分横坐标，通过滑动平移显示隐藏的部分

echarts折线图实现滑动平移，横坐标过多时隐藏部分横坐标，通过滑动平移显示隐藏的部分相关推荐

最新文章

热门文章