echarts实现柱状图排列图表效果代码-html代码-BFW代码库

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', 'lineX', 'lineY', 'keep', 'clear'],
          xAxisIndex: 0
      },
      toolbox: {
          feature: {
              magicType: {
                  type: ['stack', 'tiled']
              },
              dataView: {}
          }
      },
      tooltip: {},
      xAxis: {
          data: xAxisData,
          name: 'X Axis',
          silent: false,
          axisLine: {
              onZero: true
          },
          splitLine: {
              show: false
          },
          splitArea: {
              show: false
          }
      },
      yAxis: {
          inverse: true,
          splitArea: {
              show: false
          }
      },
      grid: {
     .........完整代码请登录后点击上方下载按钮下载查看