记ECharts的仪表盘结合柱状图使用--初始值为0的问题

源码引自:https://www.makeapie.com/editor.html?c=xj5fIwQ_YMecharts版本:echarts-4.9.0代码如下:let data = 100;let rate = '♥♥♥♥♥';option = { //backgroundColor: 'transparent', backgroundColor: '#00111b', // 标题:【0】指数显示,【1】数值显示 title: [{ te
摘要由CSDN通过智能技术生成

源码引自:https://www.makeapie.com/editor.html?c=xj5fIwQ_YM

echarts版本:echarts-4.9.0

代码如下:

let data = 100;
let rate = '♥♥♥♥♥';
option = {
    //backgroundColor: 'transparent',
    backgroundColor: '#00111b',
    // 标题:【0】指数显示,【1】数值显示
    title: [{
        text: '身心能量指数\n' + rate,
        x: 'center',
        top: '54%',
        textStyle: {
            color: '#be8c3c',
            fontSize: 20,
            fontWeight: '100',
        }
    }, {
        text: data,
        x: 'center',
        top: '43%',
        textStyle: {
            fontSize: '90',
            color: '#be8c3c',
            fontFamily: 'SimHei',
            fontStyle: 'oblique',
            foontWeight: '500',
        },
    }],
    // 极坐标系
    polar: {
        radius: ['24%', '30%'],
        center: ['50%', '50%'],
    },
    // 极坐标系:角度轴
    angleAxis: {
        max: 100 * 360 / 270,
        show: false,
        type: 'value',
        startAngle: 225
    },
    // 极坐标系:径向轴
    radiusAxis: {
        type: 'category',
        show: true,
        axisLabel: {
            show: false,
        },
        axisLine: {
            show: false,

        },
        axisTick: {
            show: false
        },
    },
    series: [
        // 第二层:数据以进度条的形式展示
        {
            type: 'bar',
            data: [{
                value: data
            }],
            itemStyle: {
                color: function() {
                    let obj = {
                        type: 'linear',
                        x: 0, //右
                        y: 0.5, //下
                        x2: 1, //左
                        y2: 0, //上
                        colorStops: [{
                            offset: 0,
                            color: '#8ac4d4'
                        }, {
                            offset: 1,
                            color: '#ec5e26'
                        }]
                    };

                    if (data >= 0 && data < 20) {
                        obj.colorStops[1].color = '#8ac4d4';
                    } else if (data >= 20 && data < 40) {
                        obj.y = 0.3;
                        obj.x2 = 2;
     
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值