console
const chart = echarts.init(document.querySelector('.chart'))
const option = {
color: '#4c91ff',
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
axisLabel: {
show: true,
textStyle: {
color: '#63779a'
},
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#63779a',
}
}
},
yAxis: {
type: 'value',
axisLabel: { // 坐标轴字体颜色
show: true,
textStyle: {
color: '#63779a'
},
},
splitLine: { // 坐标轴分隔线样式
show: true,
lineStyle:{
color: ['#e7e7e7'],
width: 1,
type: 'dotte'
}
},
axisLine: { show: false }, // 隐藏坐标轴
axisTick: { show: false }, // 隐藏刻度
},
grid: {
height: '78%',
width: '82%',
x: '13%',
y: '10%',
},
legend: {
data: ['维修次数'],
left: 99999, // 隐藏 legend
},
tooltip : {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function(data) {
data = data[0]
return data.name + '</br>' + data.seriesName + '：' + data.data
},
textStyle: {
fontSize: 12,
}
},
series: [{
data: [120, 200, 150, 80, 70, 110],
name: '维修次数',
type: 'bar',
barWidth: 15,
showBackground: true,
backgroundStyle: {
color: '#ebf0f5'
},
label: { // 柱状图上面显示数据
show: true,
position: 'top'
},
itemStyle: { // 渐变色
normal: {
barBorderRadius: 20,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#99d9ea',
}, {
offset: 1,
color: '#3fa7dc',
}]),
shadowColor: 'rgba(0, 0, 0, 0.4)',
shadowBlur: 20,
},
},
}]
}
chart.setOption(option)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo</title>
<script crossorigin="anonymous" integrity="sha384-DX1FVVXdGcNR016Jj6c5WuxYmyUvkb2/0ZMXKwbXaXs8j9tPs3e4RUjNg4tViEj4" src="https://lib.baomitu.com/echarts/4.7.0/echarts-en.common.js"></script>
</head>
<body>
<div class="chart"></div>
</body>
</html>
body {
background: #fff;
}
.chart {
width: 400px;
height: 400px;
}