【Echarts】custom自定义图表实现甘特图

效果图

主要注意点：
1、右上角图例visualMap实现
2、visualMap增加formatter
3、series使用custom自定义图表，encode解析四维数组。核心是renderItem方法，必填项，且需要注意要全部定义在options里面！！！！定义在外面，options只留方法名的话，虽然echarts示例中可以粘贴运行，但是一旦移植到项目中无法正常渲染，param和api传递会有问题。项目中要写成renderItem:(params, api) =>{全抄过来}

下面两种示例echarts中粘贴即可运行

动态数据版

var data = [];
var dataCount = 3;
var startTime = +new Date();
var categories = ['服务器调试', 'app流程界面', '安卓程序编码','ios程序编码'];
var types = [{ name: '项目1', color: '#7b9ce1' },{ name: '项目2', color: '#bd6d6c' },{ name: '项目3', color: '#75d874' },{ name: '项目4', color: '#e0bc78' }
];
// Generate mock data
categories.forEach(function (category, index) {var baseTime = startTime;for (var i = 0; i < dataCount; i++) {var typeItem = types[Math.round(Math.random() * (types.length - 1))];var duration = Math.round(Math.random() * 10000);data.push({name: typeItem.name,value: [index, baseTime, (baseTime += duration), duration],itemStyle: {normal: {color: typeItem.color}}});baseTime += Math.round(Math.random() * 2000);}
})//  项目中使用时renderItem要挪到options里面
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',transition: ['shape'],shape: rectShape,style: api.style()});
}option = {visualMap:{ // 视觉映射type: 'piecewise', // 'continuous'（连续型）'piecewise'（分段型）。splitNumber: 4, // 数据分割几份left: "right", // 位置top: 0, // 边距orient: "horizontal", // 布局朝向 'horizontal'（横向）'vertical'（纵向）// text:['High', 'Low'], // 两端文本min: 0, // 最小区间值max: 200, // 最大区间值itemHeight: 10,itemWidth: 10,align: 'left', // 图例位置inverse: true, // 控制视觉映射组件的排列方向, 当设置为true时，会使视觉映射组件的排列方向颠倒，即最小值显示在最右边，最大值显示在最左边。pieces: [ // 使用 pieces 属性来精确定义每个分段的取值范围和颜色{ min: 0, max: 19, label: "项目1", color: '#7b9ce1' },{ min: 20, max: 39, label: "项目2", color: '#bd6d6c' },{ min: 40, max: 69, label: "项目3", color: '#75d874' },{ min: 60, max: 89, label: "项目4", color: '#e0bc78' },] }, tooltip: {formatter: function (params) {let str = `${params.marker + params.name}<br/>start：${params.value[1]}<br/>end：${params.value[2]}<br/>value：${params.value[3]}<br/>`return str}},title: {show: true,text: '图表标题',subtext: '',left: '5%',top: '5%',textStyle: {fontSize: 14,height: 40},subtextStyle: {fontSize: 10}},dataZoom: [{type: 'slider',filterMode: 'weakFilter',showDataShadow: false,top: 400,labelFormatter: ''},{type: 'inside',filterMode: 'weakFilter'}],grid: {top: '10%',bottom: '15%',left: '15%',right: '10%'},xAxis: {min: startTime,scale: true,axisLabel: {formatter: function (val) {return Math.max(0, val - startTime) + ' ms';}}},yAxis: {data: categories,axisTick: { show: false },splitLine: { show: false },axisLine: { show: false },},series: [{type: 'custom',// 注意！！！！项目使用中要写成：renderItem:(params, api) =>{全抄过来}renderItem: renderItem, itemStyle: {opacity: 0.8},encode: {x: [1, 2],y: 0,},data: data}]
};

静态数据版

减去很多配置项,静态data更加直观

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',transition: ['shape'],shape: rectShape,style: api.style()});
}
option = {tooltip: {show: true,trigger: 'item',},dataZoom: [{type: 'slider',filterMode: 'weakFilter',showDataShadow: false,top: 400,labelFormatter: ''},{type: 'inside',filterMode: 'weakFilter'}],xAxis: {min: 1723552291842,scale: true,axisLabel: {}},yAxis: {data: ['服务器调试','app流程界面','安卓程序编码','ios程序编码'],axisTick: {show: false},splitLine: {show: false},axisLine: {show: false}},series: [{'type': 'custom',renderItem: renderItem,'itemStyle': {'opacity': 0.8},'encode': {'x': [1,2],'y': 0},'data': [{'name': '项目2','value': [0,1723552291842,1723552297017,5175],'itemStyle': {'normal': {'color': '#bd6d6c'}}},{'name': '项目2','value': [0,1723552298382,1723552300321,1939],'itemStyle': {'normal': {'color': '#bd6d6c'}}},{'name': '项目2','value': [0,1723552300586,1723552304290,3704],'itemStyle': {'normal': {'color': '#bd6d6c'}}},{'name': '项目3','value': [1,1723552291842,1723552295815,3973],'itemStyle': {'normal': {'color': '#75d874'}}},{'name': '项目4','value': [1,1723552296867,1723552298584,1717],'itemStyle': {'normal': {'color': '#e0bc78'}}},{'name': '项目3','value': [1,1723552299537,1723552305343,5806],'itemStyle': {'normal': {'color': '#75d874'}}},{'name': '项目3','value': [2,1723552291842,1723552294548,2706],'itemStyle': {'normal': {'color': '#75d874'}}},{'name': '项目3','value': [2,1723552294711,1723552301769,7058],'itemStyle': {'normal': {'color': '#75d874'}}},{'name': '项目2','value': [2,1723552302106,1723552310635,8529],'itemStyle': {'normal': {'color': '#bd6d6c'}}},{'name': '项目2','value': [3,1723552291842,1723552301649,9807],'itemStyle': {'normal': {'color': '#bd6d6c'}}},{'name': '项目2','value': [3,1723552301795,1723552303283,1488],'itemStyle': {'normal': {'color': '#bd6d6c'}}},{'name': '项目3','value': [3,1723552304712,1723552309047,4335],'itemStyle': {'normal': {'color': '#75d874'}}}]}]}