Echarts图表不均匀y刻线设置及气泡图点击操作

最新推荐文章于 2024-02-06 18:09:27 发布
最新推荐文章于 2024-02-06 18:09:27 发布
阅读量1.7k 收藏 1
点赞数 1
分类专栏： echarts 文章标签： 1024程序员节 echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a18792627168/article/details/120936151
版权

点击事件

气泡图点击需要在渲染数据后直接点击气泡，进行操作获取该气泡数据等

渲染图表

<div id="container" style="height: 100%"></div>
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var option;   // 后续定义一下option

myChart.off('click');
if (option && typeof option === 'object') {
  myChart.setOption(option);
}

在渲染完成之后，直接添加点击事件

myChart.on('click',function(params){
   console.log('params',params)
})

在有接口触发的情况下，点击某一个气泡，会触发与气泡数量相同的点击数量，导致重复点击，所以需要添加

myChart.off('click');

添加的位置是在渲染图表之前添加。

不均匀坐标 y轴

这个是看了  @带甜味的盐@ 的  Echarts绘制不均匀数据轴（y）绘制完成的

直接可以查看该博主博文，但是自己也记录下

如图：

在这个位置我y轴三个气泡得到数据分别是 20000、90和7，在使用自动分配刻度的情况下，数据差异过大，会导致90和7的展示位置均处于0刻度附近，但是约20000的数据又不多，还得展示的时候要均匀，这就需要不均匀刻度了。

如上图，为y轴固定刻度，然后给其分档计算，具体挡位计算什么的看 这个 

先看一组数据：

var data = [
	[[20, 20000, 'Australia', 1990]],
	[[30, 90, 'Canada', 2015]],
	[[1400, 7, 'Canada', 2015]],
];

散点图数据格式如上，y轴自动获取数组内第二个数据

var data = [
	[[20, 20000, 'Australia', 1990]],
	[[30, 90, 'Canada', 2015]],
	[[1400, 7, 'Canada', 2015]],
  ];
  const dataInterval = [ 1, 10, 100, 1000, 10000];
  const investAmount = data.map(item => {
	  const amount = item[0][1];

	  // 寻找在数据间隔里小于amount的最大值
	  const min_v = Math.max(...dataInterval.filter(v => v <= amount));
	  // 寻找在数据间隔里大于amount的最小值
	  const max_v = Math.min(...dataInterval.filter(v => v > amount));

	  // 寻找 min_v 所在的下标
	  const index = dataInterval.findIndex(v => v === min_v);
	  // 计算该amount在y轴上应该展示的位置
	  const y_value = parseFloat((((amount - min_v) / (max_v - min_v))+ index).toFixed(1));
	  item[0].splice(1,0,y_value)
	  return item
  })
  console.log('investAmount',investAmount.toString());
  data = investAmount;

举个例子：

数据内的 90 ，在10 到100之间，然后计算一下它在这个之间的比例

(90-10) / (100-10)   这个可以计算出90在那个之间所占的比例，保留一位小数，为0.9，靠近100，在整个y轴上的位置是1.9    这个1是10在y轴上的位置

这个可以计算出它的位置，当然y轴的设置也非常重要（直接下方完整代码）

全部代码

test.html

