零基础学习用Echarts画Gantt甘特图

2023-11-28 20:26| 来源: 网络整理| 查看: 265

1. 参观官方教程

要使用echarts 1.先引入echarts.js文件2.在body中定义一个div，设定高度和宽度3.在script中写入echarts实例化的js代码。

引用echarts步骤.png

放个官网教程链接：https://www.echartsjs.com/zh/tutorial.html#5%20分钟上手%20ECharts

官方教程.png 引入echarts步骤.png 实例化说明.png

2. 运行一个官方实例 Echarts官方例子说明1.png Echarts官方例子说明2.png 3. 仿写echarts

通过仿写1和仿写2 写出一个自己的甘特图！数据仿造1，option样式仿造2

仿写例子链接1：https://blog.csdn.net/sinat_35815038/article/details/86646809

仿写例子.png 仿写链接2：https://www.echartsjs.com/examples/en/editor.html?c=custom-profile 仿写官方甘特图.png 进一步了解echarts方法链接3：https://blog.csdn.net/sinat_35815038/article/details/86646809（可不看）

image.png image.png 4. 调用本地json数据

仿造上面的例子1和2自己写出一个甘特图.里面的数据是写死的，但是我们的数据又很多，要想在Echarts调用本地json数据。很简单，只要加载jquery.js，使用getJSON方法就可以了。

jQueryjs引用

getJSON方法使用虽然getJSON这张图看起来很乱，但看完后绝对会明白怎么调用了！

5. 调option配置项

通过对option设置，决定哪些东西要展示，以及怎么展示。通过不断调整配置项，能让可视化界面更漂亮。这部分想深入的看官网。下图是对script标签中内容说明，能更好理解option配置项有什么。

配置项还有很多，这里就举了一点。

script内容 6. 遇到的问题问题一：

y轴类目太多，没法显示全部，以及所有类目都挤在一个页面出现

解决方法：

通过对y轴的min和max设置显示要展示的类目数，然后通过datazoom进行y轴的滚动，其中datazoon中要进行end start显示百分比调整

yAxis设置 datazoom设置问题二：

series内容中的label太长，没法按照scalelimit省略到一些label标签

解决方法：

无，问题如图所示 label标签太长问题三：

要求显示各个场所的颜色legend图示

解决方法：

无。但想要的效果如图： legend图示 7.附录 json格式 json格式.jpg 代码

这是china vis 2019挑战一对人员路径图进行数据可视化分析代码

Title // 初始化 var myChart = echarts.init(document.getElementById('main')); // 调用数据 $.getJSON("GanttDay1.json",function (data) { scheduleData = data let yAxisData_task = []; //Y轴名称-显示task id let seriesData = []; //x轴开始和结束时间 let start_ = "07:00:00", end_ = "19:00:00"; scheduleData.forEach((item,index) => { yAxisData_task.push(item.Task); let bgColor; item.list.forEach((listItem,listIndex) =>{ //根据给resource场所分配颜色 switch (listItem.Resource) { case "主会场": bgColor = 'rgba(254, 164, 127)'; break; case "分会场A": bgColor = 'rgba(249, 127, 81)'; break; case "分会场B": bgColor = 'rgba(179, 55, 113)'; break; case "分会场C": bgColor = 'rgba(109, 33, 79)'; break; case "分会场D": bgColor = 'rgba(37, 204, 247)'; break; } // time 时分秒转秒数便于计算停留时间 // time_to_sec 省略 let Start = time_to_sec(listItem.Start) let Finish = time_to_sec(listItem.Finish) //往seriesData装数据和颜色样式 seriesData.push({ name:listItem.Resource, value:[ index, Start, Finish ], itemStyle: { normal: { color: bgColor } } }) }) }); console.log(seriesData); //renderitem自定义模式的函数 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 = { backgroundColor: '#26263C', //鼠标滑过数据条，有提示框 tooltip: { formatter: function(params) { spendTime = sec_to_time( params.value[2] - params.value[1]); return params.marker + params.name + "停留时间："+spendTime; } }, //标题居中和命名 title: { text: '人员路径图', left: 'center' }, grid: { top: 48, left: 100, right: 50, bottom: 50, height: 400, }, //缩放 dataZoom: [ { type: 'slider', filterMode: 'weakFilter', showDataShadow: false, top: 460, height: 20, 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: "80%", handleStyle: { shadowBlur: 6, shadowOffsetX: 1, shadowOffsetY: 2, shadowColor: '#aaa' }, labelFormatter: '' }, { type: 'inside', filterMode: 'weakFilter' }, { type: 'slider', yAxisIndex: 0, zoomLock: true, width: 10, //数据窗口范围的起始百分比，start：98和95显示出来的条数不同。98少，95多 start: 99, end: 100, handleSize: 0, showDetail: false, }, { type: 'inside', id: 'insideY', yAxisIndex: 0, start: 99, end: 100, zoomOnMouseWheel: false, moveOnMouseMove: true, moveOnMouseWheel: true }], xAxis: { min: time_to_sec(start_), max: time_to_sec(end_), position: 'top', splitNumber: 4, scale: true, axisLabel: { textStyle:{ color:"#ffffff" }, // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引 formatter: function (value, index) { // 格式化成月/日，只在第一个刻度显示年份 //sec_to_time 秒数转时分秒，可以更好在x轴显示具体时间 var date = sec_to_time(value); return date } }, splitLine: { show: true, lineStyle: { color: 'rgba(233,233,233,0.1)' } }, }, yAxis:{ //min和max是关键,max越大，id显示越多.max:300显示300条数据 min: 0, max: 500, data: yAxisData_task, axisTick: {show: false}, splitLine: {show: true,lineStyle: {color:'rgba(233,233,233,0.1)'}}, axisLine: {show: true}, axisLabel: { show: true, textStyle: { color:"#ffffff" }, fontSize: 14}, }, series:[{ //类型定义为custom type:'custom', renderItem:renderItem, //显示label标签 label: { normal: { show: true, // position: 'inside', position: 'inside', padding:4, fontSize:10, width:"50%", formatter:function (params) { return params.name } } }, encode: { x: [1, 2], y: 0, }, data:seriesData }] } myChart.setOption(option); })

【本文地址】

公司简介

联系我们