菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 王文博--20221116--echarts-day01 [打印本页]

作者: 博5237 时间: 2022-11-17 18:12
标题: 王文博--20221116--echarts-day01
<div id="box" style="width: 800px; height:400px;"></div>
<script>
      const box = document.querySelector('#box');
      var myChart = echarts.init(box);
      var option;

      let base = +new Date(1995, 9, 3);
      let oneDay = 24 * 3600 * 1000;
      let data = [
         [base, Math.random() * 300]
      ];
      for (let i = 1; i < 10000; i++) {
         let now = new Date((base += oneDay));
         data.push([+now, Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])]);
      }
      option = {
         tooltip: {
            trigger: 'axis',
            position: function(pt) {
                  return [pt[0], '10%'];
            }
         },
         title: {
            left: 'center',
            text: 'Large Ara Chart'
         },
         toolbox: {
            feature: {
                  dataZoom: {
                     yAxisIndex: 'none'
                  },
                  restore: {},
                  saveAsImage: {}
            }
         },
         xAxis: {
            type: 'time',
            boundaryGap: false
         },
         yAxis: {
            type: 'value',
            boundaryGap: [0, '100%']
         },
         dataZoom: [{
            type: 'inside',
            start: 0,
            end: 20
         }, {
            start: 0,
            end: 20
         }],
         series: [{
            name: 'Fake Data',
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {},
            data: data
         }]
      };

      option && myChart.setOption(option);
</script>

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)