echarts实现柱状图排列图表效果代码

代码语言:html

所属分类:图表

代码描述:echarts实现柱状图排列图表效果代码

代码标签: 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