1. How do I move the ECharts chart to the left?

I wrote last week that you can handle the presentation of charts when there is too much data by setting the dataZoom property. Sometimes we might want to have a right-to-left dynamic effect on the chart to make it look less monotonous. In fact, the dataZoom property and timer can be used to achieve the effect shown above.

2. How to write the code?

Let’s go straight to the code:

<! -- Prepare a Dom with size (width and height) for ECharts  <div id="myCharts" style="width: 600px; height:400px;"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.min.js"></script>
  <script type="text/javascript">  var timer = null;  // X-axis data  var xAxisData = ["Our"."16:05."."Closed"."He".Prevailed "Philistine"."18:05"."Nothing"."Product"."Him"."Backs."."A little"."This number"."19:05"."Capacity"."Timnathserah"."PM"."20:05"."5"."20:50."."20:55"."At"."21:05"."Mark"."" "."" "."Not"."No."."Lift up"."" "."Your life"."When"."If"."O"."22:55"."23:10"."Hands on"."Behold,"."30"."23:35"."Now"."23:50"."Had"."00:10"."00:25"."00:30"."00:35"."00:45."."00:50"."01:00"."01:10"."01:30"."01:35"."02:10"."02:15"."Notable day"."02:25"."02:40"."02:45"."03:00"."03:20"."03:35"."03:50"."03:55"."04:00"."04:10"."04:15"."04:20"."04:30."."04:35"."04:50."."04:55"."05:00"."05:05"."05:15"."05:25"."05:30"."05:40"."05:55"."Surf"."06:05"."06:10"."06:20"."06:50"."06:55"."From"."07:05"."07:10"."07:15"."07:25"."07:35"."07:40"."07:45"."07:50"."08:00"."08:10"."08:20"."08:30"."08:40"."Session"."Oneself"."09:05"."09:10"."09:20"."09:35"."09:40"."09:50"."In its"."10:05"."Note"."Man"."10:35"."10:40:"."10:45"."He,".Sqlstate ""."11"."11"."" "."At 12:05." "."12:20"."The word"."Treasure"."12:55"."13:00"."13:05"."" "."Nay"."And"."The plague"."Then"."He"."Passion"."14:45"."15:00"."Sets"."" "."Only"."Then"];  // Series data to render  var seriesData = [0.93.0.69.0.65.0.69.1.21.1.23.0.63.0.62.1.16.0.65.1.16.0.62.0.85.1.26.0.67.0.65.1.33.0.96.0.61.0.8.0.85.0.97.1.14.0.65.0.86.0.95.1.1.1.18.0.62.1.32.1.19.0.68.0.67.0.65.0.68.1.29.0.65.1.13.0.87.0.96.0.64.0.63.1.24.0.66.0.66.0.87.1.13.0.85.0.99.1.05.1.35.1.33.0.67.0.65.0.65.1.02.1.08.0.71.0.65.1.28.1.35.0.77.0.94.1.31.1.11.0.66.0.9.1.32.0.68.0.66.0.72.1.11.0.65.0.64.0.64.0.83.1.24.0.96.1.11.0.64.1.31.0.6.0.62.0.76.0.63.0.82.1.01.1.32.1.24.1.13.0.84.1.2.0.65.0.91.0.79.1.3.1.27.1.18.0.65.0.63.1.17.1.25.0.7.1.21.0.89.1.39.1.02.0.68.0.69.1.04.0.67.1.06.1.31.1.32.1.2.0.68.1.4.1.28.0.9.0.69.1.38.1.13.1.04.0.79.0.71.0.71.1.2.1.38.0.76.1.35.0.82.1.03.1.29.1.49.0.69.0.74.0.75.0.72];  // Initializes the echarts instance based on the prepared DOM  var myChart = echarts.init(document.getElementById('myCharts'));  // Specify the chart configuration items and data  var option = {  tooltip: {  trigger: 'axis'. },  dataZoom: [  {  type: 'slider'. show: false. realtime: true. startValue: 0. endValue: 30.// The initial display of index0-30 data can be set according to your data volume  filterMode: 'none'. }, ]. xAxis: {  show: true. boundaryGap: false. data: xAxisData  },  yAxis: [  {  type: 'value'  }, ]. series: [  {  type: 'line'. itemStyle: {  color: '#188df0'. },  areaStyle: {  / / gradients  color: new echarts.graphic.LinearGradient(0.0.0.1[ {  offset: 0. color: '#188df0'. },  {  offset: 1. color: '#83bff6'. },  ]),  },  data: seriesData  }, ]. };   // Display the chart using the configuration items and data you just specified  myChart.setOption(option);  var startNumber = 0;  // How many pieces of data are there  var xAxisDatalen = xAxisData.length;  The len value can be set according to your quantities. do not exceed the xAxisDatalen value, otherwise it will not move  var len = 30;  timer && clearInterval(timer);  timer = setInterval(function () {  if (startNumber === xAxisDatalen - len) {  startNumber = 0;  }  myChart.dispatchAction({  type: 'dataZoom'. startValue: startNumber,  endValue: startNumber + len,  });  startNumber++;  }, 1000);  </script> Copy the code

Note that the initial endValue must be the same as len, otherwise there will be significant jitter. Also, the len value should not exceed the xAxisDatalen value, that is, the total number of data, otherwise it will not move.

3. Sample code download

Can copy the code to run to check the use effect, also can to making: https://github.com/Jackyyans/code123 download, more examples will be continuously updated, welcome the attention.