Echarts在线免费图表

 
            const color = ['#0076F6', '#6AC4D6', '#FFC876', '#29B1FF']
option = {
   //你的代码
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: 'shadow',
      },
      formatter: function (param) {
         //自定义tooltip内容
         // console.log("数据=========", param);
         var text = ''
         text += `<div style="background:#ffffff;"> 
										<div style="color:#1D2129;font-weight:600;">${param[0].axisValueLabel}</div> 
										<div style="background:#ffffff;margin:2px;padding:2px 4px;color:#000000;margint-bottom:10px">
											<b style="display:inline-block;border-radius:6px;width:10px;height:10px;background-color:${param[0].color}"></b>
											<span style="color:#989DAA;font-weight:600;">${param[0].seriesName} </span> 
											<span style="float:right;font-weight:600;color:${param[0].color};">${param[0].value} 
												<span style="color:#989DAA;font-weight:600;">桶</span>
											</span> 
										</div> 
										<div  style="background:#ffffff;margin:2px;padding:2px 4px;color:#000000;margint-bottom:10px"> 
											<b style="display:inline-block;border-radius:6px;width:10px;height:10px;background-color:${param[1].color}"></b>
											<span style="color:#989DAA;font-weight:600; margin-right:50px;">${param[1].seriesName} </span> 
											<span style="float:right;font-weight:600;color:${param[1].color};">${param[1].value} 
												<span style="color:#989DAA;font-weight:600;">桶</span>
											</span> 
										</div> 
										<div  style="background:#ffffff;margin:2px;padding:2px 4px;color:#000000;margint-bottom:10px"> 
											<b style="display:inline-block;border-radius:6px;width:10px;height:10px;background-color:${param[2].color}"></b>
											<span style="color:#989DAA;font-weight:600; margin-right:50px;">${param[2].seriesName} </span> 
											<span style="float:right;font-weight:600;color:${param[2].color};">${param[2].value} 
												<span style="color:#989DAA;font-weight:600;">桶</span>
											</span> 
										</div> 
										<div  style="background:#ffffff;margin:2px;padding:2px 4px;color:#000000;margint-bottom:10px"> 
											<b style="display:inline-block;border-radius:6px;width:10px;height:10px;background-color:${param[3].color}"></b>
											<span style="color:#989DAA;font-weight:600; margin-right:50px;">${param[3].seriesName} </span> 
											<span style="float:right;font-weight:600;color:${param[3].color};">${param[3].value} 
												<span style="color:#989DAA;font-weight:600;">桶</span>
											</span> 
											
										</div> 
									</div>`
         return text
      },
   },
   legend: {
      show: true,
      x: 'right',
      y: 'top',
      icon: 'circle',
   },
   textStyle: {
      color: '#2C3E50',
   },
   grid: {
      top: '18%',
      right: '1%',
      bottom: '0%',
      left: '1%',
      containLabel: true,
   },
   xAxis: [
      {
         type: 'category',
         data: [
            '1月产废部门名称占位',
            '2月产废部门名称占位',
            '3月产废部门名称占位',
            '4月产废部门名称占位',
            '5月产废部门名称占位',
            '6月产废部门名称占位',
            '7月产废部门名称占位',
            '8月产废部门名称占位',
            '9月产废部门名称占位',
            '10月产废部门名称占位',
            '11月产废部门名称占位',
            '12月产废部门名称占位',
         ],

         axisLabel: {
            color: '#606266',
            fontSize: 13,
            rotate: 10,
            align: 'center',
            lineHeight: -20,
            verticalAlign: 'bottom',
         },
         axisTick: {
            show: false,
         },
         splitLine: {
            show: false,
         },
         axisLine: {
            show: false,
         },
      },
   ],
   yAxis: [
      {
         type: 'value',
         nameTextStyle: {
            color: '#989DAA',
            fontSize: 12,
         },
         splitNumber: 4,
         axisLabel: {
            color: '#989DAA',
         },
         axisTick: {
            show: false,
         },
         splitLine: {
            show: true,
            lineStyle: {
               color: '#E5E6EB',
            },
         },
         axisLine: {
            show: false,
         },
      },
   ],
   color: color,
   series: [
      {
         name: '废矿物油',
         type: 'bar',
         stack: 'user',
         barWidth: 40,
         itemStyle: {
            normal: {
               barBorderRadius: [0, 0, 4, 4],
            },
         },
         data: [90, 132, 101, 134, 220, 182, 191, 234, 191, 234, 132, 101],
      },
      {
         name: '废油漆桶',
         type: 'bar',
         stack: 'user',
         barWidth: 40,
         data: [220, 182, 191, 234, 90, 132, 101, 134, 220, 191, 234, 191],
      },
      {
         name: '废油桶',
         type: 'bar',
         stack: 'user',
         barWidth: 40,
         data: [150, 232, 90, 132, 101, 134, 220, 201, 154, 232, 90, 132],
      },
      {
         name: '化验废液',
         type: 'bar',
         stack: 'user',
         barWidth: 40,
         itemStyle: {
            normal: {
               barBorderRadius: [4, 4, 0, 0],
            },
         },
         data: [150, 232, 90, 132, 101, 134, 220, 201, 154, 232, 90, 132],
      },
   ],
};