Echarts在线免费图表

 
            let xData = ['2013年', '2014年', '2015年', '2016年', '2017年', '2018年', '2019年', '2020年', '2021年']; // 类型
var data1Arr = [580, 900, 720, 700, 810, 815, 800, 580, 900]; // 数据1
var data2Arr = [720, 700, 810, 815, 800, 580, 900, 720, 700]; // 数据2
var data3Arr = [580, 900, 720, 580, 700, 810, 815, 800, 700]; // 数据3
var data4Arr = [720, 700, 810, 815, 800, 580, 900, 720, 700]; // 数据4

var dataName = ['类型1', '类型2', '类型3', '类型4'];
let zoomShow = xData.length > 9

let dataList = [data1Arr, data2Arr, data3Arr, data4Arr];
let colorList = ["#397EF0", "#3ED89B", "#F9D648", "#FF7A96"];

let seriousList = [];
dataName.map((item, index) => {
   seriousList.push({
      name: dataName[index],
      label: {
         show: false,
      },
      color: colorList[index],
      itemStyle: {
         barBorderRadius: [2, 2, 0, 0],
      },
      type: "bar",
      barWidth: "12", //柱型宽度
      data: dataList[index],
   })
})

option = {
   tooltip: {
      trigger: "axis",
      axisPointer: {
         type: 'none'
      },
      textStyle: {
         fontSize: 14,
      },
   },
   dataZoom: [{
      show: zoomShow, //flase直接隐藏图形
      type: 'slider',
      backgroundColor: 'transparent',
      brushSelect: false, // 是否开启刷选功能
      zoomLock: false, // 是否锁定选择区域大小
      height: 7,
      //left: 'center', //滚动条靠左侧的百分比
      bottom: 0,
      startValue: 0, //滚动条的起始位置
      endValue: 8, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
      handleStyle: {
         color: '#E8E8E8',
         borderColor: '#E8E8E8',
      },
      fillerColor: '#E8E8E8',
      borderColor: 'transparent',
      showDetail: false,
      dataBackground: {
         areaStyle: {
            opacity: 0
         },
         lineStyle: {
            color: 'transparent'
         },
      },
   }],
   legend: {
      data: dataName,
      right: "24",
      top: '25',
      //icon: "circle",
      itemWidth: 15, // 设置宽度
      itemHeight: 15, // 设置高度
      itemGap: 32,
      textStyle: {
         color: 'rgba(0, 0, 0, 0.85)',
         fontFamily: 'Source Han Sans CN-Regular',
         fontSize: 14,
         padding: [0, 0, 0, 5]
      },
   },
   grid: {
      left: "24",
      right: "24",
      bottom: zoomShow ? "50" : "22",//下边距,
      top: '78',
      containLabel: true,
   },
   xAxis: [{
      type: "category",
      axisLine: {
         show: true,
         lineStyle: {
            color: "#cccccc",
         },
      },
      axisTick: {
         show: false,
      },
      axisLabel: {
         color: "rgba(0, 0, 0, 0.85)",
         textStyle: {
            fontSize: 14,
            fontFamily: 'Source Han Sans CN-Regular',
         },
      },
      data: xData,
   },],
   yAxis: [{
      name: '单位：人',
      nameTextStyle: {
         color: 'rgba(0, 0, 0, 0.45)',
         fontSize: 14,
         fontFamily: 'Source Han Sans CN-Regular',
         align: "left",
         padding: [0, 0, -5, 0]
      },
      type: "value",
      splitLine: { //y轴网格线
         lineStyle: {
            color: "rgba(0, 0, 0, 0.1)",
            type: 'dashed',
         },
      },
      axisLabel: { //y轴文本
         //showMinLabel: false, //y轴是否设置最小刻度0
         color: "rgba(0, 0, 0, 0.85)",
         textStyle: {
            fontSize: 14,
            fontFamily: 'Source Han Sans CN-Regular',
         },
      },
      axisTick: {
         show: false,
      },
      axisLine: { //y轴线
         show: false,
         lineStyle: {
            color: '#D1D1D1',
         },
      },
   },],
   series: seriousList
};
option && myChart.setOption(option);