<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <div id="container" style="height: 100%"></div>

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
        <script type="text/javascript">
          var dom = document.getElementById("container");
          var myChart = echarts.init(dom);
          // var app = {};

          var option;
          var data = [
            [[20, 20000, 'Australia', 1990]],
            [[30, 90, 'Canada', 2015]],
            [[1400, 7, 'Canada', 2015]],
          ];
          const dataInterval = [ 1, 10, 100, 1000, 10000];
          const investAmount = data.map(item => {
              const amount = item[0][1];

              // 寻找在数据间隔里小于amount的最大值
              const min_v = Math.max(...dataInterval.filter(v => v <= amount));
              // 寻找在数据间隔里大于amount的最小值
              const max_v = Math.min(...dataInterval.filter(v => v > amount));

              // 寻找 min_v 所在的下标
              const index = dataInterval.findIndex(v => v === min_v);
              // 计算该amount在y轴上应该展示的位置
              const y_value = parseFloat((((amount - min_v) / (max_v - min_v))+ index).toFixed(1));
              item[0].splice(1,0,y_value)
              return item
          })
          console.log('investAmount',investAmount.toString());
          data = investAmount;
          option = {
            legend: {
              right: '10%',
              top: '3%',
              data: ['1990', '2015','2021']
            },
            grid: {
              left: '10%',
              top: '10%'
            },
            xAxis: {
              type: 'category',
              name: '数量',
              splitLine: {
                lineStyle: {
                  type: 'dashed'
                }
              }
            },
            yAxis: {
              // 这种设置方法，散点位置不准确，同一等级在一条线上，严重不符
              // type:'category',
              // data: [ '1元', '10元', '100元', '1000元', '10000元'],  
              type: 'value',
              min: 0,
              max: 4,
              splitNumber : 4,
              name: '金额',
              splitLine: {
                lineStyle: {
                  type: 'dashed'
                }
              },
              scale: true,
              axisTick: {
                show: true
              },
              axisLine: {
                show: true
              },
              axisLabel: {
                formatter: function(value, index){
                  let arr = []
                  if(value == 0){
                    arr.push('1元')
                  }else if(value ==1){
                    arr.push('10元')
                  }else if(value ==2){
                    arr.push('100元')
                  }else if(value ==3){
                    arr.push('1000元')
                  }else if(value ==4){
                    arr.push('10000元')
                  }
                  return arr
                }
              }
            },
            tooltip:{
              formatter:function(params){
                var res = `<div>数量${params.data[0]}个</div>` + '\n'+
                          `<div>金额${params.data[1]}元</div>`
                          
                return res
              }
            },
            series: [
              {
                name: '1990',
                data: data[0],
                type: 'scatter',
                symbolSize: 30,
                itemStyle: {
                  shadowBlur: 10,
                  shadowColor: 'rgba(120, 36, 50, 0.5)',
                  shadowOffsetY: 5,
                  color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                    {
                      offset: 0,
                      color: 'rgb(251, 118, 123)'
                    },
                    {
                      offset: 1,
                      color: 'rgb(204, 46, 72)'
                    }
                  ])
                }
              },
              {
                name: '2015',
                data: data[1],
                type: 'scatter',
                symbolSize: 30,
                itemStyle: {
                  shadowBlur: 10,
                  shadowColor: 'rgba(25, 100, 150, 0.5)',
                  shadowOffsetY: 5,
                  color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                    {
                      offset: 0,
                      color: 'rgb(129, 227, 238)'
                    },
                    {
                      offset: 1,
                      color: 'rgb(25, 183, 207)'
                    }
                  ])
                }
              },
              {
                name: '2021',
                data: data[2],
                type: 'scatter',
                symbolSize: 30,
                itemStyle: {
                  shadowBlur: 10,
                  shadowColor: 'rgba(25, 100, 150, 0.5)',
                  shadowOffsetY: 5,
                  color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                    {
                      offset: 0,
                      color: 'rgb(229, 127, 238)'
                    },
                    {
                      offset: 1,
                      color: 'rgb(225, 182, 207)'
                    }
                  ])
                }
              }
            ]
          };



          myChart.off('click');
          if (option && typeof option === 'object') {
              myChart.setOption(option);
          }

          myChart.on('click',function(params){
            console.log('params',params)
            // alert(`数量为${params.data[0]}个 金额为${params.data[2]}元`)
          })



        </script>
    </body>
</html>

实现的效果就是上方图片

完啦，就这么多！

