option = {
backgroundColor: '#081736',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: [
{
top: "5.5%",
left: "60%",
textStyle: {
color: "#fff",
fontSize: 20,
fontFamily: "微软雅黑",
},
itemWidth: 20,
itemHeight: 20,
data: [
{
name: "1",
icon: "rect",
},
],
},
{
data: [
{
name: "2",
icon: "rect",
},
],
itemWidth: 30,
itemHeight: 2,
top: "6%",
left: "40%",
textStyle: {
color: "#fff",
// fontWeight: "normal",
fontSize: 20,
},
},
],
grid: {
top: '20%',
right: '10%',
left: '10%',
bottom: '20%'
},
xAxis: [{
type: 'category',
axisLabel: {
color: '#fff',
interval: 0, fontSize: 22,
},
axisLine: {
show: true,
lineStyle: {
color: '#0a3e98'
}
},
axisTick: {
show: false,
},
splitLine: {
show: false,
lineStyle: {
color: '#195384',
type: "dotted",
}
},
data: ['1月', '2月', '3月', '4月', '5月']
}],
yAxis: [
{
type: 'value',
name: "c",
min: 0,
nameTextStyle: {
color: "#fff",
fontSize: 22,
},
axisLine: {
lineStyle: {
color: '#0a3e98'
}
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: '#0a3e98',
type: "dotted",
}
},
axisLabel: {
formatter: '{value}',
textStyle: {
color: "#fff", fontSize: 22,
}
},
},
{
type: 'value',
name: "%",
min: 0,
nameTextStyle: {
color: "#fff",
fontSize: 22,
},
axisLine: {
lineStyle: {
color: '#0a3e98'
}
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: '#0a3e98',
type: "dotted",
}
},
axisLabel: {
formatter: '{value}',
textStyle: {
color: "#fff", fontSize: 22,
}
},
}
],
series: [
{
name: "1",
type: 'pictorialBar',
symbolSize: [20, 10],
symbolOffset: [0, -6],
symbolPosition: 'end',
z: 12,
// "barWidth": "0",
tooltip: {
show: false
},
color: "#008ed7",
data: ['43', '19', '18', '32', '17']
},
{
name: '',
type: 'pictorialBar',
symbolSize: [20, 10],
symbolOffset: [0, 7],
// "barWidth": "20",
z: 12,
tooltip: {
show: false
},
color: "#00abff",
data: ['43', '19', '18', '32', '17']
},
{
type: 'bar',
//silent: true,
barWidth: "20",
barGap: '10%', // Make series be overlap
barCateGoryGap: '10%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
offset: 0,
color: "#00d7ff"
},
{
offset: 1,
color: "#00abff"
}
]),
opacity: 1
},
},
data: ['43', '19', '18', '32', '17']
},
{
name: '2',
type: 'line',
yAxisIndex: 1,
// symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
smooth: true,
symbolSize:0,
lineStyle: {
normal: {
width: 8,
color: '#29a5d5', // 线条颜色
},
},
itemStyle: {
normal: {
color: '#071c33',//拐点颜色
borderColor: '#2db6e9',//拐点边框颜色
borderWidth: 2,//拐点边框大小
// label: {
// show: true, //开启显示
// color: '#fff',
// position: 'top', //在上方显示
// formatter: function (res) {
// if (res.value) {
// return res.value
// } else {
// return 0
// }
// },
// },
},
},
// symbolSize: 8, //设定实心点的大小
areaStyle: {
normal: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#29a5d530',
},
{
offset: 0.6,
color: '#29a5d520',
},
{
offset: 1,
color: '#29a5d510',
},
],
false
),
},
},
data: ['48', '24', '23', '37', '22'],
}
]
};