Echarts在线免费图表

 
            var res = [
  { "name": "测试", "value": 7, "value2": 7 },
  { "name": "测试2", "value": 7, "value2": 6 },
  { "name": "测试3", "value": 8, "value2": 6 },
  { "name": "测试4", "value": 17, "value2": 6 },
  { "name": "测试5", "value": 23, "value2": 6 },
  { "name": "测试6", "value": 7, "value2": 6 },
  { "name": "测试7", "value": 8, "value2": 6 },
  { "name": "测试8", "value": 17, "value2": 6 },
  { "name": "测试9", "value": 23, "value2": 6 },
  { "name": "测试10", "value": 7, "value2": 6 },
  { "name": "测试11", "value": 8, "value2": 6 },
  { "name": "测试12", "value": 17, "value2": 6 },
  { "name": "测试13", "value": 23, "value2": 6 }
];

// 自定义tooltip小圆点
const dotHtml1 =
  '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#01F1E3"></span>';
const dotHtml2 =
  '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#d79456"></span>';
let option = {
  backgroundColor: 'black',
  grid: {
    left: '20%',
    top: '28%',
    right: '10%',
    bottom: '10%',
  },
  tooltip: {
    trigger: 'axis',
    backgroundColor: '#05050F', // 提示框背景色
    borderColor: '#05050F', // 提示框边框色
    textStyle: {
      color: '#fff', // 提示框文本颜色
    },
    axisPointer: {
      type: 'none',
    },
    formatter: '<div>{b}</div>'
      + '<div>' + dotHtml1 + '在册人数：{c0} 人</div>'
      + '<div>' + dotHtml2 + '在场人数：{c1} 人</div>',

  },
  legend: {
    data: ['在场人数', '在册人数'],
    right: '80',
    top: '100',
    textStyle: {
      //文字样式
      color: '#fff',
      fontSize: '12',
    }
  },

  // Y滑动框
  dataZoom: [
    //Y轴滑动条
    {
      type: 'inside', //滑动条
      show: true,      //开启
      yAxisIndex: 0,
      startValue: 0,
      endValue: 10,
      filterMode: 'filter',
      height: 4,
      bottom: 10,
      handleSize: '300%',
      left: '93%',  //滑动条位置
      start: 1,    //初始化时，滑动条宽度开始标度
      end: 50      //初始化时，滑动条宽度结束标度
    },
    //y轴内置滑动
    {
      type: 'inside',  //内置滑动，随鼠标滚轮展示
      yAxisIndex: 0,
      startValue: 0,
      endValue: 10,
      filterMode: 'filter',
      height: 4,
      bottom: 10,
      handleSize: '300%',
      start: 1,//初始化时，滑动条宽度开始标度
      end: 50  //初始化时，滑动条宽度结束标度

    }],
  xAxis: {
    type: 'value',
    position: "top",
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(98, 162, 205, 0.4)',
      },
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      textStyle: {
        color: '#fff',
        fontSize: 12,
      },
    },
    axisLine: {
      show: false,
    },
  },
  yAxis: {
    type: 'category',
    splitLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    data: res.map(function (item) {
      return item.name;
    }),
    axisLabel: {
      textStyle: {
        color: '#fff',
        fontSize: 12,
      },
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(98, 162, 205, 0.4)',
      },
    },
  },
  series: [
    {
      name: '在场人数',
      type: 'bar',
      data: res.map(function (item) {
        return item.value2;
      }),
      itemStyle: {
        emphasis: {
          barBorderRadius: [0, 20, 20, 0],
        },
        normal: {
          barBorderRadius: [0, 20, 20, 0],
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            1,
            0,
            [
              {
                offset: 0,
                color: 'rgba(2, 22, 80, 0.3)', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(0, 255, 255, 0.8)', // 100% 处的颜色
              },
            ],
            false
          ),
        },
      },
      label: {
        normal: {
          show: false,
          formatter: '{c}',
          position: 'insideRight',
          offset: [-2, 1.5],
          textStyle: {
            color: '#fff',
            fontSize: 10,
          },
        },
      },
    },
    {
      name: '在册人数',
      textStyle: {
        // 提示框浮层的文本样式。
        color: '#fff',
        fontStyle: 'normal',
        fontWeight: 'normal',
        fontFamily: 'sans-serif',
        fontSize: 14,
      },
      type: 'bar',
      z: -10,
      data: res.map(function (item) {
        return item.value;
      }),
      barGap: '-100%',
      itemStyle: {
        color: 'rgba(0,0,0,0)',
        borderColor: '#fff',
        padding: 0,
        emphasis: {
          barBorderRadius: [0, 20, 20, 0],
        },
        normal: {
          barBorderRadius: [0, 20, 20, 0],
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            1,
            0,
            [
              {
                offset: 0,
                color: 'rgba(2, 30, 86, 0.1)', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(255, 177, 102, 0.9)', // 100% 处的颜色
              },
            ],
            false
          ),
        },
      },
      label: {
        normal: {
          show: false,
          lineHeight: 12,
          formatter: '{c}',
          position: 'right',
          right: 0,
          textStyle: {
            color: '#fff',
            fontSize: 12,
          },
        },
      },
    },
  ],
  barCategoryGap: '60%',
};