echarts绘制时间柱形离散分布图

时间柱形离散分布图可以用 echarts 中的柱状图（bar）和散点图（scatter）结合来实现。具体步骤如下：

1. 创建一个包含时间和值的数组，例如：

var data = [
  ['2022-01-01', 10],
  ['2022-01-03', 20],
  ['2022-01-05', 15],
  ['2022-01-08', 30]
];

2. 使用 echarts 中的 `bar` 组件来绘制柱形图，设置 x 轴为时间轴，y 轴为值轴，例如：

option = {
  xAxis: {
    type: 'time',
    boundaryGap: false // 不留白
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    type: 'bar',
    data: data,
    barCategoryGap: '50%', // 柱形图间距
    itemStyle: {
      color: '#409EFF' // 柱形图颜色
    }
  }]
};

3. 使用 echarts 中的 `scatter` 组件来绘制散点图，设置 x 轴为时间轴，y 轴为值轴，例如：

option = {
  xAxis: {
    type: 'time',
    boundaryGap: false // 不留白
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    type: 'scatter',
    data: data,
    symbolSize: function (val) { // 散点图大小
      return val[1] * 2;
    },
    itemStyle: {
      color: '#F56C6C' // 散点图颜色
    }
  }]
};

4. 将两个组件合并到一个图表中，例如：

option = {
  xAxis: {
    type: 'time',
    boundaryGap: false // 不留白
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    type: 'bar',
    data: data,
    barCategoryGap: '50%', // 柱形图间距
    itemStyle: {
      color: '#409EFF' // 柱形图颜色
    }
  }, {
    type: 'scatter',
    data: data,
    symbolSize: function (val) { // 散点图大小
      return val[1] * 2;
    },
    itemStyle: {
      color: '#F56C6C' // 散点图颜色
    }
  }]
};

完整代码示例：

var data = [
  ['2022-01-01', 10],
  ['2022-01-03', 20],
  ['2022-01-05', 15],
  ['2022-01-08', 30]
];

option = {
  xAxis: {
    type: 'time',
    boundaryGap: false // 不留白
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    type: 'bar',
    data: data,
    barCategoryGap: '50%', // 柱形图间距
    itemStyle: {
      color: '#409EFF' // 柱形图颜色
    }
  }, {
    type: 'scatter',
    data: data,
    symbolSize: function (val) { // 散点图大小
      return val[1] * 2;
    },
    itemStyle: {
      color: '#F56C6C' // 散点图颜色
    }
  }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);