构造函数-一个页面创建多个echart图表_echarts 展示多个echart-优快云博客

这篇博客介绍了一个用于创建个性化仪表盘的Echarts实现。通过`creatCharts`函数，我们可以设置标题、颜色、值和元素ID来初始化图表。`initchart`方法用于加载配置并绘制仪表盘，`optionFun`则用于生成Echarts的配置选项，包括自定义的样式和细节。示例调用展示了如何使用该函数创建一个简单的仪表盘。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function creatCharts(title,color,value,name,ele){
    this.title=title;
    this.color=color;
    this.value=value;
    this.name=name;
    this.ele=ele;
    this.initchart();
}
creatCharts.prototype = {
    initchart:function(){
            var obj=this;
            var chart = echarts.init(document.getElementById(obj.ele));
            var option = this.optionFun(obj.title, obj.color,obj.value,obj.name);
             //常规操作 为echarts对象加载数据
            chart.setOption(option);
    },
    //然后接下来都是一些echarts的一些常规配置
    optionFun:function(title,color,value,name){
        var option = {
            tooltip: {
                formatter: '{a} <br/>{b} : {c}%'
            },
            toolbox: {
                feature: {
                }
            },
            series: [
                {
                    name: '业务指标',
                    startAngle: 220,
                    endAngle: -40,
                    type: 'gauge',
                    detail: {
                        formatter: '{value}%',
                        color: color,
                        fontSize: 30,
                        offsetCenter: ['0', '10'], 
                    },
                    axisLabel:{
                        show: false,
                        distance:-60
                    },
                    splitNumber: 1,
                    axisLine: {
                        show: true
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    pointer: {
                        show: false
                    },
                    axisLine: {
                            lineStyle: {  
                            color: [[value / 100, color], [1, '#ccc']],
                                width: 15 // 这个是修改宽度的属性
                        }  
                    },
                    data: [{value: value, name:name}],
                    title: { 
                        text:title,               // 仪表盘标题。
                        show: true,             // 是否显示标题,默认 true。
                        offsetCenter: ["0%","-30%"],//相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
                        color: "#333",          // 文字的颜色,默认 #333。
                        fontSize: 20,           // 文字的字体大小,默认 15。
                    },
                }
            ],
                       
        };
        //将option返回
        return option;
    }
}
//调用方式 new creatCharts("","","","',"");