<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Echarts图表</title>
<!-- 引入echarts.min.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
color: ['#7ecef4'],
backgroundColor: '#000',
grid: {
left: 20,
rigth: 20,
top: 13,
bottom: 6,
containLabel: true
},
//x轴
xAxis: {
//坐标轴类型,'value'数值轴,适用于连续数据
type: 'value',
//坐标轴线
axisLine: {
//坐标轴线的样式
lineStyle: {
color: 'rgba(255,255,255,.2)'
}
},
//坐标轴在 grid 区域中的分隔线
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0)'
}
},
//坐标轴刻度标签的相关设置
axisLabel: {
color: 'rgba(255,255,255,0)'
},
//坐标轴两端空白策略,数组内数值代表百分比
boundaryGap: [0, 0.01]
},
yAxis: {
// 类目轴
type: 'category',
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.5)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)'
}
},
axisLabel: {
color: 'rgba(255,255,255,.5)'
},
data: ['未调节', '调节中', '未调节']
},
series: [{
naem: '2011年',
//类型为柱形
type: 'bar',
//柱形的宽度
barWidth: 30,
//图形样式,normal是图形在默认状态下的样式
itemStyle: {
normal: {
//背景渐变内置生成器
color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
//偏移
offset: 0,
color: 'rgba(230,253,139,.7)'
},
{
offset: 1,
color: 'rgba(41,220,205,.7)'
}
])
}
},
data: [18203, 23489, 29034]
}]
};
myChart.setOption(option);
</script>
</body>
</html>
Echarts图表之柱状图
最新推荐文章于 2024-05-10 21:07:48 发布