echarts实现柱状图排列图表效果代码
代码语言:html
所属分类:图表
代码描述:echarts实现柱状图排列图表效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = '柱状图框选';
var xAxisData = [];
var data1 = [];
var data2 = [];
var data3 = [];
var data4 = [];
for (var i = 0; i < 10; i++) {
xAxisData.push('Class' + i);
data1.push((Math.random() * 2).toFixed(2));
data2.push(-Math.random().toFixed(2));
data3.push((Math.random() * 5).toFixed(2));
data4.push((Math.random() + 0.3).toFixed(2));
}
var itemStyle = {
normal: {},
emphasis: {
barBorderWidth: 1,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0,0,0,0.5)'
}
};
option = {
backgroundColor: '#eee',
legend: {
data: ['bar', 'bar2', 'bar3', 'bar4'],
align: 'left',
left: 10
},
brush: {
toolbox: ['rect', 'polygon.........完整代码请登录后点击上方下载按钮下载查看
网友评论0