echars 圆圈刻度百分比

本文介绍了一个使用ECharts实现动态配置仪表盘的例子,展示了如何通过JavaScript函数设置仪表盘的各项属性,如标题位置、样式、数据系列等,并演示了如何在页面加载时初始化图表并应用动态配置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

效果如下:
效果图

export scale= (number, text) => {
  let option = {
    title: {
      x: "center",
      y: "60%",
      bottom: 50,
      text: number + '%' + text,
      textStyle: {
        fontWeight: "bold",
        fontSize: 12,
        color: "#0D252C",
        textDecoration: 'underline'
      },
    },
    series: [
      {
        splitNumber: 50,
        axisTick: false,
        axisLabel: false,
        axisLine: {
          lineStyle: {
            color: [[0, "#fff"], [1, "#fff"]],
            width: 15
          }
        },
        splitLine: {
          length: 15,
          lineStyle: {
            color: "#fff"
          }
        },
        pointer: {
          show: false,
          length: "90%",
          width: 0
        },
        detail: {
          formatter: "{value}%",
          color: "#0D252C",
          offsetCenter: [0, 0],
          fontSize: 32,
          borderBottom: "1 solid #0D252C",
          fontFamily: "Impact"
        },
        type: "gauge",
        data: [
          {
            value: number,
            name: ""
          }
        ]
      }
    ]
  }
  return option
}
<div id="gaugeContainer" style="width:200px; height:178px"></div>
mounted(){
let myChart = echarts.init(document.getElementById("gaugeContainer"));
    let option = scale(97, "可注册");
    myChart.setOption(option);
    option.series[0].axisLine.lineStyle.color = [
      [0.97, "#0D252C"],
      [1, "#198D89"]
    ];
    myChart.setOption(option);
}
### 实现 ECharts 环形图嵌套圆圈 为了创建带有透明间隔以及嵌套图像和图形的环形图表,可以利用 `ECharts` 的灵活性来定制化设计。通过调整 `series` 中的各项参数,能够实现复杂而美观的数据可视化效果。 #### 配置项详解 在构建此类图表时,核心在于合理配置 `series` 数组中的各个对象及其属性: - **radius**: 控制内径与外径的比例范围,支持绝对像素值或相对百分比表示法。 - **center**: 设置整个图表中心位置,默认位于容器正中央。 - **itemStyle.normal.color**: 自定义扇区颜色,对于制造视觉上的分隔线而言至关重要。 - **dataGap**: 调整相邻数据项间的距离,有助于形成所谓的“透明间隔”。 针对特定案例——即希望呈现内部含有其他形状(如圆形或其他几何图案)的情况,则需额外引入辅助性的背景层或是借助自定义系列类型完成此目标[^1]。 下面给出一段基于上述原则编写的 JavaScript 代码片段作为实例说明: ```javascript var myChart = echarts.init(document.getElementById('main')); option = { series: [ // 外部大圆环部分 { name: '外部', type: 'pie', radius: ['40%', '60%'], avoidLabelOverlap: false, label: { show: false }, itemStyle: { borderColor: '#fff', borderWidth: 2 }, data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'} ] }, // 内部小圆环部分 { name: '内部', type: 'pie', radius: ['20%', '40%'], center : ['50%', '50%'], // 默认全局居中 roseType : 'area', // 可选:'radius' itemStyle: { normal: { opacity: 0.7 // 半透明效果 } }, data:[ {value:234, name:'视频广告'}, {value:135, name:'搜索引擎'} ] } ] }; myChart.setOption(option); ``` 这段脚本展示了如何在一个视窗里同时渲染两个不同尺寸比例的环状结构,并且巧妙运用了半透明度营造层次感。值得注意的是,在实际开发过程中可能还需要进一步优化样式细节以满足业务场景的具体要求[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值