Echarts单轴坐标系散点图

单轴坐标系散点图

javascript 复制代码
option = {
  tooltip:{},
  singleAxis:[
    {
      type:'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      bottom:'55%'
    },
    {
      type:'category',
      data: ['一', '二', '三', '四', '五', '六', '日'],
      top:'55%'
    },    
  ],
  series: [
    {
      type: 'scatter',
      coordinateSystem:'singleAxis',
      singleAxisIndex:0,
      data: [
        10,
        10,
        30,
        40,
        10,
        20,
        100
      ],
      label:{
        //formatter:'{b}\n{d}%'
      }
    },
    {
      type: 'scatter',
      coordinateSystem:'singleAxis',
      singleAxisIndex:1,
      data: [
        10,
        10,
        30,
        40,
        10,
        20,
        100
      ],
      label:{
        //formatter:'{b}\n{d}%'
      }
    },
  ]
};

参数化Symbol大小

javascript 复制代码
option = {
  tooltip:{},
  singleAxis:[
    {
      type:'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      bottom:'55%'
    },
    {
      type:'category',
      data: ['一', '二', '三', '四', '五', '六', '日'],
      top:'55%'
    },    
  ],
  series: [
    {
      type: 'scatter',
      coordinateSystem:'singleAxis',
      singleAxisIndex:0,
      data: [
        10,
        10,
        30,
        40,
        10,
        20,
        100
      ],
      symbolSize:function(value){
        return value*2/2;
      },      
      label:{
        //formatter:'{b}\n{d}%'
      }
    },
    {
      type: 'scatter',
      coordinateSystem:'singleAxis',
      singleAxisIndex:1,
      data: [
        10,
        10,
        30,
        40,
        10,
        20,
        100
      ],
      symbolSize:function(value){
        return value*2/3;
      },
      label:{
        //formatter:'{b}\n{d}%'
      }
    },
  ]
};
相关推荐
Highcharts.js5 小时前
Highcharts 云端渲染的真相:交互式图表与服务器端生成的边界
前端·信息可视化·服务器渲染·highcharts·图表渲染
zhuyan1086 小时前
Linux 系统磁盘爆满导致无法启动修复指南
前端·chrome
编程牛马姐6 小时前
独立站SEO流量增长:提高Google排名的优化方法
前端·javascript·网络
NotFound4866 小时前
实战指南如何实现Java Web 拦截机制:Filter 与 Interceptor 深度分享
java·开发语言·前端
Dontla7 小时前
高基数(High Cardinality)问题介绍(Prometheus、高基数字段、低基数字段)
前端·数据库·prometheus
whuhewei9 小时前
为什么客户端不存在跨域问题
前端·安全
妮妮喔妮9 小时前
supabase的webhook报错
开发语言·前端·javascript
qq_12084093719 小时前
Three.js 大场景分块加载实战:从全量渲染到可视集调度
开发语言·javascript·数码相机
yivifu10 小时前
手搓HTML双行夹批效果
前端·html·html双行夹注
奔跑的卡卡10 小时前
Web开发与AI融合-第一篇:Web开发与AI融合的时代序幕
前端·人工智能