Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

使用效果可视化观察 #1

Closed
743v45 opened this issue Feb 1, 2023 · 0 comments
Closed

使用效果可视化观察 #1

743v45 opened this issue Feb 1, 2023 · 0 comments
Labels
documentation Improvements or additions to documentation

Comments

@743v45
Copy link
Owner

743v45 commented Feb 1, 2023 •
edited
Loading

使用示例代码 5935fe8 执行生成数据（需取消写入注释或修改为 console 打印）

展示的 html 代码

将上述脚本生成的 /tmp/data.json 数据代入 data

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>文档标题</title>
    <script
      src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
  </head>
  <body>
    <div id="main" style="width: 2400px;height:1600px;"></div>


    <script>
const data = [{"name":"b0","from":"2023-02-01T03:54:11.942Z","to":"2023-02-01T03:54:13.442Z"},{"name":"a0","from":"2023-02-01T03:54:11.942Z","to":"2023-02-01T03:54:14.443Z"},{"name":"b1","from":"2023-02-01T03:54:14.940Z","to":"2023-02-01T03:54:16.442Z"},{"name":"a1","from":"2023-02-01T03:54:14.938Z","to":"2023-02-01T03:54:17.440Z"},{"name":"a2","from":"2023-02-01T03:54:17.939Z","to":"2023-02-01T03:54:20.441Z"},{"name":"b2","from":"2023-02-01T03:54:20.443Z","to":"2023-02-01T03:54:21.943Z"},{"name":"c0","from":"2023-02-01T03:54:11.942Z","to":"2023-02-01T03:54:31.942Z"},{"name":"a3","from":"2023-02-01T03:54:31.944Z","to":"2023-02-01T03:54:34.445Z"},{"name":"b3","from":"2023-02-01T03:54:34.446Z","to":"2023-02-01T03:54:35.948Z"},{"name":"c1","from":"2023-02-01T03:54:16.442Z","to":"2023-02-01T03:54:36.442Z"},{"name":"a4","from":"2023-02-01T03:54:36.443Z","to":"2023-02-01T03:54:38.944Z"},{"name":"b4","from":"2023-02-01T03:54:38.946Z","to":"2023-02-01T03:54:40.447Z"},{"name":"c2","from":"2023-02-01T03:54:21.944Z","to":"2023-02-01T03:54:41.945Z"},{"name":"a5","from":"2023-02-01T03:54:41.946Z","to":"2023-02-01T03:54:44.447Z"},{"name":"b5","from":"2023-02-01T03:54:44.448Z","to":"2023-02-01T03:54:45.950Z"},{"name":"c3","from":"2023-02-01T03:54:35.949Z","to":"2023-02-01T03:54:55.949Z"},{"name":"a6","from":"2023-02-01T03:54:55.950Z","to":"2023-02-01T03:54:58.451Z"},{"name":"b6","from":"2023-02-01T03:54:58.453Z","to":"2023-02-01T03:54:59.953Z"},{"name":"c4","from":"2023-02-01T03:54:40.448Z","to":"2023-02-01T03:55:00.449Z"},{"name":"a7","from":"2023-02-01T03:55:00.450Z","to":"2023-02-01T03:55:02.951Z"},{"name":"b7","from":"2023-02-01T03:55:02.953Z","to":"2023-02-01T03:55:04.453Z"},{"name":"c5","from":"2023-02-01T03:54:45.952Z","to":"2023-02-01T03:55:05.951Z"},{"name":"a8","from":"2023-02-01T03:55:05.953Z","to":"2023-02-01T03:55:08.453Z"},{"name":"b8","from":"2023-02-01T03:55:08.455Z","to":"2023-02-01T03:55:09.957Z"},{"name":"c6","from":"2023-02-01T03:54:59.955Z","to":"2023-02-01T03:55:19.954Z"},{"name":"a9","from":"2023-02-01T03:55:19.956Z","to":"2023-02-01T03:55:22.457Z"},{"name":"b9","from":"2023-02-01T03:55:22.459Z","to":"2023-02-01T03:55:23.960Z"},{"name":"c7","from":"2023-02-01T03:55:04.455Z","to":"2023-02-01T03:55:24.454Z"},{"name":"a10","from":"2023-02-01T03:55:24.455Z","to":"2023-02-01T03:55:26.955Z"},{"name":"b10","from":"2023-02-01T03:55:26.957Z","to":"2023-02-01T03:55:28.457Z"},{"name":"c8","from":"2023-02-01T03:55:09.958Z","to":"2023-02-01T03:55:29.958Z"}]

data.sort((a, b) => (a.from >= b.from ? 1 : -1));

let projectItem = data.map(v => v.name);
let projectItemStart = data.map(v => v.from);
let projectItemEnd = data.map(v => v.to);


let projectItemStartValue = projectItemStart.map((item)=>{
return new Date(item).valueOf()
})
let projectItemDuringValue = projectItemEnd.map((item,i)=>{
return new Date(item).valueOf() - projectItemStartValue[i]
})
let dateMin = projectItemStartValue[0];

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
  title: {
    text: '甘特图',
    subtext: '瀑布图转为甘特图'
  },
  tooltip: {
    trigger: 'axis',
    formatter: function (params) {
      return `${params[1].name}<br/>` +
        `${params[1].seriesName} : ${ params[1].value / 1000 } 秒<br/>` +
        `start time : ${ new Date(params[0].value).toISOString() }<br/>` +
        `end time : ${ new Date(params[0].value + params[1].value).toISOString() }<br/>`;
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '30%',
    containLabel: true
  },
  yAxis: {
    type: 'category',
    splitLine: {
      show: false
    },
    data: projectItem
  },
  xAxis: {
    type: 'value',
    min: dateMin,
    axisLabel: {
      color: '#333', // 坐标轴文字颜色
      formatter: function (param) {
        // console.log(param)
        let date = new Date(param);
        let dateLabel = date.valueOf() - dateMin;
        return dateLabel;
      }
    }
  },
  series: [
    {
      name: 'Placeholder',
      type: 'bar',
      stack: 'Total',
      itemStyle: {
        borderColor: 'transparent',
        color: 'transparent'
      },
      emphasis: {
        itemStyle: {
          borderColor: 'transparent',
          color: 'transparent'
        }
      },
      data: projectItemStartValue
    },
    {
      name: '周期',
      type: 'bar',
      stack: 'Total',
      data: projectItemDuringValue
    }
  ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
  </body>
</html>

使用效果

image
@743v45 743v45 added the documentation Improvements or additions to documentation label Feb 1, 2023
@743v45 743v45 closed this as completed Feb 1, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
documentation Improvements or additions to documentation
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@743v45