正文

echarts 双Y轴图表

IP云
IP云V管理员/3 阅读
08/07
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

直接代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://www.echartsjs.com/examples/vendors/echarts/echarts.min.js?_v_=1571424732409"></script>
</head>
<body>
<!--支出表-->
<div style="width: 1000px;height: 500px;background-color: #222222" id="test1">
</div>
</body><script>
var chart1 = echarts.init(document.getElementById('test1'));
var option = {
title: [
{
top: '40%',
left: 10,
subtextStyle: {
align: 'left',
color: '#ffffff',
fontSize: 12,
},
subtext: '每\n月\n执\n行\n金\n额'// \n换行
},
{
top: '40%',
right: 10,
subtextStyle: {
align: 'right',
color: '#ffffff',
fontSize: 12,
},
subtext: '累\n计\n执\n行\n金\n额'
},
],
grid: {
top: 100
},
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(70, 131, 254, 0)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(70, 131, 254, 0.5)' // 100% 处的颜色
}],
global: false // 缺省为 false
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
data: [
{name: '每月预计支出', icon: 'circle'},
{name: '每月实际支出', icon: 'circle'},
{name: '累计预计支出'},
{name: '累计实际支出'}
],
textStyle: {
color: '#ffffff',
fontSize: 11
},
y: 'bottom',
x: 'center',
},
xAxis: [
{
type: 'category',
axisLine: {
lineStyle: {
color: '#1F7EFF',
width: 1
}
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisPointer: {
type: 'shadow'
},
axisLabel: {
interval: 0,//横轴信息全部显示
textStyle: {
color: '#fff'
},
fontSize: 11,
// rotate:45,//度角倾斜显示
formatter: function (value) {
return value.length > 5 ? value.substring(0, 5) + '...' : value;
}
}
}
],
yAxis: [//这里配置两条Y轴
{
type: 'value',
splitLine: {
show: true,
lineStyle: {
color: '#021439',
width: 1
}
},
axisLine: {
lineStyle: {
color: '#1F7EFF',
width: 1
}
},
axisLabel: {
show: true,
textStyle: {
color: '#fff'
},
fontSize: 11,
interval: 'auto',
formatter: '{value}'
},
name: '单位（万）',
nameTextStyle: {
color: '#fff'
}
},
{
type: 'value',
splitLine: {
show: true,
lineStyle: {
color: '#021439',
width: 1
}
},
axisLine: {
lineStyle: {
color: '#1F7EFF',
width: 1
}
},
axisLabel: {
show: true,
textStyle: {
color: '#fff'
},
fontSize: 11,
interval: 'auto',
formatter: '{value}'
},
name: '单位（万）',
nameTextStyle: {
color: '#fff',
fontSize: 11,
}
}
],
series: [
{
name: '每月预计支出',
barWidth: '30%',
type: 'bar',
itemStyle: {
normal: {
lineStyle: {
color: '#E09C19'
},
color: '#5184F2',
}
},
yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
data: [
0
, 0
, 6
, 17
, 22
, 26
, 41
, 48
, 59
, 69
, 75
, 90
]
},
{
name: '每月实际支出',
barWidth: '30%',
type: 'bar',
itemStyle: {
normal: {
lineStyle: {
color: '#E09C19'
},
color: '#FF991E',
}
},
yAxisIndex: 0,
data: [
0
, 0
, 10
, 15
, 25
, 30
, 35
, 50
, 55
, 70
, 80
, 85
]
},
{
name: '累计预计支出',
barWidth: '30%',
type: 'line',
itemStyle: {
normal: {
lineStyle: {
color: '#E63234'
},
fontSize: 11,
color: '#E63234',
}
},
symbol: 'circle',
symbolSize: 10, //折线点的大小
yAxisIndex: 1, ////使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
data: [
0
, 0
, 6
, 23
, 45
, 71
, 112
, 160
, 219
, 288
, 363
, 453]
},
{
name: '累计实际支出',
barWidth: '30%',
type: 'line',
itemStyle: {
normal: {
lineStyle: {
color: '#42C96E'
},
fontSize: 11,
color: '#6AC3F1',
}
},
symbol: 'circle',
symbolSize: 10, //折线点的大小
yAxisIndex: 1,
data: [
0
, 0
, 10
, 25
, 50
, 80
, 115
, 165
, 220
, 290
, 370
, 455
]
},
],
}
;
chart1.setOption(option);
</script></html>