echarts-饼图和 模拟事件补充

news/2024/7/7 21:02:01

饼图的数据是由 name 和 value 组成的数组
饼图无须配置 xAxis 和 yAxis

  let ddaa = [
    {name:'CPU:i3-12100F',value:799},
    {name:'主板:华硕B660M',value:519},
    {name:'显示器:AOC-27G2',value:1299},
    {name:'显卡:RX5500',value:1399},
    {name:'固态硬盘:西数SN550 250G',value:299},
    {name:'机械硬盘:西数蓝盘 1T',value:280},
    {name:'内存:威刚2666 8G*2',value:378},
    {name:'机箱:普普通通',value:50},
    {name:'电源:450W',value:229},
    {name:'散热:九州风神玄冰400',value:79},
  ]


  let options1 = {
    tooltip: {// 提示框组件。// trigger:'item' 默认的鼠标移动到色块上触发
      trigger: 'item',
    },
    series:[
      {
        type:'pie', // 饼图
        data:ddaa,
        label:{ // 文字的说明
          show:true,
          // 决定文字的显示内容
          formatter:function (arg) {
              return  arg.percent + '%'
          },
          tooltip: {
            show: true
          },
        },
      }
    ]
  }

南丁格尔图

南丁格尔图指的是每一个扇形的半径随着数据的大小而不同, 数值占比越大, 扇形的半径也就越大

roseType:'radius' // 直属 series

选中效果

selectedMode: 'multiple'
选中模式,表示是否支持多个选中,默认关闭,支持布尔值和字符串,字符串取值可 选 'single' , 'multiple' ,分别表示单选还是多选
selectedOffset: 30 //选中扇区的偏移距离

 圆环 radius

饼图的半径。可以为如下类型:
number :直接指定外半径值。 string :例如, '20%' ,表示外半径为可视区尺寸(容器高宽中
较小一项)的 20% 长度。 Array. :数组的第一项是内半径,第二项是外半径, 通过 Array , 可以
将饼图设置为圆环图

radius:['50%','75%']

模拟用户事件

添加相应按钮
<button id="bt1">按钮触发行为</button>
<button id="bt2">按钮clear</button>
<button id="bt3">按钮option</button>
<button id="bt4">按钮dispose</button>


对应的操作事件
<script>
  $('#bt1').click(function () {
    // 模拟用户的行为
    mCharts.dispatchAction({
      type: 'highlight', // 发布事件类型 高亮
      seriesIndex: 0, // 系列的索引
      dataIndex: 4 // 数据的索引
    })
    mCharts.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: 4
    })
  })


  $('#bt2').click(function () {
    // 清空图表的实例
    mCharts.clear()
  })

  $('#bt3').click(function () {
    // 重新设置option
    mCharts.setOption(options1)
  })

  $('#bt4').click(function () {
    // 销毁mCharts
    mCharts.dispose()
  })


  $('#main').click(function(){
    mCharts.dispatchAction({
      type: 'downplay', // 再次点击取消高亮
      seriesIndex: 0, // 系列的索引
      dataIndex: 4 // 数据的索引
    })
  })
</script>


http://lihuaxi.xjx100.cn/news/18484.html

相关文章

尚硅谷kubernates学习笔记 1

文章目录1 概念1.1 组件1.2 插件1.3 术语1.4 Pod类型1.4.1 RS1.4.2 Deployment1.4.3 DaemonSet1.4.4 Job & CronJob1.5 service服务发现1.5.1 ipvs代理模式1.5.2 Service实验1.5.3 Ingress1.6 网络空间1.7 资源1.8 容器生命周期1.8.1 容器hook1.8.2 Pod状态含义1 概念 k8s…

Scratch软件编程等级考试一级——20200319

Scratch软件编程等级考试一级——20200319理论单选题判断题实操小鸡与小鸭字母AB点头问好理论 单选题 1、下面哪个积木能够调节左右声道的音量&#xff1f;&#xff08;&#xff09; 2、当我们进行数学计算时&#xff0c;需要用到下面哪个模块中的积木&#xff1f;&#xff0…

认证涉密资质过程中-保密室建设要求有哪些?

一保密室建设要求主要分为三类 1.人防&#xff1a;涉密人员培训。 2.物防&#xff1a;实体墙、&#xff08;隔板有龙骨架的也可以&#xff09;&#xff0c;注意吊顶&#xff1b;丙类以上的三保险防盗门、窗户要防护栏。 3.技防&#xff1a;门禁系统、报警系统、监控系统&…

真无线耳机哪个好?真无线耳机性价比排行榜

真无线蓝牙的市场需求越来越旺盛&#xff0c;它已经成为现代年轻人的标配。没有了耳机线的束缚&#xff0c;出行更加方便。随着我们蓝牙耳机市场的越来越饱和&#xff0c;现在的人基本人手一款蓝牙耳机&#xff0c;受到大环境的影响&#xff0c;性价比也是人们追求的。 Top1 N…

一种基于多神经网络的烟支缺陷分类与定位方法

摘要 为提高烟支生产过程中烟支缺陷检测效率及判断烟支缺陷产生的原因,提出基于多神经网络的烟支缺陷分类与定位方法。该方法首先对烟支数据集进行图像预处理,再采用改进VGG19网络对烟支是否存在缺陷进行预测,利用YOLOV3网络对缺陷烟支进行定位和类别判定,最后根据统计结果…

澳利率攀升,加息步伐将在某个时候放缓

澳大利亚储备银行(RBA)行长菲利普洛威表示&#xff0c;随着现金利率正接近“更正常水平”&#xff0c;大幅加息的理由已经“减弱”&#xff0c;这意味着未来将采取更小幅度的加息举措。 洛威在每半年赴国会做证词时的开场声明中指出&#xff0c;委员会将在10月4日的会议上讨论加…

Vue2 测试解决方案

Vue2测试解决方案 介绍 当构建可靠的应用时&#xff0c;测试在个人和团队构建新特征&#xff0c;重构代码&#xff0c;修复bug等工作中扮演了关键的角色。尽管测试的流派有很多&#xff0c;它们在web应用这个领域里主要有3大类&#xff1a; 单元测试组件测试端到端(E2E,end-…

举个栗子~Minitab 技巧(4):自定义缩放图形或数据显示

在日常使用 Minitab 时&#xff0c;我们常常会因为数据列过多、图形显示过小&#xff0c;或想重点查看某些列的数据&#xff0c;需要缩放对应的内容显示。 那么&#xff0c;数据和图形是否都可缩放显示&#xff1f;分别应该如何操作呢&#xff1f;这里&#xff0c;我们将分享三…