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挑战一 对人员路径图进行数据可视化分析代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/echarts.min.js"></script>
<script src="js/jquery-3.4.1.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height:500px;">
</div>
<script>
// 初始化
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);
})
</script>
</body>
</html>
