Echarts——echarts 仪表盘在 data 中显示百分数

dbt@L

于 2024-08-11 09:08:01 发布

阅读量405

点赞数 3

分类专栏： ECharts 文章标签： echarts

本文链接：https://blog.csdn.net/qq_43201350/article/details/141101209

版权

ECharts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

关键：在 series-detail-formatter 中增加 formatter: ‘{value}%’

当前项目：vue3 + ECharts + TypeScript

代码：

<div>
  <div ref="chart"></div>
</div>

<script>
  import * as echarts from 'echarts';
  export default {
    mounted() {
      this.createHalfCircleChart();
    },
    methods: {
      createHalfCircleChart() {
        var chart = echarts.init(this.$refs.chart);

        let option = {
          series: [
            {
              startAngle: 210,
              endAngle: -30,
              name: '123',
              type: 'gauge',
              title: {
                offsetCenter: [0, '30%'],
                color: '#999',
                fontSize: 14,
              },

              detail: {
                color: '#0052D9',
                fontSize: 48,
                fontWeight: 'normal',
                offsetCenter: [0, '0%'],
                formatter: '{value}%',
              },
              axisLine: {
                show: true,
                lineStyle: {
                  width: 20,
                  shadowBlur: 0,
                  color: [
                    [0.3, '#0052D9'],
                    [1, '#f3f3f3'],
                  ],
                },
              },
              axisTick: {
                show: false,
                splitNumber: 1,
              },
              splitLine: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
              pointer: {
                show: false,
              },
              data: [
                {
                  name: '标题标题',
                  value: Math.floor(30),
                },
              ],
            },
          ],
        };


        chart.setOption(option);
      },
    },
  };
</script>