Echarts在线免费图表

 
            let data = {
   xAxisData: ["其他", "综合办公室"],
   seriesData: [
      [200, 85, 134],
      [123, 55, 234],
      [156.34354, 98, 145]
   ]
};
option = {
   backgroundColor: '#111',
   color: ["#63caff", "#49beff", "#ddc854", "#ddc854"],
   grid: {
      top: '23%',
      left: '3%',
      right: '3%',
      bottom: '5%',
      containLabel: true,
   },
   tooltip: {
      trigger: 'axis',
      formatter: (params) => {
         console.log(params)
         let str = `${params[0].name}<br>`;
         params.forEach(item => {
            str += `<div style="display: flex; justify-content: space-between"><div style="margin-right: 10px;">${item.marker} ${item.seriesName}  </div>  ${item.value}</div><br>`
         })
         return str;
      }
   },
   legend: {
      left: 'center',
      textStyle: {
         color: "#fff"
      }
   },
   xAxis: {
      type: 'category',
      data: data.xAxisData,
      splitLine: {
         show: false,
      },
      axisLabel: {
         color: "#ffffff",
         fontSize: 12,
         interval: 'auto', // x轴间距
         // rotate:40
      },
      axisTick: {
         show: false
      },
      axisLine: {
         lineStyle: {
            color: 'rgba(152, 212, 255, .5)',
         }
      },
   },
   yAxis: [{
      type: 'value',
      name: "单位：万元",
      nameGap: '30',
      min: 0,
      axisTick: {
         show: false
      },
      axisLabel: {
         show: true,
         fontSize: 12,
         color: "#fff",
      },
      axisLine: {
         show: true,
         lineStyle: {
            color: 'rgba(152, 212, 255, .5)',
         }
      },
      splitLine: {
         lineStyle: {
            color: 'rgba(152, 212, 255, .1)',
         }
      },
      nameTextStyle: {
         color: "#fff    ",
         fontWeight: 400,
         fontSize: 12,
      },
   }],
   series: [{
      data: data.seriesData[0],
      type: "bar", // 柱图
      barMaxWidth: "auto",
      barWidth: 20,
      name: "概算",
      itemStyle: {
         borderColor: "#FFD736",
         color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: "linear",
            global: false,
            colorStops: [{
               offset: 0,
               color: "#0F3352"
            }, {
               offset: 1,
               color: "#E4B90C"
            }]
         }
      }
   },
    {
      data: data.seriesData[1],
      type: "bar", // 柱图
      barMaxWidth: "auto",
      barWidth: 20,
      name: "合同",
      itemStyle: {
         borderColor: "#1CE8EF",
         color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: "linear",
            global: false,
            colorStops: [{
               offset: 0,
               color: "#0F3352"
            }, {
               offset: 1,
               color: "#15DBCB"
            }]
         }
      }
   },
    {
      data: data.seriesData[2],
      type: "bar", // 柱图
      barMaxWidth: "auto",
      barWidth: 20,
      name: "支付",
      itemStyle: {
         borderColor: "#F36B42",
         color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: "linear",
            global: false,
            colorStops: [{
               offset: 0,
               color: "#0F3352"
            },{
               offset: 1,
               color: "#EE6E47"
            }]
         }
      }
   }
   ]
};