echars 圆圈刻度百分比

最新推荐文章于 2023-06-28 21:40:33 发布

xkxnq

最新推荐文章于 2023-06-28 21:40:33 发布

阅读量429

点赞数 2

CC 4.0 BY-SA版权

分类专栏： echars vue 文章标签： vue.js node.js

本文链接：https://blog.youkuaiyun.com/xkxnq/article/details/104712836

vue 同时被 2 个专栏收录

11 篇文章

订阅专栏

echars

0 篇文章

订阅专栏

本文介绍了一个使用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);
}