4.7bi引用外部echarts之仪表盘

近期发现亿信自带的仪表盘在某些场合的时候不大适用（酷屏），因此参照酷屏的组件写法（从网上查的）写了个仪表盘，但是发现将仪表盘放到table标签页中在页切换的时候回揉做一团无法展开（如果是酷屏不用做分页就没有这个顾虑了），这里将组件奉上，以及做法，想通各位道友交流探讨下要怎么写才好，以下是仪表盘截图：

截图201909251832244842.png (35.76 KB, 下载次数: )

下载附件

2019-9-25 18:32 上传

好了，样子是可以自己调整的（可能有点丑，请勿见怪）。
eb456354cd8f40a1a96ae76a7d55df4e.zip (12.77 KB, 下载次数: )

2019-9-25 18:34 上传

点击文件名下载附件

js脚本如下：
/**
* 初始化方法
*
* @params cwidget 组件对象
* @params vardata 取数定义中定义的变量，json格式：{'var1':'xxx'}
* @params events 事件，用户在右边属性上设置的事件, json格式：{'evt1': function(){...}, 'evt2':function(){....}}
* @params storagedata 组件自己需要存储的值，字符串格式
*/
function init(cwidget, vardata, events, storagedata){
    var basedom = cwidget.basedom;
    //var gridjson = JSON.parse(vardata.data);
     var data1 = vardata.data1;
     var name1 = vardata.name1;
     var name2 = vardata.name2;
    //引进外面js
    if(!window["echarts4"]){
        sys.lib.include("vfs/root/products/ebi/sys/coolrpt/coolresource/js/echarts.js");
    }


    var _date='<#=GRID16.B3$#>';
    var option = {
        tooltip : {
        formatter: "{a} <br/>{b} : {c}%"
    },
    toolbox: {
        feature: {
            restore: {},
            saveAsImage: {}
        }
    },
series: [
        {
            name: '收入情况分析',
            type: 'gauge',
            detail: {formatter:'<#=GRID16.B3#>'},
            data: [{value: '<#=GRID16.B3#>',color: '#2cf5d1'}],
           type: "gauge",
                 center: ["50%", "50%"], // 仪表位置
                 radius: "100%", //仪表大小
                 startAngle: 120, //开始角度
                 endAngle: -235, //结束角度
                 axisLine: {
                     show: true,
                     lineStyle: { // 属性lineStyle控制线条样式
                         color: [
                             [ 0.5,  new echarts4.graphic.LinearGradient(0, 0, 1, 0, [{
                                 offset: 1,
                                 color: "#00eff6" // 50% 处的颜色
                             }, {
                                 offset: 0.8,
                                 color: "#1cffe3" // 40% 处的颜色
                             }], false) ], // 100% 处的颜色
                              [ 0.7,  new echarts4.graphic.LinearGradient(0, 0, 1, 0, [{
                                 offset: 1,
                                 color: "#22e7af" // 70% 处的颜色
                             }, {
                                 offset: 0.8,
                                 color: "#39f78d" // 66% 处的颜色
                             }, {
                                 offset: 0,
                                 color: "#36f981" // 50% 处的颜色
                             }], false) ],
                              [ 0.9,  new echarts4.graphic.LinearGradient(0, 0, 0, 1, [{
                                 offset: 1,
                                 color: "#2ce1ae" // 90% 处的颜色
                             }, {
                                 offset: 0.8,
                                 color: "#04c8fa" // 86% 处的颜色
                             }, {
                                 offset: 0,
                                 color: "#525cf9" // 70% 处的颜色
                             }], false) ],
                             [1,  new echarts4.graphic.LinearGradient(0, 0, 0, 1, [ {
                                 offset: 0.2,
                                 color: "#7c50ef" // 92% 处的颜色
                             }, {
                                 offset: 0,
                                 color: "#7b44ff" // 90% 处的颜色
                             }], false) ]
                         ],
                         width: 5
                 }
                        },splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        pointer : { //指针样式
                             show: false
                        },
                        detail: {
                            show: false
                        }
                },
                {       
                    type : "gauge",
                    center: ["50%", "50%"], // 默认全局居中
                    radius : "90%",
                    startAngle: 270,
                    endAngle: -89,
                    axisLine : {
                        show : true,
                        lineStyle : { // 属性lineStyle控制线条样式
                            color : [ //表盘颜色
                                [ 0.5, "#00eff6" ],//0-50%处的颜色
                                [ 0.7, "#1cffe3" ],//51%-70%处的颜色
                                [ 0.9, "#39f78d" ],//70%-90%处的颜色
                                [ 1,"#2ce1ae" ]//90%-100%处的颜色
                            ],
                            width : 3//表盘宽度
                        }
                    },
                    splitLine : { //分割线样式（及10、20等长线样式）
                        length : 3,
                        lineStyle : { // 属性lineStyle控制线条样式
                            width : 2,
                    color: '#0b2155'
                        }
                    },
                    axisTick : { //刻度线样式（及短线样式）
                         length : 5,
                color: '#0b2155'
                    },
                    axisLabel : { //文字样式（及“10”、“20”等文字样式）
                        color : "#2cf5d1",
                        distance : 5 //文字离表盘的距离
                    },
            pointer : { //指针样式
                width: 5
                        },
                    detail: {
                        formatter : "{score|{value}%}",
                        offsetCenter: [0, "40%"],
                color: '#0083c2',
                        backgroundColor: 'transparent',
                        height:30,
                        rich : {
                            score : {
                                color : "#2cf5d1",
                                fontFamily : "微软雅黑",
                                fontSize : 32
                            }
                        }
                    },
                    data: [{
                        value: data1,
                        label: {
                            textStyle: {
                                fontSize: 12
                            }
                        }
                    }]
                }       
               
    ]
};

    var chart = echarts4.init(basedom);
    chart.setOption(option);
    cwidget.chart = chart;
    basedom.onclick = events.evt1;
    if(cwidget.isresultview){
        //只在结果界面的时候执行，例如只想在结果界面绑定click事件

    }
}


function resize(cwidget){
    cwidget.chart&&cwidget.chart.resize();
}

function dispose(cwidget){
    cwidget.chart&&cwidget.chart.dispose();
    cwidget.chart = null;
}
/**
* 定义了自定义属性时，必须实现该方法，方法名为setProperty
* 当在属性面板上修改属性后，会调用该方法
* @param key  属性名
* @param value  属性值
* @param cwidget  组件对象
* @returns
*/
function setProperty(key, value, cwidget) {
    if (key === 'xxx') {
            //修改属性xxx时，触发的事

    } else if (key === 'yyy') {
            //修改属性yyy时，触发的事

    }
}

/**
* 刷新操作，数据改变时，调用该方法，重新渲染数据
* @param cwidget 组件对象
* @param vardata vardata 取数定义中定义的变量，json格式：{'var1':'xxx'}
* @param storagedata  组件自己需要存储的值，字符串格式
* @returns
*/
function refreshDatas(cwidget, vardata, storagedata){
     var basedom = cwidget.basedom;
     if(cwidget.chart){
          var gridjson = JSON.parse(vardata.data);
          var data = changeToData(gridjson);        
        cwidget.chart.setOption(option);
         cwidget.resize(cwidget);
     }
}


如有看到的道友欢迎留言哦！