如上所示的柱图，良品入库是渐变的颜色，划过的阴影也是渐变，参数没啥可说的，仅仅参考就行。
options() {
let ths =this
return {
backgroundColor:'',
tooltip: {
backgroundColor: '#fff',//提示框的背景色
position: function (point, params, dom, rect, size) {
var x = 0; // x坐标位置
var y = 0; // y坐标位置
// 当前鼠标位置
var pointX = point[0];
var pointY = point[1];
// 提示框大小
var boxWidth = size.contentSize[0];
var boxHeight = size.contentSize[1];
// boxWidth > pointX 说明鼠标左边放不下提示框
if (boxWidth > pointX) {
x = pointX + 10;
} else { // 左边放的下
x = pointX - boxWidth - 10;
}
// boxHeight > pointY 说明鼠标上边放不下提示框
if (boxHeight > pointY) {
y = 5;
} else { // 上边放得下
y = pointY - boxHeight;
}
return [x, y];
},
trigger: 'axis',
textStyle: {
color: 'black',
},
axisPointer: {
type: 'shadow',
shadowStyle:{//划过柱子时阴影颜色 右/下/左/上
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 0, color: 'rgba(169, 161, 255,1)' },
// { offset: 0.7, color: '#DAD3F6' },
{ offset: 1, color: 'rgb(161, 124, 177,0.3)' }
])
},
z:-20,
label: {
formatter: function (params) {
var xvalue = params.value;
for (var i = 0; i < ths.xdata.length; i++) {
if (ths.xdata[i] == xvalue) {
ths.nowIndex = i;
break;
}
}
}
}
},
formatter: function (params) {
let nowDelayFinish = ths.tipsData[ths.nowIndex].nowDelayFinishsMonthData;
let nowDelay = ths.tipsData[ths.nowIndex].nowDelaysMonthData;
let str =
'<div style="display:flex;flex-direction:row;align-item:center;padding:0px 10px;border-radius: 10px;line-height: 1.2;">'+
'<div>' +
'<div style="font-size: 10px;text-align:left;">'+'<span style="width: auto;display:inline-block;">总投入：</span>' + nowDelayFinish+ths.unit+'</div>' +
'<div style="font-size: 10px;text-align:left;">'+'<span style="width:10px;height:10px;display:inline-block;background-color:#97FFF3;margin-right:5px;"></span>'+'<span style="width: auto;display:inline-block;">良品入库：</span>' + nowDelayFinish+ths.unit+'</div>' +
'<div style="font-size: 10px;text-align:left;">'+'<span style="width:10px;height:10px;display:inline-block;background-color:#2AA0D3;margin-right:5px;"></span>'+'<span style="width: auto;display:inline-block;">Reject入库：</span>' + nowDelay+ths.unit+'</div>' +
'<div style="font-size: 10px;text-align:left;">'+'<span style="width:10px;height:10px;display:inline-block;background-color:#C26FFF;margin-right:5px;"></span>'+'<span style="width: auto;display:inline-block;">差异数量：</span>' + nowDelay+ths.unit+'</div>' +
'<div style="font-size: 10px;text-align:left;">'+'<span style="width:10px;height:2px;display:inline-block;background-color:#FFA4F6;margin-right:5px;"></span>'+'<span style="width: auto;display:inline-block;">差异率：</span>' + nowDelay+ths.unit+'</div>' +
'</div>'+
'</div>';
return str;
}
},
legend: {
data: ['良品入库','Reject入库', '差异数量','差异率'],
show:true,
right:"3%",
itemGap:30,//图例间距离
itemWidth:15,//图例的图标宽度
textStyle:{
color:"#FFF",//文字颜色
},
},
grid: {
top:'10%',
left: '3%',
right: '4%',
bottom: '30%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ths.xdata,
axisLabel:{
textStyle: {
color: '#fff',
fontSize: ths.fontChart(1.5),
},
},
axisLine:{
lineStyle:{
color:'#242B41'
}
},
axisTick:{
show:false //刻度线
}
}
],
yAxis: [
{
type: 'value',
min: 0,
max: 2500,
interval: 500,
axisLabel: {//轴标签
textStyle: {
color: '#fff',
fontSize: ths.fontChart(1.5),
}
},
axisLine:{//轴线
show:false
},
splitLine: {//分割线
lineStyle: {
type: 'solid',//y轴分割线类型
color: '#808080',
width: '1',//坐标线的宽度
}
},
axisTick:{
show:false //刻度线
}
},
{
type: 'value',
min: 0,
max: 20,
interval: 5,
yAxisIndex: 1,
axisLabel: {//轴标签
textStyle: {
color: '#fff',
fontSize: ths.fontChart(1.5),
},
formatter: '{value}%'
},
axisLine:{//轴线
show:false
},
splitLine: {//分割线
show:false,
lineStyle: {
type: 'solid',//y轴分割线类型
color: '#808080',
width: '1',//坐标线的宽度
}
},
axisTick:{
show:false //刻度线
}
}
],
series: [
{
name: '良品入库',
type: 'bar',
stack: 'now',
barWidth: 10,
emphasis: {
// focus: 'series'
},
itemStyle: {//自定义颜色
// normal: { color: "#97FFF3" },
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#97FFF3' },
// { offset: 0.5, color: '#DAD3F6' },
{ offset: 1, color: '#4C5E80' }
])
},
data: ths.nowFinishsMonthData
},
{
name: 'Reject入库',
type: 'bar',
stack: 'now',
barWidth: 10,
emphasis: {
// focus: 'series'
},
itemStyle: {//自定义颜色
normal: { color: "#2AA0D3" },
},
data: ths.nowFinishsMonthData
},
{
name: '差异数量',
type: 'bar',
barWidth: 5,
stack: 'now',
emphasis: {
// focus: 'series'
},
itemStyle: {//自定义颜色
normal: { color: "#C26FFF" },
},
data: ths.lastFinishsMonthData
},
{
name: '差异率',
type: 'line',//折线图
areaStyle: {//展示区域面积
color:'rgba(255, 164, 246,0.2)'
},
emphasis: {
// focus: 'series'
},
itemStyle: {//自定义颜色
normal: { color: "#FFA4F6" },
},
data: ths.lastFinishsMonthData
},
]
}
},标签：参考,color,show,ths,柱图,offset,var,type From： https://www.cnblogs.com/weiyanei/p/17118830.html