echarts散点图气泡图配置scatter 鼠标滚动自定义横纵坐标

最新推荐文章于 2024-08-23 17:12:09 发布

一行注释

最新推荐文章于 2024-08-23 17:12:09 发布

阅读量3.1k

点赞数 1

分类专栏： echarts 文章标签： scatter

本文链接：https://blog.csdn.net/qq_37818095/article/details/87974750

版权

echarts 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

spreadAnalysisOption = {
                  tooltip: {
                      show: false
                  },
                  xAxis: {
                      min:1351246420867,
                      max:new Date().getTime(),
                      type: "value",
                      splitLine: {
                          show: true
                      },
                      axisLabel: {
                          formatter: function(params){
                            var oDate = new Date(params);
                             var  oYear = oDate.getFullYear();
                             var  oMonth = oDate.getMonth()+1;
                             var  oDay = oDate.getDate();
                             var  oTime = oYear +'-'+ (oMonth) +'-'+ (oDay);
                             return oTime;
                          }
                      },
                      axisPointer: {
                          show: true,
                          snap: true,
                          label: {
                              formatter: function(params){
                                  var oDate = new Date(params.value);
                                  var  oYear = oDate.getFullYear();
                                 var  oMonth = oDate.getMonth()+1;
                                 var   oDay = oDate.getDate();
                                 var   oTime = oYear +'-'+ (oMonth) +'-'+ (oDay);
                                  //return oTime;
                              },
                              precision: 0
                          }
                      },
                      axisTick: {
                          show: false
                      }
                  },
                  yAxis: {
                      max:24,
                      axisLabel: {
                          formatter: function(params){
                             return params+'点';
                          }
                      },
                  },
                  dataZoom: [{  //禁止滚动dataZoom空值即可
            　　　　type: 'slider',//图表下方的伸缩条
            　　　　show : true, //是否显示
            　　　　realtime : true, //拖动时，是否实时更新系列的视图
            　　　　start : 0, //伸缩条开始位置（1-100），可以随时更改
            　　　　end : 100, //伸缩条结束位置（1-100），可以随时更改
            　　　}],
                  series: [{
                          type: "scatter",
                          symbol: 'path://M853.333 682.667L739.556 398.222l113.777-284.444H227.556v-56.89h-56.89v853.334h-56.888v56.89h170.666v-56.89h-56.888V682.667h625.777z m-85.333-512l-91.022 227.555L768 625.778H227.556V170.667H768z',
                          label: {
                              normal: {
                                  show: true,
                                  position: "bottom",
                                  formatter: function(params) {
                                      return params.data[2];
                                  }
                              }
                          },
                          tooltip: {
                              show: true,
                              position: "right",
                              formatter: function(params) {
                                  return  params.data[2] +  "@" + params.data[0];
                              }
                          },
                          data: [
                              ['1351256420867', 8,  "苏联解体"],
                              ['1451242420867', 9,  "玄武门之变"],
                              ['1391246420867', 12,  "法国大革命"],
                              ['1381246420867', 20,  "罗马帝国开始"],
                              ['1551246420867', 14,  "晋朝开始"],
                          ],
                          dimensions: ['date', 'size',  'name'],
                          encode: {
                              x: 'date',
                              y: 'size',
                              itemName: 'name',
                          }
                      }
                      ],
                  };