let xLabel = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
let dataValue = [20, 30, 40, 35, 34, 15, 56, 15, 12, 25, 34, 42];
let dataValue1 = [40, 35, 34, 15, 56, 15, 12, 25, 34, 42, 20, 330,];
let option = {
backgroundColor: '#0c2d55',
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: 'rgb(126,199,255)',
},
},
},
// legend: {
// show: true,
// top: '10%',
// itemWidth: 30, // 图例标记的图形宽度。
// // itemGap: 20, // 图例每项之间的间隔。
// itemHeight: 10, // 图例标记的图形高度。
// textStyle: {
// color: '#fff',
// fontSize: 14,
// padding: [0, 8, 0, 8]
// }
// },
color: ["#ff7022", "#fff58a", "#46f8ff"],
legend: [
{
data: [
{
name: "1",
icon: "rect",
},
],
itemWidth: 30,
itemHeight: 4,
top: "6%",
left: "35%",
textStyle: {
color: "#fff",
// fontWeight: "normal",
fontSize: 20,
},
},
{
data: [
{
name: "2",
icon: "rect",
},
],
itemWidth: 30,
itemHeight: 4,
top: "6%",
left: "50%",
textStyle: {
color: "#fff",
// fontWeight: "normal",
fontSize: 20,
},
},
{
top: "5.5%",
left: "65%",
textStyle: {
color: "#fff",
fontSize: 20,
fontFamily: "微软雅黑",
},
itemWidth: 20,
itemHeight: 20,
data: [
{
name: "3",
icon: "rect",
},
],
},
],
grid: {
top: '30%',
left: '10%',
right: '5%',
bottom: '20%',
},
xAxis: [
{
type: 'category',
axisLine: {
//坐标轴轴线相关设置。数学上的x轴
show: true,
lineStyle: {
color: 'rgb(41,188,245)',
},
},
axisLabel: {
//坐标轴刻度标签的相关设置
formatter: function (value) {
var str = "";
var num = 4; //每行显示字数
var valLength = value.length; //该项x轴字数
var rowNum = Math.ceil(valLength / num); // 行数
if (rowNum > 1) {
for (var i = 0; i < rowNum; i++) {
var temp = "";
var start = i * num;
var end = start + num;
temp = value.substring(start, end) + "\n";
str += temp;
}
return str;
} else {
return value;
}
},
textStyle: {
color: '#FFFFFF',
fontSize: 22,
},
},
splitLine: {
show: false,
lineStyle: {
color: '#233653',
},
},
axisTick: {
show: false,
},
data: xLabel,
},
],
yAxis: [
{
name: "d",
nameTextStyle: {
color: "#fff",
fontSize: 24,
padding: [0, 0, 0, 0]
},
// minInterval: 1,
type: 'value',
splitLine: {
show: true,
lineStyle: {
color: '#1160a0',
type: 'dashed'
},
},
axisLine: {
show: true,
lineStyle: {
color: '#008de7',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: 22
}
},
axisTick: {
show: false,
},
},
{
name: "%",
alignTicks: true,//对齐刻度线
nameTextStyle: {
color: "#fff",
fontSize: 24,
padding: [0, 0, 0, 0]
},
// minInterval: 1,
type: 'value',
splitLine: {
show: true,
lineStyle: {
color: '#1160a0',
type: 'dashed'
},
},
axisLine: {
show: true,
lineStyle: {
color: '#008de7',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: 22
}
},
axisTick: {
show: false,
},
},
],
series: [
{
name: '1',
type: 'line',
symbol: 'none', // 默认是空心圆（中间是白色的），改成实心圆
smooth: true,
yAxisIndex: 1,
lineStyle: {
normal: {
width: 3,
color: '#ff7022', // 线条颜色
},
},
areaStyle: {
normal: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#ff702230',
},
{
offset: 0.6,
color: '#ff702220',
},
{
offset: 1,
color: '#ff702210',
},
],
false
),
},
},
data: dataValue,
},
{
name: '2',
type: 'line',
symbol: 'none', // 默认是空心圆（中间是白色的），改成实心圆
smooth: true,
lineStyle: {
normal: {
width: 3,
color: '#fff58a', // 线条颜色
},
},
yAxisIndex: 1,
areaStyle: {
normal: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#fff58a30',
},
{
offset: 0.6,
color: '#fff58a20',
},
{
offset: 1,
color: '#fff58a10',
},
],
false
),
},
},
data: dataValue1,
},
{
name: "3",
type: "bar",
barWidth: 20,
barGap: "40%",
data: [
40, 35, 34, 15, 56, 15, 12, 25, 34, 42, 20, 30,
],
itemStyle: {
},
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#44f4fb',
},
{
offset: 1,
color: '#44f4fb30'
}
]),
},
]
}