仪表盘自定义标题和数值样式

仪表盘自定义标题和数值样式

javascript 复制代码
fn()
var myEcharts;
function fn(v) {
    var chartDom = document.getElementById('myEcharts');
    myEcharts&& myEcharts.dispose();
    myEcharts= echarts.init(chartDom, 'walden');
    var option;
    option = {
        series: [
            {
                type: 'gauge',
                radius: '85%',
                center: ['50%', '45%'],
                max: 1,
                axisLine: {
                    lineStyle: {
                        width: 5,
                        color: [
                            [0.3, '#00a2ff'],
                            [0.7, '#00e9fb'],
                            [1, '#00a2ff']
                        ]
                    }
                },
                pointer: {
                    itemStyle: {
                        color: 'auto'
                    }
                },
                axisTick: {
                    distance: 0,
                    length: 3,
                    lineStyle: {
                        color: 'auto',
                        width: 2
                    }
                },
                splitLine: {
                    show: true,
                    distance: 0,
                    length: 8,
                    lineStyle: {
                        color: 'transparent',
                        width: 0,
                        // type: "dashed"
                    },
                },

                axisLabel: {
                    color: 'auto',
                    distance: 0,
                    fontSize: 10
                },
                detail: {
                    valueAnimation: true,
                    formatter: '{title|累计用电}' +'\n' +'{value|{value}}',
                    // color: '#666666', //或者放开这里注释的两行,将{value|{value}}=》{value} 也可
                    // fontSize: 23,
                    offsetCenter: [0, '70%'],
                    rich: { //特定样式
                        title: {
                            fontSize: 16,
                            fontWeight: 'bolder',
                            color:"#666666",
                        },
                        value: {
                            fontSize: 23, 
                            fontWeight: 'bolder',
                            color: '#666666',
                        },
                    },
                },
                data: [
                    {
                        value: 3034467.56,
                    }
                ]
            }
        ]
    };


    option && myEcharts.setOption(option);

    //图表自适应
    window.addEventListener("resize", function (event) {
        myEcharts.resize();
    })

}
相关推荐
lzb_kkk6 天前
【C++】C++四种类型转换操作符详解
开发语言·c++·windows·1024程序员节
lzb_kkk25 天前
【MFC】编辑框、下拉框、列表控件
c语言·开发语言·c++·mfc·1024程序员节
lzb_kkk1 个月前
【MFC】树控件的使用详解
开发语言·c++·windows·mfc·1024程序员节
SizeTheMoment2 个月前
List介绍
1024程序员节
开利网络2 个月前
产业互联网+三融战略:重构企业增长密码
大数据·运维·服务器·人工智能·重构·1024程序员节
wei_shuo2 个月前
从数据中台到数据飞轮:实现数据驱动的升级之路
1024程序员节·数据飞轮
玖剹2 个月前
矩阵区域和 --- 前缀和
数据结构·c++·算法·leetcode·矩阵·动态规划·1024程序员节
jamison_13 个月前
文心一言与 DeepSeek 的竞争分析:技术先发优势为何未能转化为市场主导地位?
人工智能·ai·chatgpt·gpt-3·1024程序员节
NaZiMeKiY3 个月前
HTML5前端第六章节
前端·html·html5·1024程序员节
jamison_14 个月前
颠覆未来:解锁ChatGPT衍生应用的无限可能(具体应用、功能、付费模式与使用情况)
ai·chatgpt·1024程序员节