current position:Home>Echarts line chart realizes sliding translation. When there are too many abscissa, hide some abscissa, and display the hidden part through sliding translation

Echarts line chart realizes sliding translation. When there are too many abscissa, hide some abscissa, and display the hidden part through sliding translation

2022-05-15 05:15:53A grain of rice

This is HTML Example , It hasn't been made into components yet
 Insert picture description here

<!--
    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/[email protected]/dist/echarts.min.js"></script>
        <!-- Uncomment this line if you want to dataTool extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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/[email protected]/dist/ecStat.min.js"></script>
        -->
        <!-- Uncomment this line if you want to use map
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/map/js/china.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]{
    {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  Built in data area scaling component   Built in  1 translation : Slide and drag in the coordinate system to translate the data area .2 The zoom :PC End : The mouse scrolls the wheel within the coordinate system (MAC The touch panel is similar to ; Mobile : On the touch screen of the mobile terminal , Support two finger sliding and scaling .
  dataZoom: [
    {
    
      type: 'inside', //1 translation   The zoom 
      throttle: '50', // Set the frequency at which the view refresh is triggered . The unit is millisecond (ms).
      minValueSpan: 6, // The minimum value used to limit the window size , On the category axis, it can be set to  5  Express  5  A category 
      start: 1, // The starting percentage of the data window range   The scope is :0 ~ 100. Express  0% ~ 100%.
      end: 50, // End percentage of data window range . The scope is :0 ~ 100.
      zoomLock: true // If set to  true  Then lock the size of the selection area , in other words , Can only pan , You can't zoom .
    }
  ],
  //  It is mainly used to control the blank space around the chart 
  grid: {
    
    left: '15%',
    top: '10%'
  },

  //  Prompt box components 
  tooltip: {
    
    trigger: 'axis', // Axis trigger , Mainly in the histogram , Line chart and so on will use the category axis in the chart to use .
    backgroundColor: '#505050', // The background color of the floater in the prompt box .
	textStyle:{
    
		  color: '#ffffff' //  The color of the axis line .
	},
  
    //  Customize the content of the prompt box 
    formatter: function (params, ticket, callback) {
    
      var text = params[0].data.date + ': ' + params[0].data.value;
      return text;
    },
	   position: function (point, params, dom, rect, size) {
    
	       //  Fixed on top 
	       return 'top';
	   }
	
  },
  // Rectangular coordinate system  grid  Medium  x  Axis ,
  xAxis: {
    
    type: 'category', //'category'  Taxonomic axis , It is applicable to discrete category data , For this type, you must pass  data  Set category data .
    nameTextStyle: {
    
         fontSize: 30
       },
	//  Coordinate axis related settings 
    axisLine: {
    
      lineStyle: {
    
        color: '#E5E5E5' //  The color of the axis line .
      }
    },
	
    //  Axis scale label ( category , In short, it is x What's on the axis ) Related Settings 
    axisLabel: {
    
      //  Whether to display coordinate scale label ( This indicates whether to display x Month on axis )
      show: true,
      //  The color of the label text 
      color: '#000000'
    },
	
	axisPointer: {
    
	  // Remove the moving indicator line 
	  type: 'line',
	  // snap: true,
	  handle: {
    
	    show: true,
	    color: '#969696',
		size:20
	  }, 
	},
    //x Axis tick mark setting 
    axisTick: {
    
      show: true
    },
    //  Category data , In the category axis (type: 'category') Effective in .
    data: [
      '1 month ',
      '2 month ',
      '3 month ',
      '4 month ',
      '5 month ',
      '6 month ',
      '7 month ',
      '8 month ',
      '9 month ',
      '10 month ',
      '11 month ',
      '12 month '
    ]
  },
  // Rectangular coordinate system  grid  Medium  y  Axis ,
  yAxis: {
    
    type: 'value', //'value'  Value axis , For continuous data .
    //  Coordinate axis related settings 
    axisLine: {
    
      show: false //y Axis disappearance 
    },
    //  Axis scale label ( category , In short, it is x What's on the axis ) Related Settings 
    axisLabel: {
    
      show: true,
      //  The color of the label text 
      color: '#999'
    },
    //y Axis tick mark setting 
    axisTick: {
    
      show: false
    },
    splitNumber: 5 // The number of segments of the axis , It should be noted that the number of segments is only an estimate , Finally, the number of segments actually displayed will be adjusted according to the readability of the coordinate axis scale display after segmentation . Invalid in category axis .
  },
  series: [
    {
    
      type: 'line', // A line chart is a chart that uses a line to connect data point markers , Used to show the changing trend of data . And global settings type The effect is the same , Represents a line chart 
      //  Array of data contents in the series . Array items are usually specific data items .
      data: [
        {
    
          value: 1222,
          date: '2019 year 1 month '
        },
        {
    
          value: 1020,
          date: '2019 year 2 month '
        },
        {
    
          value: 1070,
          date: '2019 year 3 month '
        },
        {
    
          value: 1001,
          date: '2019 year 4 month '
        },
        {
    
          value: 1800,
          date: '2019 year 5 month '
        },
        {
    
          value: 1200,
          date: '2019 year 6 month '
        },
        {
    
          value: 1300,
          date: '2019 year 7 month '
        },
        {
    
          value: 1030,
          date: '2019 year 8 month '
        },
        {
    
          value: 1050,
          date: '2019 year 9 month '
        },
        {
    
          value: 1800,
          date: '2019 year 10 month '
        },
        {
    
          value: 1003,
          date: '2019 year 11 month '
        },
        {
    
          value: 1070,
          date: '2019 year 12 month '
        }
      ],
      //  The style of broken lines 
      lineStyle: {
    
        color: '#ffaa00',
        width: 1
      },
      //  The style of the inflection point of the polyline 
      itemStyle: {
    
        normal: {
    
          //  At rest :
          color: '#ffaa00'
        },
        emphasis: {
    
          //  When the mouse passes :
          color: '#ffaa00'
        }
      },
      symbol: 'emptyCircle', // Inflection point style 
      symbolSize: 6 // Inflection point size 
    }
  ]
};

if (option && typeof option === 'object') {
    
    myChart.setOption(option);
}

        </script>
    </body>
</html>
    

Make components later .

copyright notice
author[A grain of rice],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/131/202205111246439718.html

Random recommended