当前位置: 首页 > web >正文

echarts中给饼图加圆点

 

echarts中饼图加圆点 由于找不到怎么设置小圆点,尝试使用scatter散点图的方式,但是定位会出现问题

下面上上面示意图的完整代码如下:

 var data = {'name': '本年冷量','value': [329.2],};var color = ['rgba(45, 82, 216, 1)', '#00B1BF', '#00F7F8']let option = {title: {text: ['{a|' + data.value[0] + '}{b|GJ}','{c|本年冷量}'].join('\n'),textStyle: {rich: {a: {fontSize: 30,color: color[0],fontWeight: 'bold'},b: {fontSize: 16,color: '#000',verticalAlign: 'bottom',padding: [0, 0, 5, 5] // 调整位置},c: {fontSize: 14,color: '#666',padding: [10, 0, 0, 0]}}},left: 'center',top: 'center',itemGap: 0},tooltip: {formatter: function (params) {return '<span style="color: #000;">占比:' + params.value + '%</span>';}},angleAxis: {max: 1000,clockwise: true, // 逆时针// 隐藏刻度线show: false,startAngle: 90,},radiusAxis: {type: 'category',show: true,axisLabel: {show: false,},axisLine: {show: false,},axisTick: {show: false},},polar: [{center: ['50%', '50%'], //中心点位置radius: '90%' //图形大小}],series: [{name: '小环',type: 'gauge',splitNumber: 12,radius: '60%',center: ['50%', '50%'],startAngle: 0,endAngle: 359.9999,axisLine: {show: false},axisTick: {show: true,lineStyle: {color: color[1],width: 3.5,shadowBlur: 1,shadowColor: color[1],},length: 0,splitNumber: 3},splitLine: {show: false},axisLabel: {show: false},detail: {show: false}}, {type: 'bar',z: 10,data: data.value,showBackground: false,coordinateSystem: 'polar',roundCap: true,barWidth: 10,itemStyle: {normal: {opacity: 1,color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{offset: 0,color: 'rgba(45, 82, 216, 1)'},{offset: 0.85,color: 'rgba(45, 82, 216, 0)'},{offset: 1,color: 'rgba(45, 82, 216, 0)'}]),shadowBlur: 5,shadowColor: '#2A95F9',}},},{type: 'pie',name: '内层细圆环',radius: ['48%', '30%'],startAngle: 90,hoverAnimation: false,clockWise: true,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [{offset: 0,color: 'rgba(45, 82, 216, 0.5)' // 12点方向深色},{offset: 1,color: 'rgba(45, 82, 216, 0.1)' // 回到12点方向完全透明}]),}},tooltip: {show: false,},label: {show: false},data: [100]},],graphic: [{ //2、中心的文字设置type: 'text',z: 100,left: 'center',top: '28%',style: {x: 0,y: 0,fill: 'rgba(45, 82, 216, 1)', // 文字颜色为黑色text: "•",  // 小圆点font: 'bolder 30px "Microsoft YaHei", sans-serif',textAlign: 'center', //3、居中显示stroke: '#fff', // 边框颜色为白色lineWidth: 2,  // 设置边框宽度为2px}}]};

graphic: [{type: 'text',z: 100,left: 'center',top: '28%',style: {x: 0,y: 0,fill: 'rgba(45, 82, 216, 1)', // 文字颜色为黑色text: "•",  // 小圆点font: 'bolder 30px "Microsoft YaHei", sans-serif',textAlign: 'center', stroke: '#fff', // 边框颜色为白色lineWidth: 2,  // 设置边框宽度为2px}}]

简单好用

http://www.xdnf.cn/news/13945.html

相关文章:

  • 从怀疑到依赖:CodeRider 2.0 如何重塑我的编程日常
  • 关于深度学习网络中的归一化BN
  • 玩转 Databend UDF
  • 巢 湖 流 域
  • 一[1]、ubuntu18.04 安装yolov8 + 实际测试
  • 1394B 模块 EP-H6277 使用指南
  • 国产最高性能USRP SDR平台:国产USRP X440 PRO, 搭载UltraScale+ XCZU48DR芯片
  • 如何将一个url地址打包成一个windows桌面版本的应用程序
  • 火山引擎扣子的具体作用
  • Dagster 构建可靠数据体系:从挑战到解决方案的完整路径
  • uniswap v4 TickBitmap库函数解析
  • git报错fatal: 远端意外挂断了
  • 利用亚马逊 API 实现商品详情实时数据采集(开发接入示例)
  • 价格性价比高系列的高性能单片机MS32C001-C
  • 多设备联动,canopen转Ethercat网关设备接入国产 PLC 控制系统方案落地
  • 将python脚本打包进docker
  • Java并发编程实战 Day 20:响应式编程与并发
  • STM32F103x6启动代码的详细分析
  • 如何在python中实现简单的app自动化测试框架?
  • 梯度下降相关
  • Git 首次使用完整设置指南
  • 【专业数据库探索 03】图数据库实战:Neo4j构建智能推荐与关系网络分析系统
  • 动态规划3——背包类动态规划详解
  • 一个圆的周长是如何进行推演计算的?都有哪几种方式?为啥要计算圆的周长?-六年级上册(还需要再学习和思考)
  • Python开发功能项目
  • ‌CDGP|数据治理与AI人工智能:相互依存,互相赋能的新篇章
  • uni-app项目怎么实现多服务环境切换
  • 企业不同发展阶段平衡品牌建设和利润获取的策略-中小企实战运营和营销工作室博客
  • 方法 | B2B营销主题品牌化
  • [vela os_1] docs | Kconfig