react用echarts画折柱图,并且加油slider,handler还是为圆形

要在 React 中使用 Echarts，你需要先安装 echarts 和 react-echarts 两个依赖包。然后你可以在 React 的组件中引入 react-echarts 并使用它提供的组件来渲染 Echarts 图表。以下是一个使用 react-echarts 渲染折柱图的示例代码：

import ReactEcharts from 'echarts-for-react';

class Chart extends React.Component {
  getOption = () => {
    return {
      tooltip: {},
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: 'Sales',
        type: 'bar',
        data: [30, 40, 50, 60, 70, 80, 90]
      }, {
        name: 'Visits',
        type: 'line',
        data: [20, 40, 60, 80, 100, 120, 140]
      }]
    };
  }

  render() {
    return (
      <ReactEcharts
        option={this.getOption()}
        style={{height: '500px', width: '100%'}}
        theme="my_theme"
        onEvents={...}
      />
    );
  }
}

其中 `getOption` 方法返回了 Echarts 图表的配置项。`ReactEcharts` 组件接收 `option` 属性来指定 Echarts 的配置项，接收 `style` 属性来指定图表的样式，接收 `theme` 属性来指定主题，接收 `onEvents` 属性来指定事件处理函数。你可以根据自己的需求来设置这些属性。

关于添加 slider 和 handler，你需要在 Echarts 的配置项中添加相应的组件和选项。以下是一个在折柱图中添加 slider 和 handler 的示例代码：

getOption = () => {
  return {
    tooltip: {},
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    dataZoom: [
      {
        type: 'slider', // 添加slider
        start: 0,
        end: 50
      },
      {
        type: 'inside', // 添加handler
        start: 0,
        end: 50
      }
    ],
    series: [{
      name: 'Sales',
      type: 'bar',
      data: [30, 40, 50, 60, 70, 80, 90]
    }, {
      name: 'Visits',
      type: 'line',
      data: [20, 40, 60, 80, 100, 120, 140]
    }]
  };
}

在配置项中添加 `dataZoom` 选项，并在其中添加 `type` 为 `"slider"` 的对象和 `type` 为 `"inside"` 的对象即可。你可以根据自己的需求来设置 `start` 和 `end` 属性来指定 slider 和 handler 的初始位置和宽度。至于 handler 的形状，可以在 Echarts 的主题中设置。