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}%'
      }
    },
  ]
};
相关推荐
我只会写Bug啊1 小时前
Vue文件预览终极方案:PNG/EXCEL/PDF/DOCX/OFD等10+格式一键渲染,开源即用!
前端·vue.js·pdf·excel·预览
扯蛋4383 小时前
LangChain的学习之路( 一 )
前端·langchain·mcp
Mr.Jessy3 小时前
Web APIs学习第一天:获取 DOM 对象
开发语言·前端·javascript·学习·html
午安~婉3 小时前
javaScript八股问题
开发语言·javascript·原型模式
西西学代码3 小时前
Flutter---个人信息(5)---持久化存储
java·javascript·flutter
芝麻开门-新起点3 小时前
flutter 生命周期管理:从 Widget 到 State 的完整解析
开发语言·javascript·ecmascript
ConardLi4 小时前
Easy Dataset 已经突破 11.5K Star,这次又带来多项功能更新!
前端·javascript·后端
冴羽4 小时前
10 个被严重低估的 JS 特性,直接少写 500 行代码
前端·javascript·性能优化
rising start4 小时前
四、CSS选择器(续)和三大特性
前端·css
一 乐4 小时前
高校后勤报修系统|物业管理|基于SprinBoot+vue的高校后勤报修系统(源码+数据库+文档)
java·前端·javascript·数据库·vue.js·毕设