const resultData = [
{name:'唐三藏',num1:10,num2:20},
{name:'孙悟空',num1:50,num2:60},
{name:'猪八戒',num1:30,num2:20},
{name:'沙悟净',num1:20,num2:20}
]
const barWidth = 35;
const colors = [];
const colors1 = [];
for (let i = 0; i < resultData.length; i += 1) {
colors.push({
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: '#e7a100', // 最左边
},
{
offset: 0.5,
color: '#c17f00', // 左边的右边 颜色
},
{
offset: 0.5,
color: '#e6a100', // 右边的左边 颜色
},
{
offset: 1,
color: '#e7a100',
},
],
});
colors1.push({
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: '#1cb4f2', // 最左边
},
{
offset: 0.5,
color: '#0071b5', // 左边的右边 颜色
},
{
offset: 0.5,
color: '#0089d0', // 右边的左边 颜色
},
{
offset: 1,
color: '#00497c',
},
],
});
}
option = {
backgroundColor: "#001829",
color: ['#ffb40a', '#1cb4f2'],
dataset: [
{
source: resultData,
dimensions: ['name', 'num1', 'num2'],
},
],
legend: {
show: true,
left: '25%',
itemGap: 150,
selectedMode: false,
textStyle: {
color: '#ffffff',
fontSize:15
},
},
// 提示框
tooltip: {
trigger: 'axis',
formatter(params) {
let result = '';
const markerList = [];
for (let i = 0; i < params.length; i += 1) {
const { marker, seriesType } = params[i];
if (seriesType === 'bar') {
markerList.push(marker);
}
}
if (params.length > 0 && markerList.length > 1) {
const { data } = params[0];
result += `${data.name}<br/>${markerList[0]}血量：${data.num1}%<br/>${
markerList[1]
}蓝量：${data.num2}%`;
}
return result;
},
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
},
},
// 区域位置
grid: {
left: '3%',
right: '1%',
bottom: '3%',
top: '18%',
containLabel: true,
},
// X轴
xAxis: {
type: 'category',
axisLine: {
show: true,
lineStyle: {
color: '#004B97',
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: '#fff',
// margin: 15,
fontSize: 13,
},
},
yAxis: {
show: true,
splitNumber: 4,
name: '(%)',
nameTextStyle: {
color: '#fff',
padding: [0, 0, -8, -42],
},
axisLine: {
show: true,
lineStyle: {
color: '#004B97',
},
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#004B97',
},
},
axisLabel: {
color: '#FFFFFF',
// margin: 30,
// fontSize: 13,
},
},
series: [
{
type: 'bar',
name: '血量',
barWidth,
itemStyle: {
normal: {
color(params) {
return colors[params.dataIndex % 7];
},
},
},
label: {
show: true,
position: [barWidth / 2, -(barWidth + 5)],
color: '#ffffff',
fontSize: 15,
fontStyle: 'bold',
align: 'center',
},
encode: {
x: 'name',
y: 'num1',
},
},
{
z: 2,
type: 'pictorialBar',
encode: {
x: 'name',
y: 'num1',
},
symbol: 'diamond',
symbolOffset: ['-63%', '50%'],
symbolSize: [barWidth, barWidth * 0.5],
itemStyle: {
normal: {
color(params) {
return colors[params.dataIndex % 7];
},
},
},
},
{
z: 3,
type: 'pictorialBar',
symbolPosition: 'end',
encode: {
x: 'name',
y: 'num1',
},
symbol: 'diamond',
symbolOffset: ['-63%', '-50%'],
symbolSize: [barWidth, barWidth * 0.5],
itemStyle: {
normal: {
borderWidth: 0,
color(params) {
return colors[params.dataIndex % 7].colorStops[0].color;
},
},
},
},
{
type: 'bar',
name: '蓝量',
barWidth,
itemStyle: {
normal: {
color(params) {
return colors1[params.dataIndex % 7];
},
},
},
label: {
show: true,
position: [barWidth / 2, -(barWidth + 5)],
color: '#ffffff',
fontSize: 15,
fontStyle: 'bold',
align: 'center',
},
encode: {
x: 'name',
y: 'num2',
},
},
{
z: 2,
type: 'pictorialBar',
encode: {
x: 'name',
y: 'num2',
},
symbol: 'diamond',
symbolOffset: ['63%', '50%'],
symbolSize: [barWidth, barWidth * 0.5],
itemStyle: {
normal: {
color(params) {
return colors1[params.dataIndex % 7];
},
},
},
},
{
z: 3,
type: 'pictorialBar',
symbolPosition: 'end',
encode: {
x: 'name',
y: 'num2',
},
symbol: 'diamond',
symbolOffset: ['62%', '-50%'],
symbolSize: [barWidth, barWidth * 0.5],
itemStyle: {
normal: {
borderWidth: 0,
color(params) {
return colors1[params.dataIndex % 7].colorStops[0].color;
},
},
},
},
],
};