Echarts使用感悟

Echarts使用感悟

同步于我的网站

1、前言

最开始想在网站上建立一个类似github提交记录的图表，但是我想要的功能和他不一样。希望横坐标是日期，纵坐标是时间，图表类型是散点图，这样可以清晰的看出哪天哪个时间段有提交，并且点击之后由可显示内容。
由于之前没有前端开发经验，在网上查找到ECHARTS这个基于JavaScript的数据可视化图表库。里面有很多例子可以用，也非常漂亮。

2、开发过程

2.1 找到样例

大概看了所有的样例，最后选中Punch Card of Github，此项符合大致符合预期的想法。
与预期存在的不同:

• X轴的内容不一样，希望是日期，并随当前日期推动增加
• Y轴不同，希望是具体的时间，如18:30
• 提示不一样，原只能提示固定语句+横纵坐标，希望提示该点代表的内容
• 散点图中点为原点，大小根据Z值来设定，希望是条状最好能够从事件发生时间到结束时间，方便查看是哪个时间段发生的
• 由于X轴是日期，并且动态，希望下方有一个日期缩放比例尺，可以动态操作显示。
  基于以上的内容，也就是基本功能要求进行开发。

2.2 二次开发

• 首先从官方下载样例，运行成功。
• 找到官方的开发文档查阅细节问题，进一步修改。ECHARTS API

开发要点:

• Y轴数据:此项数据是固定的，通过JavaScript生成

function Ylabledata() {
  var mydataY = [];
  for (var i=5;i<24;i++)
  { 
    var str_i;
    if (i<10) {
      str_i = '0'+i.toString();
    }
    else
    {
      str_i = i.toString();
    }
    for (var j=0;j<60;j++)
    { 
      var str_j;
      if (j<10) {
        str_j = '0'+j.toString();
      }
      else
      {
        str_j = j.toString();
      }
      mydataY.push(str_i+':'+str_j);
    }
  }
  mydataY.push('24:00');
  return mydataY;
};
const YTime = Ylabledata();

• X轴数据:此项数据动态，先获取当前时间，然后从固定时间开始计算动态Y轴数据。

function Xlabledata() {
  var mydataX = [];
  var date = new Date();
	var year = date.getFullYear();
	var month = date.getMonth() + 1;
	var day = date.getDate();

  for (var i = 2022; i <= year; i++) {
    var Dyear = i.toString();
    if (i == year)
      {var monthflag = month;}
    else
      {var monthflag = 12;}
    for (var j = 1; j <= monthflag; j++) {
      // 下一年怎么打印存在问题
      if(i==2022)
        j = 3;
      if (j<10) {
        var Dmonth ='0' + j.toString();
      }
      else
      {  var Dmonth = j.toString();}
      for (var k = 1; k <= 31; k++) {
        if (k<10) {
          var DDay ='0' + k.toString();
        }
        else
        {  var DDay = k.toString();}
        mydataX.push(Dyear+'-'+Dmonth+'-'+DDay);
        console.log(Dyear+'-'+Dmonth+'-'+DDay);
      }
    }  
  }
  return mydataX;
};
const XDates = Xlabledata();

• 散点位置: 此项是根据数据库中提交的具体时间如2022-3-23 22:33来进行编码获取在图表中的位置，将所有的编码在后台实现发送到前端。
• 其他点位置提示，内容显示主要在API中tooltip中的formatter来进行设置
• 下方的日期缩放轴通过官方提供的样例更改dataZoom

dataZoom: [
    {
      textStyle: {
        color: '#8392A5'
      },
      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',
      dataBackground: {
        areaStyle: {
          color: '#8392A5'
        },
        lineStyle: {
          opacity: 0.8,
          color: '#8392A5'
        }
      },
      brushSelect: true
    },
    {
      type: 'inside'
    }
  ]

3、成果展示

可以在我的网站中查看