直接代碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://www.echartsjs.com/examples/vendors/echa ...
直接代碼：
<!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>
