'+ params[0].name+'
'; returnData+= ''; returnData += '预测值：' + params[0].value + ''; returnData+= '
'; returnData += '实际收入：' + params[1].value + '

'; return returnData; }, extraCssText: 'font-size: 22px; line-height: 30px', }, xAxis: { type: 'category', data: ['收入1','收入2','收入3','收入4','收入5','收入6','收入7','收入8','收入9','收入10','收入11'], axisLine: { show: true, lineStyle: { color: '#fff', }, }, offset: 10, axisTick: { show: false, length: 9, alignWithLabel: true, lineStyle: { color: '#fff', }, }, axisLabel: { margin:0, fontSize: 12, color: '#fff', interval:0, }, }, yAxis: { type: 'value', axisLine: { show: true, lineStyle: { color: '#fff', }, }, splitLine: { show: false, }, axisTick: { show: false, }, axisLabel: { fontSize: 14, color: '#fff', }, boundaryGap: ['20%', '20%'], }, series: [ { type: 'custom', renderItem: (params, api) => { const location = api.coord([api.value(0), api.value(1)]); return { type: 'group', children: [ { type: 'CubeLeft', shape: { api, xValue: api.value(0), yValue: api.value(1), x: location[0], y: location[1], xAxisPoint: api.coord([api.value(0), 0]), }, style: { fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(60,135,226,0.1)', }, { offset: 1, color: 'rgba(70,176,229,0.1)', }, ]), }, }, { type: 'CubeRight', shape: { api, xValue: api.value(0), yValue: api.value(1), x: location[0], y: location[1], xAxisPoint: api.coord([api.value(0), 0]), }, style: { fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(60,135,226,0.2)', }, { offset: 1, color: 'rgba(70,176,229,0.1)', }, ]), }, }, { type: 'CubeTop', shape: { api, xValue: api.value(0), yValue: api.value(1), x: location[0], y: location[1], xAxisPoint: api.coord([api.value(0), 0]), }, style: { fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(60,135,226,0.2)', }, { offset: 1, color: 'rgba(70,176,229,0.2)', }, ]), }, }, ], }; }, data: MAX, }, { type: 'custom', renderItem: (params, api) => { const location = api.coord([api.value(0), api.value(1)]); return { type: 'group', children: [ { type: 'CubeLeft', shape: { api, xValue: api.value(0), yValue: api.value(1), x: location[0], y: location[1], xAxisPoint: api.coord([api.value(0), 0]), }, style: { fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#3c87e2', }, { offset: 1, color: '#46b0e5', }, ]), }, }, { type: 'CubeRight', shape: { api, xValue: api.value(0), yValue: api.value(1), x: location[0], y: location[1], xAxisPoint: api.coord([api.value(0), 0]), }, style: { fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#3c87e2', }, { offset: 1, color: '#46b0e5', }, ]), }, }, { type: 'CubeTop', shape: { api, xValue: api.value(0), yValue: api.value(1), x: location[0], y: location[1], xAxisPoint: api.coord([api.value(0), 0]), }, style: { fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#3c87e2', }, { offset: 1, color: '#46b0e5', }, ]), }, }, ], }; }, data: VALUE, }, { type: 'bar', itemStyle: { color: 'transparent', }, tooltip: {}, data: VALUE, }, ], };

Echarts在线免费图表