ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

echarts关于仪表盘的配置

2020-10-14 20:34:28  阅读:804  来源: 互联网

标签:false show color 配置 ff6700 仪表盘 true echarts


option = {
    tooltip: {
        formatter: '{a} <br/>{b} : {c}%'
    },
    toolbox: {
        feature: {
            restore: {},
            saveAsImage: {}
        }
    },
    series: [
        {
            name: '业务指标',
            startAngle: 220,
            endAngle: -40,
            type: 'gauge',
            detail: {
                formatter: '{value}%',
                color: '#ff6700'
            },
            axisLabel:{
                distance:-55
            },
            splitNumber: 4,
            axisLine: {
                show: true
            },
            splitLine: {
                show: false
            },
             axisTick: {
                show: false
            },
            pointer: {
                show: false
            },
            axisLine: {
                    lineStyle: {  
                    color: [[0.35, '#ff6700'], [1, '#23c023']]
                }  
            },
            data: [{value: 35, name: '今日饮水量'}],
            title: {                // 仪表盘标题。
                show: true,             // 是否显示标题,默认 true。
                offsetCenter: [0,"80%"],//相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
                color: "#ff6700",          // 文字的颜色,默认 #333。
                fontSize: 20,           // 文字的字体大小,默认 15。
            },
        }
    ],
    
    
};

配置结果

标签:false,show,color,配置,ff6700,仪表盘,true,echarts
来源: https://www.cnblogs.com/liuyuexue520/p/13817058.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有