Echarts在线免费图表

 
            const randomColor=[
   ['#2DB796', '#6BBBA8'],
   ['#D3AC4E', '#D6BA76'],
]

const xData = [
   -10, -10, -67, 10, 20, 5, 90, 5, 4
]

const yData = [
   '宫保鸡丁', '鱼香茄子', '拉皮肉丝', '鸡公煲', '鸭血粉丝', '王府泡椒鸡', '金陵臭干'
]

const seriesData = xData.map((item) => {
   return {
   value: item,
   label: {
      position: item < 0 ? "right" : "left",
   },
   itemStyle: {
      normal: {
         barBorderRadius: [12, 12, 12, 12],
         color: {
         colorStops: [
            {
               offset: 0,
               color: randomColor[item < 0 ? 1 : 0][0], // 0% 处的颜色
            },
            {
               offset: 1,
               color: randomColor[item < 0 ? 1 : 0][1], // 100% 处的颜色
            },
         ],
         },
      },
   },
   };
});

const max = Math.max(...xData.map((item) => Math.abs(item))).toFixed(2);

option = {
   backgroundColor: "#041636",
    tooltip: {
      show: true,
      trigger: "axis", //axis , item
      backgroundColor: "RGBA(0, 49, 85, 0.9)",
      borderColor: "rgba(0, 151, 251, 1)",
      borderRadius: 0,
      textStyle: {
        color: "#BCE9FC",
        fontSize: 16,
        align: "left",
      },
    },
    grid: {
      top: 80,
      bottom: 30,
    },
    xAxis: {
      type: "value",
      position: "top",
      max: max,
      min: -max,
      splitLine: {
        lineStyle: {
          type: "dashed",
          color: "rgb(104,118,143,1)",
        },
      },
    },
    yAxis: {
      type: "category",
      axisLabel: { show: false },
      axisTick: { show: false },
      data: yData,
    },
    series: [
      {
        name: "增长值",
        type: "bar",
        stack: "Total",
        barWidth: 12,
        label: {
          show: true,
          formatter: "{b}",
          fontSize: 16,
          color: "#ffffff",
          padding: [0, 10, 0, 10],
        },
        data: seriesData,
      },
    ],
  };