在html中使用Echarts.js绘制柱状图

一、需求描述

最近在工作中，遇到了一个需求，让我实现一个柱状图，本来想的是一个柱状图能有多难，echarts.js 随便搞搞不就出来了?结果在做的时候发现，需求确实不难，但是我实在是太菜了，第一次使用echarts，看文档差点给我看出老花眼，这配置项也太多了吧，哪儿是哪儿啊！！！再难也得实现不是，只能一点点尝试，最后终于做出来了，其中踩过最大的坑就是文档版本跟我的echarts.js文件版本不匹配，我的echarts.js版本是4.x的，对应文档为：echarts配置项文档。

该柱状图样式如下：

柱状图需求点：

1. 横坐标为作业名称，作业名称一行6个字符，最多两行，超出显示省略号。
2. 纵坐标为百分比数字，分为5个刻度，且每个刻度在坐标系中都有延伸虚线。
3. 柱状图默认为半透明的蓝色，鼠标hover之后变色，并以浮窗的形式展示该条数据的相关信息。
4. 当数据量超过10条时，x轴下面有横向滚动条，默认每屏展示10条数据，数据之间的间距相等，可以通过滚动条来滚动查看前后的数据。

二、具体代码

html文件

  
<div class="score-chart" id="score-chart">div>

  
<script src="../lib/echarts/echarts.min.js">script>
  
<script src="../scripts/score-chart.js">script>

score-chart.js文件

