代码如下:
this.options = {
tooltip: {
trigger: "axis",
textStyle: {
align: "left",
},
className: "custom-tooltip-box",
formatter: function (params) {
return `<div class='custom-tooltip-style'>
<div class='title'>
<span>${params[0].name}年</span>
</div>
<div class="span">
<div class="content">
<span>合同金额:</span>
<span>${params[0].value}万元</span>
</div>
</div>
</div>`;
},
},
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(4,180,53,0)", // 0% 处的颜色
},
{
offset: 1,
color: "#3CD783", // 100% 处的颜色
},
]),
grid: {
top: "26%",
bottom: "0%",
right: "8%",
left: "8%",
containLabel: true,
},
xAxis: [
{
type: "category",
data: this.xAxisData,
axisLabel: {
show: true,
margin: 14,
fontSize: 12,
textStyle: {
color: "#ffffffcc"
}
},
axisLine: {
show: true,
lineStyle: {
color: "#355d8d",
},
},
axisTick: {
show: false,
},
},
],
yAxis: [
{
type: "value",
name: '单位:万元',
nameTextStyle: {
fontSize: this.handleWidth(12),
color: "#FFFFFF99",
padding: [0, 18, 10, 0]
},
axisLine: {
onZero: false,
lineStyle: {
color: "#87C2FF",
width: 1, //这里是为了突出显示加上的
},
},
axisLabel: {
formatter: function (val) {
return val + "";
},
show: true,
margin: 8,
fontSize: 12,
textStyle: {
color: "#FFFFFF99", //字体颜色
},
},
splitLine: {
show: true,
lineStyle: {
color: "#87C2FF66",
width: 0.7,
type: "dashed",
},
},
},
],
series: [
{
type: "bar",
// name: this.legendData[0],
barWidth: 20,
itemStyle: {
borderWidth: 2,
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#3FFF8C", // 0% 处的颜色
},
{
offset: 1,
color: "#FBFFFA", // 100% 处的颜色
},
])
},
areaStyle: {
normal: {
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#3CD783", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(4,180,53,0)", // 100% 处的颜色
},
])
}
},
data: this.echartData
}
]
};