构造函数-一个页面创建多个echart图表

13 篇文章 0 订阅
10 篇文章 0 订阅
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("","","","',"");
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值