react echart 柱状折线图

要在 React 中使用 ECharts 来绘制柱状折线图，可以按照以下步骤进行：

1. 安装 ECharts 库

使用 npm 命令安装 ECharts 库，命令如下：

npm install echarts --save

2. 导入 ECharts 库

在需要使用 ECharts 的组件中，通过 import 语句导入 ECharts 库，代码如下：

import echarts from 'echarts';

3. 创建 ECharts 实例

在组件的 componentDidMount 生命周期中，通过 ref 获取容器元素，然后创建 ECharts 实例，代码如下：

componentDidMount() {
  const { data } = this.props;
  const chartDom = this.refs.chart;
  const myChart = echarts.init(chartDom);
  // 绘制图表
  myChart.setOption({
    // 配置项
  });
}

4. 配置图表

在 setOption 方法中，可以配置图表的各种属性，包括标题、坐标轴、数据系列等，代码如下：

myChart.setOption({
  title: {
    text: '柱状折线图示例'
  },
  legend: {
    data: ['销量', '利润']
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: [
    {
      type: 'value',
      name: '销量（件）'
    },
    {
      type: 'value',
      name: '利润（元）'
    }
  ],
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    },
    {
      name: '利润',
      type: 'line',
      yAxisIndex: 1,
      data: [10, 30, 50, 20, 20, 30]
    }
  ]
});

以上代码配置了一个带有标题、图例、提示框、两个坐标轴、柱状系列和折线系列的柱状折线图。

5. 渲染图表

最后，在 render 方法中，渲染一个 div 容器，并通过 ref 属性指定其引用，代码如下：

render() {
  return (
    <div ref="chart" style={{ width: '100%', height: '400px' }}></div>
  );
}

这样，就可以在 React 中使用 ECharts 绘制柱状折线图了。