export function HistogramChartLeft()

in src/components/HomepageFeatures/index.tsx [115:172]
56 lines of code
3 McCabe index (conditional complexity)

export function HistogramChartLeft(): JSX.Element {
  useEffect(() => {
    var myChart_obj=document.getElementById("LineChartLeft")
    if (myChart_obj != null && myChart_obj != undefined){
      echarts.dispose(document.getElementById("LineChartLeft"))
    }
    var myChart = echarts.init(document.getElementById("LineChartLeft"));
    myChart.setOption({
      title: {
        text: 'QPS On Command',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // Use axis to trigger tooltip
          type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        name:'QPS',
      },
      yAxis: {
        type: 'category',

        data: ['HSET', 'ZADD', 'SADD', 'LPUSH','INCR','GET','SET','PING_BULK','PING_INLINE']
      },
      series: [
        {
          name: 'Direct',
          type: 'bar',
          stack: 'total',
          emphasis: {
            focus: 'series'
          },
          data: [
            {value: 220000,itemStyle: {color: 'rgb(41,90,166)'}},
            {value: 195000,itemStyle: {color: 'rgb(81,189,189)'}},
            {value: 280000,itemStyle: {color: 'rgb(141,197,132)'}},
            {value: 275000,itemStyle: {color: 'rgb(206,230,214)'}},
            {value: 280000,itemStyle: {color: 'rgb(247,132,165)'}},
            {value: 395000,itemStyle: {color: 'rgb(206,181,89)'}},
            {value: 310000,itemStyle: {color: 'rgb(48,181,214)'}},
            {value: 680000,itemStyle: {color: 'rgb(248,132,107)'}},
            {value: 670000,itemStyle: {color: 'rgb(65,208,118)'}}]
        }
      ]
    })
  })
  return <div id="LineChartLeft" style={{width: "50%",height: "400px"}} />
}