[GitHub] [incubator-echarts] suplex2825 opened a new issue #11629: Changing echart value at x coordinate

[GitBox <gi...@apache.org>]

suplex2825 opened a new issue #11629: Changing echart value at x coordinate
URL: https://github.com/apache/incubator-echarts/issues/11629
 
 
   Actually I really want to post this question to the echart website, but i dont know how to do, so thats why i here. And my question is related code.
   
   The website is down below: https://gallery.echartsjs.com/editor.html?c=xGeNfEsuhT
   
   Here is the code:
   var data = [];
   var dataCount = 10;
   var startTime = +new Date();
   var categories = ['categoryA', 'categoryB', 'categoryC'];
   var types = [
   {name: 'JS Heap', color: '#7b9ce1'},
   {name: 'Documents', color: '#bd6d6c'},
   {name: 'Nodes', color: '#75d874'},
   {name: 'Listeners', color: '#e0bc78'},
   {name: 'GPU Memory', color: '#dc77dc'},
   {name: 'GPU', color: '#72b362'}
   ];
   
   // Generate mock data
   echarts.util.each(categories, function (category, index) {
   var baseTime = startTime;
   for (var i = 0; i < dataCount; i++) {
   var typeItem = types[Math.round(Math.random() * (types.length - 1))];
   var duration = Math.round(Math.random() * 10000);
   data.push({
   name: typeItem.name,
   value: [
   index,
   baseTime,
   baseTime += duration,
   duration
   ],
   itemStyle: {
   normal: {
   color: typeItem.color
   }
   }
   });
   baseTime += Math.round(Math.random() * 2000);
   }
   });
   
   function renderItem(params, api) {
   var categoryIndex = api.value(0);
   var start = api.coord([api.value(1), categoryIndex]);
   var end = api.coord([api.value(2), categoryIndex]);
   var height = api.size([0, 1])[1] * 0.6;
   
   var rectShape = echarts.graphic.clipRectByRect({
       x: start[0],
       y: start[1] - height / 2,
       width: end[0] - start[0],
       height: height
   }, {
       x: params.coordSys.x,
       y: params.coordSys.y,
       width: params.coordSys.width,
       height: params.coordSys.height
   });
   
   return rectShape && {
       type: 'rect',
       shape: rectShape,
       style: api.style()
   };
   }
   
   option = {
   tooltip: {
   formatter: function (params) {
   return params.marker + params.name + ': ' + params.value[3] + ' ms';
   }
   },
   title: {
   text: 'Profile',
   left: 'center'
   },
   dataZoom: [{
   type: 'slider',
   filterMode: 'weakFilter',
   showDataShadow: false,
   top: 400,
   height: 10,
   borderColor: 'transparent',
   backgroundColor: '#e2e2e2',
   handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.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.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
   handleSize: 20,
   handleStyle: {
   shadowBlur: 6,
   shadowOffsetX: 1,
   shadowOffsetY: 2,
   shadowColor: '#aaa'
   },
   labelFormatter: ''
   }, {
   type: 'inside',
   filterMode: 'weakFilter'
   }],
   grid: {
   height:300
   },
   xAxis: {
   min: startTime,
   scale: true,
   axisLabel: {
   formatter: function (val) {
   return Math.max(0, val - startTime) + ' ms';
   }
   }
   },
   yAxis: {
   data: categories
   },
   series: [{
   type: 'custom',
   renderItem: renderItem,
   itemStyle: {
   normal: {
   opacity: 0.8
   }
   },
   encode: {
   x: [1, 2],
   y: 0
   },
   data: data
   }]
   };
   
   My question is I want to change the x coordinates to the timeline. For example, '2019-11-12','2020-11-12' and so on. But i dont know how to do, I tried many method. I still cannot solve it. Anyway, hope you guys can help me out, thank you so much!

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org