// 具体的配置项信息
option = {
  // hover时的提示浮窗
  tooltip: {
    trigger: 'axis', // 触发类型 坐标轴触发
    backgroundColor: '#fff',// 通过设置rgba调节背景颜色与透明度
    borderColor: '#5098F8', 
    extraCssText: 'box-shadow: 0px 3px 5px 0px rgba(80,152,248,0.2);', // 给浮窗设置的css样式
    borderWidth: 1,
    padding: [15,10,15,10],
    textStyle: {
        color: '#333',
        lineHeight: 24,
    },
    axisPointer: {            // 坐标轴指示器，坐标轴触发有效  // 默认为直线，可选为：'line' | 'shadow' | 'none'
        type: 'none'
    },
    formatter: function(params) { // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式 此处为回调函数
      var str = params[0].data.name +'
   · 已识别：' + params[0].data.num1+'人
   · 未识别：' + params[0].data.num2+'人
   · 得分率：' + params[0].data.value + '%'
      return str
    }
  },
  // 模拟x轴的横向滑动条
  dataZoom: {
    type: 'slider', // 滑动条类型
    show: true,
    height: 5, // 设置高度
    xAxisIndex: 0, // 设置关联的x轴 如果只有一个，可以不写
    filterMode: 'none', // 设置数据过滤模式
    backgroundColor: '#fff',
    borderColor: '#fff',
    fillerColor: '#eee', // 滚动条颜色
    showDetail: false, // 是否展示滚动条起始位置数据信息和结束位置数据信息
    bottom: 5, // 距离底部的位置
    dataBackground: { // 调整数据阴影的位置
      lineStyle: {
        color: '#fff'
      },
      areaStyle: {
        color: '#fff'
      }
    },
    startValue: 0, // 滚动条起始位置
    endValue: 9, // 滚动条结束为止
    zoomLock: true, // 锁定数据窗口（滚动条）大小 使其不可调节
    handleSize: 0 // 控制手柄大小
  },
  // x轴相关
  xAxis: {
    type: 'category', // 轴类型
    // 设置不展示轴线
    axisLine: {
      show: false
    },
    // 不显示坐标轴刻度
    axisTick: {
      show: false,
      interval: 0
    },
    // 坐标轴刻度元素相关
    axisLabel: {
      show: true,
      interval: 0, // 刻度之间的距离
      margin: 10, // 刻度与轴线之前的间隔
      // rotate: -45
      formatter: function (value) { // 刻度标签（x轴坐标）的内容格式器，支持字符串模板和回调函数两种形式
        var str = "";
        var num = 6; //每行显示字数 
        var valLength = value.length; //该项x轴字数  
        var rowNum = Math.ceil(valLength / num); // 行数  
        if (valLength > 12) {
          str = value.substring(0, num) + '\n' + value.substring(num, 2*num-2) + ' ... '
          return str;
        }
        else {
          for (var i = 0; i < rowNum; i++) {
            var temp = "";
            var start = i * num;
            var end = start + num;
            temp = value.substring(start, end) + "\n";
              str += temp;
          }
          return str;
        }
      }
    },
    // 这里设置x轴的坐标
    data: ['作业1作业1作业1作业1作业1作业1作业1作业1', '作业2作业2作业2作业2', '作业3', '作业4', '作业5','作业6', '作业7', '作业8', '作业9', '作业10','作业11', '作业12', '作业13'],
  },
  // y轴相关
  yAxis: [{
    type: "value", // 轴类型
    // 不显示轴线
    axisLine: {
      show: false
    },
    // 不显示坐标轴刻度
    axisTick: {
      show: false
    },
    // 不展示坐标轴在 grid 区域中的分隔线
    splitLine: {
      show: false
    },
    axisLabel: {
      formatter: function(val) { // 刻度标签（y轴坐标）的内容格式器，支持字符串模板和回调函数两种形式
        return val + '%'
      }
    },
    max: 100, // 坐标轴刻度最大值
    min: 0 // 坐标轴刻度最小值
  }],
  series: [
    {
      type: 'bar', // 设置图表类型
      name: 'score',
      coordinateSystem: 'cartesian2d', // 该图表使用的坐标系 此处为二维直角坐标系
      // 柱子宽度
      barWidth: 22,
      // 柱子间距
      barCategoryGap: '100%',
      // y轴的延伸横线
      markLine: {
        // 是否响应鼠标事件
        silent: true,
        label: {
          show: false
        },
        symbol: 'none',
        // 那些刻度展示延伸横线
        data: [{
          yAxis: 0,
        },{
          yAxis: 20
        },{
          yAxis: 40
        },{
          yAxis: 60
        },{
          yAxis: 80
        },{
          yAxis: 100
        }],
      },
      // 柱状图相关
      itemStyle: {
        barBorderRadius: [4,4,4,4],
        color: 'rgba(106,174,242,0.5)',
      },
       //鼠标悬停时：
       emphasis: {
        disabled: false,
        itemStyle: {
          color: 'rgba(106,174,242,1)'
        }
      },
      // 这里设置整体的柱状图数据  name属性需要与上面x轴的data相对应
      data:[
        {
          name: '作业1作业1作业1作业1作业1作业1作业1作业1', // 作业名
          value: 10, // 得分率
          num1: '10', // 已识别人数 ，此处如果改动字段名 上面浮窗展示需要同步修改字段名
          num2: '12' // 未识别人数
        },
        {
          name: '作业2',
          value: 80,
          num1: '20',
          num2: '22'
        },
        {
          name: '作业3',
          value: 30,
          num1: '30',
          num2: '32'
        },
        {
          name: '作业4',
          value: 40,
          num1: '40',
          num2: '42'
        },
        {
          name: '作业5',
          value: 30,
          num1: '40',
          num2: '42'
        },
        {
          name: '作业6',
          value: 45,
          num1: '40',
          num2: '42'
        },
        {
          name: '作业7',
          value: 50,
          num1: '40',
          num2: '42'
        },
        {
          name: '作业8',
          value: 90,
          num1: '40',
          num2: '42'
        },
        {
          name: '作业9',
          value: 65,
          num1: '40',
          num2: '42'
        },
        {
          name: '作业10',
          value: 73,
          num1: '40',
          num2: '42'
        },
        {
          name: '作业11',
          value: 54,
          num1: '110',
          num2: '42'
        },
        {
          name: '作业12',
          value: 60,
          num1: '40',
          num2: '42'
        },
        {
          name: '作业13',
          value: 90,
          num1: '40',
          num2: '42'
        }
      ]
    }
  ]
};
// 获取到页面上作为echarts画布的元素
var dom = document.getElementById("score-chart");
// 使用echarts进行初始化
var myChart = echarts.init(dom);
// 将配置项应用在初始化过的myChart中
myChart.setOption(option);