<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
#chart-panel {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 1000px;
height: 750px;
}
</style>
<script src="./lib/5.5.0/echarts.min.js"></script>
</head>
<body>
<div id="chart-panel"></div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<script type="text/javascript">
//初始化图表对象。
var myChart = echarts.init(document.getElementById('chart-panel'), 'dark');
//图表配置。
let xAxisData = [
"01",
"02",
"03",
"04",
"05",
"06",
"07",
"08",
"09",
"10",
"12",
"13",
"14",
"15",
"16",
"17",
];
let option = {
toolbox: {
show: true,
feature: {
saveAsImage: {},
},
},
grid: {
left: "3%",
top: "5%",
right: "3%",
bottom: "5%",
containLabel: true,
},
tooltip: {
show: true
},
visualMap: [
{
type: "piecewise",
show: true,
pieces: [
{
min: 0,
max: 80,
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: "linear",
global: false,
colorStops: [
{
offset: 0,
color: "rgba(0,255,255,0.8)",
},
{
offset: 1,
color: "rgba(0,255,255,0)",
},
],
},
},
{
min: 80,
max: 200,
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: "linear",
global: false,
colorStops: [
{
offset: 0,
color: "rgba(255,240,0,0.8)",
},
{
offset: 1,
color: "rgba(255,240,0,0)",
},
],
},
},
],
},
],
xAxis: [
{
type: "category",
data: xAxisData,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
fontSize: 16,
color: "#FFFFFF",
},
offset: 9,
},
],
yAxis: [
{
type: "value",
name: "单位",
nameGap: 20,
nameTextStyle: {
align: "right",
},
axisLabel: {
color: "#F1F1F1",
fontSize: 18,
},
splitLine: {
lineStyle: {
opacity: 0.2,
type: "dashed",
},
show: true,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
interval: 38,
},
],
series: [
{
type: "bar",
data: [75, 50, 75, 113, 60, 110, 130, 55, 83, 40, 55, 50, 30, 38, 75, 50],
barMaxWidth: 15,
showBackground: true,
backgroundStyle: {
opacity: 0.5,
},
},
{
type: "pictorialBar",
data: [75, 50, 75, 113, 60, 110, 130, 55, 83, 40, 55, 50, 30, 38, 75, 50],
symbol: "rect",
symbolPosition: "end",
symbolOffset: ["0", "-6"],
symbolSize: [16, 3],
},
],
};
//将图表对象和图表配置进行关联。
myChart.setOption(option);
</script>
</body>
</html>
