echarts 分象限实现气泡图

最新推荐文章于 2024-06-30 12:46:56 发布
最新推荐文章于 2024-06-30 12:46:56 发布
阅读量1.3k 收藏 6
点赞数 2
分类专栏： JS 文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pyon_/article/details/125266373
版权

如图：
在这里插入图片描述
代码：

option = {
        title: [
          {
            text: '市场份额 和 植入台数(按 省份 和 省份植入贡献率1)',
            left: 'center',
            textStyle: {
              fontSize: 18,
            },
          },
          {
            text: '第一象限',
            z: 1,
            textAlign: 'center',
            left: '10%',
            top: '18%',
            textStyle: {
              fontSize: 14,
              fontWeight: 'normal',
              color: '#999',
            },
          },

          {
            text: '第二象限',
            z: 1,
            textAlign: 'right',
            left: '95%',
            top: '18%',
            textStyle: {
              fontSize: 14,
              fontWeight: 'normal',
              color: '#999',
            },
          },{
            text: '第三象限',
            z: 1,
            textAlign: 'center',
            left: '10%',
            top: '85%',
            textStyle: {
              fontSize: 14,
              fontWeight: 'normal',
              color: '#999',
            },
          }, 
           {
            text: '第四象限',
            z: 1,
            textAlign: 'center',
            left: '90%',
            top: '85%',
            textStyle: {
              fontSize: 14,
              fontWeight: 'normal',
              color: '#999',
            },
          }, 
            {
            text: '市场份额',
            z: 1,
            textAlign: 'center',
            left: '45%',
            top: '95%',
            textStyle: {
              fontSize: 14,
            },
          }, 
            {
            text: '省\n份\n植\n入\n贡\n献\n率\n1\n',
            z: 1,
            textAlign: 'center',
            left: '1%',
            top: '50%',
            textStyle: {
              fontSize: 14,
            },
          },
        ],
        grid: {
          top: '20%',
          left: '3%',
          right: '7%',
          bottom: '5%',
          containLabel: true,
        },
        tooltip: {
          formatter: (params) => {
            if (params.value.length > 1) {
              //${params.value[3]}%<br>
              return `${params.seriesName}:<br/>${params.value[0]}%<br>
              ${params.value[1]}%<br>`;
            }
            return false;
          },
          trigger: 'item',           // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
          showDelay: 20,             // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
          hideDelay: 100,            // 隐藏延迟，单位ms
          transitionDuration : 0.4,         // 动画变换时间，单位s
          backgroundColor: 'rgba(0,0,0,0.7)',  // 提示背景颜色，默认为透明度为0.7的黑色
          borderColor: '#333',            // 提示边框颜色
          borderRadius: 4,                // 提示边框圆角，单位px，默认为4
          borderWidth: 0,                // 提示边框线宽，单位px，默认为0（无边框）
          padding: 5,                   // 提示内边距，单位px，默认各方向内边距为5，
                                // 接受数组分别设定上右下左边距，同css
            axisPointer : {                 // 坐标轴指示器，坐标轴触发有效
              type : 'line',         // 默认为直线，可选为：'line' | 'shadow'
            lineStyle : {          // 直线指示器样式设置
              color: '#48b',
              width: 2,
              type: 'solid'
            },
            shadowStyle : {              // 阴影指示器样式设置
              width: 'auto',         // 阴影大小
              color: 'rgba(150,150,150,0.3)'  // 阴影颜色
            }
            },
            textStyle: {
            color: '#fff'
            }
            
        },

        legend: [
          {
            orient: 'horizontal',
            x: '8%',
            y: '10%',
            align: 'left',
            data: ['北京'],
            textStyle: {
              fontSize: 14,
            },
          },
          {
            orient: 'horizontal',
            x: '16%',
            y: '10%',
            align: 'left',
            data: ['上海'],
            textStyle: {
              fontSize: 14,
            },
          },
          {
            orient: 'horizontal',
            x: '24%',
            y: '10%',
            align: 'left',
            data: ['福建'],
            textStyle: {
              fontSize: 14,
            },
          },
          {
            orient: 'horizontal',
            x: '32%',
            y: '10%',
            align: 'left',
            data: ['海南'],
            textStyle: {
              fontSize: 14,
            },
          },
        ],
        xAxis: [{
        axisLine:{
        symbolSize:[10,22],
          lineStyle:{
            width:0,
            type: [5, 10],
            dashOffset: 5
          }
        },
        axisTick:{
         show:false
        },
          onZero:true,
          type: 'value',
          scale: true,
          splitLine: {
            show: false,
            
          },
        },
        ],
        yAxis: [{
        axisLine:{
        symbolSize:[10,22],
          lineStyle:{
            width:0,
            type: [5, 10],
            dashOffset: 5
          }
        },
        axisTick:{
         show:false
        },
          onZero:true,
          type: 'value',
          scale: true,
          splitLine: {
            show: false,
          },
        }],
        series: [
          {
            name: '北京',
            z: 3,
            type: 'scatter',
            symbolSize: function (data) {
              return Math.sqrt(data[2]) / 5e2;
            },
            emphasis: {
              focus: 'series',
              label: {
              show: true,
              }
            },
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(255, 100, 150, 0.5)',
              shadowOffsetY: 5,
            },
            data: [
              [0.4, 0.65,412784114], [0.1, 0.59,472185121]
            ],
          },
          {
            name: '上海',
            z: 3,
            type: 'scatter',
            symbolSize: function (data) {
              return Math.sqrt(data[2]) / 5e2;
            },
            emphasis: {
              focus: 'series',
              label: {
              show: true,
              }
            },
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(255, 100, 150, 0.5)',
              shadowOffsetY: 5,
            },
            data: [[0.6, 1.8,517218965], [0.7, 0.66,517218965],
            [0.8, 0.54,517218965], [0.89, 0.9,517218965],
            ],
          },
          {
            name: '福建',
            type: 'scatter',
            symbolSize: function (data) {
              return Math.sqrt(data[2]) / 5e2;
            },
            data: [[0.3, 0.2,517218965], [0.4, 0.28,517218965],[2,2,517218965]],
            emphasis: {
              focus: 'series',
              label: {
              show: true,
              }
            },
            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: '海南',
            type: 'scatter',
            symbolSize: function (data) {
              return Math.sqrt(data[2]) / 5e2;
            },
            data: [[0.6, 0.3,517218965],[1,0.7,517218965]],
            emphasis: {
              focus: 'series',
              label: {
              show: true,
              }
            },
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(255, 100, 150, 0.5)',
              shadowOffsetY: 5,
            },
          },
            {
            name:'',
            symbol: "none",
            type: 'scatter',
            label:{
              show:false,
            },
            labelLine:{
               show:false,
             },
            itemStyle:{
              normal: {
                color: '#999',
              },
             },
            data: [[0.4, 0.5]],
            markLine: {
              silent:true,
              symbol:'none',
              label:{
                show:false,
              },
              data: [
                {
                  type: 'average',
                  valueIndex: 0,
                },
              ],
            },
          },
          
                      {
            name:'',
            symbol: "none",
            type: 'scatter',
            label:{
              show:false,
            },
            labelLine:{
               show:false,
             },
            itemStyle:{
              normal: {
                color: '#999',
              },
             },
            data: [[0.5, 0.7]],
            markLine: {
              silent:true,
              symbol:'none',
              label:{
                show:false,
              },
              data: [
                {
                  type: 'average',
                },
              ],
            },
          },
          
    
        ],
      };
