echarts-柱图&散点图

1、效果:

2、代码:

option = {
  title: {
    text: '单位',
    subtext: 'kg',
    left: 'left'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    show: true
  },
  xAxis: {
    splitLine: {
      lineStyle: {
        type: 'dashed'
      }
    },
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    splitLine: {
      lineStyle: {
        type: 'dashed'
      }
    }
  },
  series: [
    {
      name: '柱子',
      type: 'bar',
      barWidth: 35,
      data: [120, 200, 150, 80, 70, 120, 200],
      color: '#e82'
    },
    {
      name: '散点',
      type: 'scatter',
      symbolSize: 35,
      datasetIndex: 0,
      data: [
        ['周一', 100],
        ['周二', 200],
        ['周三', 130],
        ['周四', 90],
        ['周五', 60],
        ['周六', 100],
        ['周日', 220]
      ],
      label: {
        show: true,
        position: 'inside'
      },
      color: 'green'
    }
  ]
};

  • 5
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
时间柱形离散分布可以用 echarts 中的柱状图(bar)和散点图(scatter)结合来实现。具体步骤如下: 1. 创建一个包含时间和值的数组,例如: ```javascript var data = [ ['2022-01-01', 10], ['2022-01-03', 20], ['2022-01-05', 15], ['2022-01-08', 30] ]; ``` 2. 使用 echarts 中的 `bar` 组件来绘制柱形,设置 x 轴为时间轴,y 轴为值轴,例如: ```javascript option = { xAxis: { type: 'time', boundaryGap: false // 不留白 }, yAxis: { type: 'value' }, series: [{ type: 'bar', data: data, barCategoryGap: '50%', // 柱形间距 itemStyle: { color: '#409EFF' // 柱形颜色 } }] }; ``` 3. 使用 echarts 中的 `scatter` 组件来绘制散点图,设置 x 轴为时间轴,y 轴为值轴,例如: ```javascript 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. 将两个组件合并到一个表中,例如: ```javascript 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' // 散点图颜色 } }] }; ``` 完整代码示例: ```javascript 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); ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值