Echarts在线免费图表

 
            option = {
    tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
    backgroundColor: '#fff',
    textStyle: {
      // 提示框浮层的文本样式。
      color: '#333',
      fontStyle: 'normal',
      fontWeight: 'normal',
      fontFamily: 'sans-serif',
      fontSize: 14,
    },
    formatter: '{b} : {c}',
  },
  dataZoom: [
    {
      orient: 'horizontal',
      type: 'inside',
      show: false, // 控制滚动条显示隐藏
      realtime: true, // 拖动滚动条时是否动态的更新图表数据
      // height: 25, // 滚动条高度
      // start: 0, // 滚动条开始位置（共100等份）
      // end: 2, // 滚动条结束位置
      bottom: '4%',
      zoomLock: false, // 控制面板是否进行缩放
      minValueSpan: 10,
      maxValueSpan: 5,
    },
  ],
  xAxis: {
    type: 'category',
    axisTick: {
      alignWithLabel: true,
    },
    axisLine: {
      lineStyle: {
        type: 'solid',
        color: '#eee', // 左边线的颜色
        width: '1', // 坐标线的宽度
      },
    },
    axisLabel: {
      interval: 0,
      textStyle: {
        color: '#333', // 坐标值得具体的颜色
        fontSize: 12,
      },
      formatter: function (value) {
        let ret = ''
        let maxLength = 7
        let valLength = value.length
        let rowN = Math.ceil(valLength / maxLength)
        if (rowN > 1) {
          for (let i = 0; i < rowN; i += 1) {
            let temp = ''
            let start = i * maxLength
            let end = start + maxLength
            temp = `${value.substring(start, end)}\n`
            ret += temp
          }
          return ret
        }
        return value
      },
    },
    data: ['测试1','测试2','测试3','测试4','测试5','测试6','测试7','测试8','测试9','测试10','测试11','测试12'],
  },
  grid: {
    bottom: '20px',
    top: '26px',
    containLabel: true,
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      barWidth: 30,
      label: {
        show: true,
        color: '#4A90E2',
        position: 'top',
      },
      itemStyle: {
        color: '#4A90E2',
      },
      data: [1,2,3,4,5,6,7,8,9,10,11,12],
    },
  ],
};