效果图
主要注意点：
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'
}
}
}
]
}
]
}