专心哦
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Echarts实现气泡图（含完整代码，可直接运行）
Delicia_Lani的博客
11-08 1万+
Echarts示例图中提供的气泡图是这样的：Examples - Apache ECharts 当然还提供了另外几个，具体可参考官网。但是我的需求中不能显示横纵坐标，具体的实现效果如图所示： 在展现气泡的过程中，最大的问题应该是某一个气泡的横纵坐标，因为要防止重合。其实后来想想，可以不用这个气泡图，而是自己写，然后生成随机数渲染图，并且球的大小根据value值得变大而变大。既然已经用了，那就来说说使用Echarts的实现吧。 <template> <div> &.
使用echarts实现四象限散点图
09-02
1、文件夹下载下来后直接双击html文件即可看到效果； 2、项目中多次使用，保证稳定； 3、代码中有详细的介绍说明； 4、可以单独拿出来作为插件使用； 5、有问题欢迎留言，看到会解答；
excel散点图_气泡图
07-03
办公软件excel中关于散点图、气泡图的使用方法和技巧
Echarts数据可视化 【气泡图】
weixin_42390621的博客
08-21 1260
【代码】Echarts数据可视化 【气泡图】
可视化 | 【echarts】气泡图（有样式的散点图）
因为健忘，所以记点有的没的〒▽〒
01-22 1816
【echarts】气泡图
echarts实现气泡图（气泡之间不叠加）
热门推荐
之毅的博客
10-21 3万+
前言：echarts本身是有气泡图的，但是本文所介绍的气泡图并不是官方所介绍的气泡图，而是一类区别于官方的图表类型，这种图表类型通常采用d3.js插件实现。Echarts官方气泡图基于坐标轴，气泡图之间容易叠加在一起。如何解决这个问题呢？
记录--Echarts绘制气泡图
林恒的博客
12-12 947
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 Echarts绘制气泡图 气泡图是一种用于可视化三维数据的图表类型，其中两个变量用于确定数据点在平面上的位置，另一个变量用于确定气泡的大小。Echarts是一款基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括灵活多变的气泡图。本文将详细介绍如何使用Echarts来绘制气泡图，并介绍气泡图相关的配置。 Echar...
vue3项目echarts实现气泡图
cweeq的博客
01-05 1636
使用echarts做气泡图、词云
echarts词云气泡图
qq_44741716的博客
07-25 1076
echarts词云气泡图
使用ECharts实现状态区间图
12-12
但后来发现，如果用堆叠条形图，则每种状态在每一个网口对应的图形中只能出现一次，这不能实现需求。于是继续查阅echart官网示例，终于在自定义类型图表中找到了一个相似的示例，地址 通过研究示例代码并进行一番...
Python Turtle绘图——四象限
05-21
自动绘图——四象限是一个python文件，他可以根据你输入的二元方程或者坐标来画图。里面面有很多功能：设置窗口大小，四象限大小，和输入方程和坐标。希望一些python厉害的大佬能指导一下我。
不同的象限内折线图
04-05
标题中的“不同的象限内折线图”是指在二维坐标系中，折线图跨越了四个象限（第一象限、第二象限、第三象限和第四象限）。这种图表通常用于展示数值型数据的变化趋势，尤其是在数据变化方向不局限于正轴的情况。折线...
Echarts scatter 气泡图-获取某时间段数据（气泡大小半径做了控制）
程序在执行
10-10 2万+
js/echarts/esl.js"> $(function(){   //自适应屏幕 $(window).resize(function(){  $("#mainScatter").panel("resize",{height:mainTableHeight(),width:mainTableWidth()});  }); }); var today=new D
Echarts 散点象限图（二）动态绘制
ZionHH的博客
11-24 1267
动态绘制散点象限图
ECharts3 实现四象限图
mighty13的专栏
09-21 3万+
可在ECharts3实例中的代码框中粘贴直接查看效果option = { title : { text: '男性女性身高体重分布', subtext: '抽样调查来自: Heinz 2003' }, grid: { left: '3%', right: '7%', bottom: '3%',
echarts自定义气泡图
YJLTF的博客
09-08 6230
拿到的需求是实现自定义x、y、size、color的气泡图，color按值以色阶排布（提需求的是我女朋友，咱也不敢问，还得加班干你说气人不~），分析完需求后我决定学习下echarts的实现，代码如下： html： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>KEG...
Echarts笔记——散点图（1）BMI涟漪散点图
XIATWO
03-30 1693
Echarts笔记——散点图（1）BMI涟漪散点图 1. 基础散点图类型（scatter) , 涟漪散点图 ( effectScatter ) 。 2. 设置涟漪动画（ rippleEffect ） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>散点图</title> <script src="..
echarts散点图设置点文字居中和虚线分割
qq_43805205的博客
03-31 1123
【代码】echarts散点图设置点文字居中和虚线分割。
前端面试题（12）答案版
最新发布
weixin_49062485的博客
06-30 740
在不同的操作系统上,设置环境变量的方式有所不同,比如在Windows上使用set命令,在Unix/Linux上使用export命令。-2） setImmediate：是Node.js中的特有API,属于微任务,会被添加到微任务队列中,在事件循环的微任务阶段执行。2) 执行完所有宏任务后,检查微任务队列(如Promise.then)是否有待执行的任务,依次执行。- 1）setTimeout：是宏任务,会被添加到宏任务队列中,在事件循环的宏任务阶段执行。在前端面试中,考察这些基本概念是非常常见的。
echarts固定象限
08-30
在 ECharts 中，要固定坐标轴的象限，你可以通过设置坐标轴的最小值和最大值来实现。 首先，确定要固定的象限。例如，如果你想固定第一象限（右上方），则需要将 x 轴的最小值设为 0，y 轴的最小值设为 0。 在 ECharts 中，可以通过以下方式设置坐标轴的最小值和最大值： ```javascript option = { xAxis: { min: 0, // x 轴最小值 // 其他配置项... }, yAxis: { min: 0, // y 轴最小值 // 其他配置项... }, // 其他配置项... }; ``` 通过设置最小值和最大值，可以确保数据点不会超出指定的象限范围。 希望这个答案能够帮到你！如果你还有其他问题，请继续提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值