Echarts在线免费图表

 
            const data = [50, 100, 200]
const lineData = [65, 82, 55, 54, 52, 80, 75, 40, 85, 65]
const shadeData = []
const dataX = ["开发部", "市场部", "行政部", "人资部", "设计部", "法律部", "公关部", "运维部", "总经办", "董秘局"]
const max = data.concat(lineData)
   .reduce((pre, cur) => pre > cur ? pre : cur, 0)
lineData.forEach((item) => {
   shadeData.push(max)
})
const color = ['#1694fc', "#dc76f7", "#f54e45", "#28a745", "#146fd7", "#4ee5f0", "#1994fb", "#fea03e", "#e074fd", "#fa4d3f",]
option = {
   color,
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: 'none',
      },
      formatter: function (params) {
         return (
            dataX[params[0].dataIndex] +":"+
            lineData[params[0].dataIndex] +
            '本'
         );
      },
   },
   xAxis: [{
      type: 'category',
      data: dataX
   }],
   yAxis: {
      type: 'value',
      max: max,
      axisLabel: {
         formatter: "{value}本"
      }
   },
   series: [
      {
         data: lineData,
         barWidth: 20,
         type: 'bar',
         itemStyle: {
            normal: {
               color: (params) => {
                  return color[params.dataIndex]
               }
            }
         }
      },
      {
         data: shadeData,
         barWidth: 20,
         type: 'bar',
         barGap: '-100%',//左移一个位置
         itemStyle: {
            normal: {
               color: function (d) {
                  let a = 6 * 10
                  return `rgba(0,0,0,0.05)`
               }
            }
         }
      }]
};