DOM曼珠沙华
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
平面全息光栅刻线密度的倍频式调整方法
02-12
刻线密度准确与否直接影响光栅色散及给定波长的衍射方向，进而影响光谱仪器结构设计。为了提高全息光栅刻线密度的制作精度，提出了平面全息光栅刻线密度的倍频式调整方法。将给定刻线密度的基准光栅放在干涉场曝光区域内，调节光束干涉角，干涉场曝光光束经基准光栅衍射后，根据调整光栅刻线密度的不同选择不同的衍射级次相互叠加形成莫尔条纹，以基准光栅刻线密度的倍数来确定待制作光栅的刻线密度。理论证明了基准光栅周期与光栅像周期之间存在倍数关系，指出了基准光栅刻线密度选择在倍频式调整方法中的等效规则，分析了基准光栅宽度不同对光栅刻线密度制作精度的影响。计算结果表明，当基准光栅宽度达到100 mm时，制作300 line/mm光栅其刻线密度误差小于1 nm，刻线密度越大误差越小，故以基准光栅的刻线密度来确定待制作全息光栅刻线密度的倍频式调整方法能够满足全息光栅的制作要求。
扫描干涉场曝光系统中周期设定对曝光刻线相位的影响
02-05
扫描干涉场曝光系统中的干涉条纹周期是相位锁定系统的重要参数，其设定值与名义值之间的偏差会引起相邻扫描间的干涉条纹相位拼接误差。为获取以扫描曝光方式所制作光栅的衍射波前特征，根据步进扫描曝光的特点及动态相位锁定的工作原理，建立了扫描曝光的数学模型，给出了曝光刻线误差及曝光光栅周期的变化规律，并进行了相关实验验证。结果表明，相位锁定中周期设定误差会带来周期性的刻线误差。曝光光栅周期会随周期设定值的变化而改变，当周期设定误差较小时，曝光光栅周期等于周期设定值。对于曝光光斑束腰半径为0.9 mm、曝光步进间隔为0.6 mm、曝光条纹周期为555.6 nm的系统参数，周期设定的相对误差小于278×10-6时，周期性的刻线误差小于1 nm。若要求曝光对比度大于0.9，则周期设定的相对误差需要控制在92.6×10-6以内，周期设定值及曝光光栅周期的可变范围为102.8 pm。
实现Echarts Y轴 间距不等分问题
m0_53001289的博客
02-06 490
2、代码echarts的option。
echarts 柱形图 Y轴数据多，鼠标滚动显示数据，不缩放
qq_40269801的博客
06-29 3169
坐标轴数据太多，只能滚动显示，滚动的时候，不想缩放，单纯平移就好。
echarts 关于Y轴的刻度优化（最大最小值的设置-自适应）
热门推荐
z1093541823的博客
04-12 2万+
min:0, //取0为最小刻度 max: 100, //取100为最大刻度 min:'dataMin', //取最小值为最小刻度 max: 'dataMax', //取最大值为最大刻度
echarts图表 Y 轴刻度值过长时显示不全解决办法
kiku
05-20 7291
1、配置 grid 属性 grid 组件离容器左侧的距离。 left 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’, ‘center’, ‘right’。如果 left 的值为’left’, ‘center’, ‘right’，组件会根据相应的位置自动对齐。 option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sa
ECharts 事件处理
12-14
ECharts 事件处理 ECharts 中我们可以通过监听用户的操作行为来回调对应的函数。 ECharts 通过 on 方法来监听用户的行为，例如监控用户的点击行为。 ECharts 中事件分为两种类型: 用户鼠标操作点击，如 ‘click’、’dblclick’、’mousedown’、’mousemove’、’mouseup’、’mouseover’、’mouseout’、’globalout’、’contextmenu’ 事件。 还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的 ‘legendselectchanged’ 事件），数据区域缩放时触发的 ‘d
Echarts实现不均匀刻度的方法
sflwolf的专栏
03-09 1万+
今天突然有个我们的咨询公司找我问一个echarts问题，而且非常不客气，本来不想搭理，但是这个问题确实值得一解决，很有意思，所以还是帮他们解决了。 问题是这样的。数据中有很多低于100的数值，但是最高值却能达到14000。 data = [93.65, 101.08, 97.15, 171.58, 115.23, 127.55, 117, 115.46, 114.27, 106.68, 11...
ECharts自定义Y轴间隔刻度，不均分配
zq820228的博客
12-16 9030
Echarts绘制不均匀数据轴（y）
@不喝海之言@
11-19 9026
应用场景（以Echarts柱状图为例）： 现有一组数据：最小的数是 50000(5万) ,最大的数是 3000000000(30亿)。 如果按照Echarts正常的画法，我们只需提取出来这些数据然后交给Echarts显示即可。 但是这样做面临的问题就很明显——由于数值差距过大，且Echarts本身Y轴的数值是均匀分布的，所以在图里造成的结果是这样的： 在图中，y 轴的数值均匀分布，最高的柱子在x轴 第五值为30亿，但是x轴 第一值为5万的柱子，根本看不见，因为差距太大了，包括x轴 第二值为500万的轴
echarts折线图设置不均匀刻度，不等距轴的解决方案
WanweI897的博客
11-11 7045
问题： 在y轴为数值轴且有部分数据相差过大时，因为y轴等距的缘故，会形成以下图表，显示效果不佳。 x轴数据：var xData = ['敌法师','幻影刺客','虚空假面','恐怖利刃','猛犸颠勺者']; y轴数据：var yData = [20, 35, 67, 88, 1000]; 解决方案： 将y轴数据每一项开立方根，使得数据之间的差距缩小，将得到的数组用于echarts。 data: yData.map(i=>Math.cbrt(i)) 2. 经过第一步，页面的图形效果已经改变，此
echarts实现相邻气泡图
10-16
echarts实现的气泡图，跟官方气泡图不同的是，气泡图之间不会叠加在一起。跟d3.js的气泡图效果类似。
元器件应用中的陶瓷体激光刻线型片式电感器主要特性参数
11-22
陶瓷体激光刻线型片式电感器具有体积小、热稳定性好及可焊性好的特点，主要特性参数见表。 表:陶瓷体激光刻线型片式电感器主要特性参数  
用准分子激光曝光获得0.35 μm刻线宽度
02-08
东芝公司用准分子激光器和石英透镜的十分之一缩小光学系统，制成电路线宽为0.35 μm、大小为5 mm见方的图案。估计用这一技术并改进原有的曝光技术，对如工64 M DRAM (动态存储器）（电路线宽20.5 μm)。
刻线误差与面型误差对平面光栅光谱性能影响的二维快速傅里叶变换分析方法
02-06
光栅刻线误差与基底面型误差影响平面光栅衍射波前、分辨本领、鬼线、卫线及杂散光等光谱性能，研究光栅性能指标与光栅刻线误差及基底加工误差之间的因果关系，对提高光栅质量极为重要。根据光栅衍射中产生的源于刻线...
Elasticsearch初识与简单案例.pdf
04-29
Elasticsearch是一个基于Lucene的分布式全文搜索引擎，提供灵活且高效的搜索和分析功能。通过HTTP请求和客户端库，用户可以索引和搜索文档，执行复杂查询，进行数据分析，并享受高亮显示等特性。其高级功能如复合查询、聚合分析、滚动搜索等，使其适用于各种数据处理和分析场景。Elasticsearch还具有强大的监控和日志功能，确保集群稳定运行。总之，Elasticsearch是企业级搜索和分析的理想选择。
Python基于LSTM模型对全国的空气质量数据进行可视化分析预测源代码
最新发布
04-29
介绍 对全国2019年1月至2023年12月的空气质量数据进行分析，绘制时间序列图，展示每月/每季度的平均AQI变化趋势。绘制不同省份和城市的平均AQI热力图。分析不同污染物的浓度分布和趋势。绘制空气质量等级分布图。 需求说明 对空气质量数据进行数据分析，并使用LSTM模型进行预测。 安装教程 pip install jupyter pip install numpy pandas matplotlib seaborn 使用说明 在项目路径下打开终端输入jupyter notebook就行
百问网linux桌面GUI，基于LVGL 8.x。.zip
04-29
百问网linux桌面GUI，基于LVGL 8.x。
基于Vue开发的XMall商城前台页面 PC端.zip
04-29
基于Vue开发的XMall商城前台页面 PC端.zip
zemax怎么把光栅改为平面刻线光栅
08-28
Zemax是一种光学设计和仿真软件，用于模拟和优化光学系统。在Zemax中，光栅通常被建模为非平面刻线光栅，其表面轮廓遵循特定的刻线方程。若要将光栅改为平面刻线光栅，可以按照以下步骤操作： 1. 打开Zemax软件并导入光学系统文件。 2. 在系统布局中，选择所需光栅元件，并在“光栅”选项卡中选中该元件。 3. 在“光栅输入”对话框中，选择“非平面刻线”选项。 4. 在“光栅输入”对话框中，取消选择“刻线方程”选项，并选择“平面”选项。 5. 在“光栅输入”对话框中，输入所需的刻线周期、刻线宽度、刻线方向等参数。 6. 确定参数设置后，点击“确定”按钮以确认更改并退出对话框。 7. 重新运行光学系统仿真以观察改变后的效果。 通过以上步骤，您可以将Zemax中的光栅从非平面刻线光栅改为平面刻线光栅。这种改变可以对光栅的表面造型进行简化，使其更适合一些特定的光学设计和仿真需求。需要说明的是，平面刻线光栅可能会带来一些失真或不确定性，因此在实际应用中，需根据具体情况权衡使用非平面刻线光栅还是平面刻线光栅。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值