Echarts在线免费图表

 
            const labelRight={
  position: "insideRight"
}
const labelLeft={
  position: "insideLeft"
}
const redItem={
  color: "#FF6161"
}
const blueItem={
  color: "#177DDC"
}
option = {
  backgroundColor: '#273142',
  tooltip: {
    trigger: 'none',
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    show:false
  },
  yAxis: {
    type: 'category',
    axisLine: {
      show: true,
      lineStyle: {
        color: "#5d6471"
      },
    },
    splitLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      show: false
    },
    splitArea: {
      show: true,
      areaStyle: {
          color: ["#3f4a5e","#343d4d"]
      }
    }
  },
  series: [
    {
      name: 'Direct',
      type: 'bar',
      barWidth:30,
      label: {
        show: true,
         normal: {
          show: true,
          color:'#fff',
          formatter: function (val) {
            return val.value<0? val.value :'+'+val.value;
          },
        }
      },
      emphasis: {
        focus: 'series'
      },
      // data: [7.02 , 6.18 , -5 , 3, ,2, -7,8, -2.9]
      data:[
        { value: 7.02, label:labelLeft,itemStyle:redItem,},
        { value: 6.18, label:labelLeft,itemStyle:redItem,},
        { value: -5, label:labelRight,itemStyle:blueItem,},
        { value: 3, label:labelLeft,itemStyle:redItem,},
        { value: 2, label:labelLeft,itemStyle:redItem,},
        { value: -7, label:labelRight,itemStyle:blueItem,},
        { value: 8, label:labelLeft,itemStyle:redItem,},
        { value: -2.9, label:labelRight,itemStyle:blueItem,},
      ]
    },
  ]
};