Echarts在线免费图表

 
            option = {
  backgroundColor: '#000',
  //浮动框
  tooltip: {
    show: true
  },
  //图例
  legend: {
    right: '12%',
    bottom: '4%',
    textStyle: {
      color: '#fff',
      fontSize: '13',
    },
    itemGap: 20,
    itemWidth: 10,
    itemHeight: 10,
    icon: 'circle',
    data: ['PM2.5', 'CO2', 'SO'],
  },
  grid: {
    left: '8%',
    top: '15%',
    bottom: '14%',
    width: '86%',
  },

  //x轴
  xAxis: {
    axisLine: {
      lineStyle: {
        color: '#444',
      },
    },
    axisLabel: {
      textStyle: {
        color: '#FFF',
        fontSize: 12,
      },
    },
    //刻度线
    axisTick: {
      show: false,
    },
    //坐标轴显示值
    data: ['1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时'],
  },
  //y轴
  yAxis: {
    // min: 0,
    // max: 100,
    axisLabel: {
      //  改变y轴字体颜色和大小
      //formatter: '{value} m³ ', //  给y轴添加单位
      textStyle: {
        color: '#fff',
        fontSize: 12,
      },
    },
    //坐标轴线
    axisLine: {
      show: false,
    },
    //刻度线
    axisTick: {
      show: false,
    },
    //在grid区域中的分隔线
    splitLine: {
      show: true,
      lineStyle: {
        color: '#444',
      },
    },
  },
  series: [
          {
            type: "bar",
            barMaxWidth: 25,
            data:  [76, 58, -50, 18, 39, -59, 78, -80].map((item) => {
              // 循环 
              return {
                value: item,
                label: {
                  show: true, //开启显示
                  position: item > 0 ? "top" : "bottom", //判断正负值上方显示还是下方
                  formatter: "{c}%",//单位
                  textStyle: {
                    //数值样式
                    color: item < 0 ? "#229D45" : "#E93030",   //数值颜色
                    fontSize: "18px",
                  },
                },
              };
            }),
            itemStyle: {//柱体背景色
              normal: {
                color: (val) => {
                  var index_color = val.value;
                  return index_color > 0 ? "#E93030" : "#229D45";
                },
              },
            },
          },
        ],

};