bi-plugin-chart-template/dist/boxline.chart.js

(function (factory) {
    typeof define === 'function' && define.amd ? define(factory) :
    factory();
}(function () { 'use strict';

    function expanderProvider() {
        this.render = function () {
            var self = this;
            return {
                type: "bi.vertical",
                items: [{
                    type: "bi.multi_select_item",
                    selected: BI.bind(getAttr, this)(),
                    value: "设置项1",
                    height: 16,
                    handler: function () {
                        BI.bind(setAttr, self)(this.isSelected());
                    }
                }],
                vgap: 10,
                hgap: 15
            }
        };

        function getAttr() {
            var attr = this.getInjectAttr();
            return attr["testAttr"];
        }

        function setAttr(value) {
            this.setInjectAttr("testAttr", value);
        }
    }

    function chartDisplayProvider() {
        function formatData(data) {
            var header = data.header;
            var items = data.items;
            var dataGroup = {},
                dimId,
                seriesName,
                targetId;
            BI.each(header, function(i, header) {
                if (!dimId && BI.Utils.isDimDimensionById(header.dId)) {
                    dimId = header.dId;
                    seriesName = header.text;
                }
                if (!targetId && BI.Utils.isTargetById(header.dId)) {
                    targetId = header.dId;
                }
            });
            BI.each(items, function(i, row) {
                var key, value;
                BI.each(row, function(idx, cell) {
                    if (cell.dId === dimId) {
                        key = cell.value;
                    }
                    if (cell.dId === targetId) {
                        value = cell.value;
                    }
                });
                key = key || "0";
                dataGroup[key] = dataGroup[key] || [];
                dataGroup[key].push(BI.parseFloat(value));
            });
            return {
                dataGroup: dataGroup,
                seriesName: seriesName
            };
        }

        this.render = function(el, d) {
            var self = this;
            console.log(d);
            var result = formatData(d),
                series = [];
            var data = BI.map(result.dataGroup, function(i, item) {
                return item;
            });
            var axisData = BI.keys(result.dataGroup);
            var preData = echarts.dataTool.prepareBoxplotData(data);
            var boxData = [];
            var lineData = [];
            BI.each(preData.boxData, function(i, item) {
                boxData.push({
                    name: axisData[i],
                    value: item
                });
                lineData.push(item[2]);
            });
            var boxPlotSeries = {
                name: result.seriesName,
                type: "boxplot",
                data: boxData,
                tooltip: {
                    formatter: function(param) {
                        return [
                            "Experiment " + param.name + ": ",
                            "upper: " + param.data[5],
                            "Q3: " + param.data[4],
                            "median: " + param.data[3],
                            "Q1: " + param.data[2],
                            "lower: " + param.data[1]
                        ].join("<br/>");
                    }
                },
                emphasis: {
                    itemStyle: {
                        color: "rgba(134, 180, 230)"
                    }
                },
                itemStyle: {
                    color: "rgba(134, 180, 230)",
                    borderWidth: 2
                }
            };
            var lineSeries = {
                type: "line",
                data: lineData,
                zlevel: 1,
                itemStyle: {
                    color: "rgb(224, 178, 60)"
                },
                lineStyle: {
                    width: 3
                }
            };
            var series = [boxPlotSeries, lineSeries];

            // 切换图表的时候 创建过的实例不会创建，先dispose
            echarts.dispose(el);
            this.chart = echarts.init(el);

            var options = {
                color: ["#61a0a8"],
                title: [
                    {
                        text: "upper: Q3 + 1.5 * IQR \nlower: Q1 - 1.5 * IQR",
                        borderColor: "#999",
                        borderWidth: 1,
                        textStyle: {
                            fontSize: 14
                        },
                        left: "10%",
                        top: "90%"
                    }
                ],
                tooltip: {
                    trigger: "item",
                    axisPointer: {
                        type: "shadow"
                    }
                },
                grid: {
                    left: "10%",
                    right: "10%",
                    bottom: "15%"
                },
                xAxis: {
                    type: "category",
                    data: axisData,
                    boundaryGap: true,
                    nameGap: 30,
                    axisTick: {
                        show: false
                    },
                    splitArea: {
                        show: false
                    },
                    axisLabel: {
                        formatter: "{value}"
                    },
                    splitLine: {
                        show: false
                    }
                },
                yAxis: {
                    type: "value",
                    name: "",
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitArea: {
                        show: false
                    },
                    splitLine: {
                        show: true
                    }
                },
                series: series
            };
            this.chart.setOption(options);

            // var pointPara = {
            //     row: {
            //         "点击的点的维度id": "维度值",
            //         "点击的点的维度1id": "维度值",
            //         "点击的点的指标id": "指标值",
            //         "点击的点的指标2id": "指标值"
            //     },
            //     metaData: [{id: "维度字段id"}, {id: "指标字段id"}],
            //     pos: {x: 12, y:24} // 相对位置
            // };

            // var dimensionPara = {
            //     dId: "String",
            //     value: [{dId: string, text: ""}]
            // };
            // 触发联动 钻取
            // this.pointTrigger();
            // 触发维度联动
            // this.dimensionTrigger(dimensionPara);
            this.chart.on("click", function(para) {
                var pointPara = {
                    pos: {
                        x: para.event.offsetX,
                        y: para.event.offsetY
                    },
                    metaData: [
                        {
                            id: para.data.name
                        }
                    ],
                    row: {}
                };
                pointPara.row[para.data.name] = 1;
                self.pointTrigger(pointPara);
            });

            // echarts找到 横轴上维度点击的事件，但箱线图横轴维度点击不了，如果可以应该按如下写法
            // this.chart.on("dimensionClick", function () {
            //  var dimensionPara = {
            //     dId: "String",
            //     value: [{dId: string, text: ""}]
            //  };
            // self.dimensionTrigger(dimensionPara);
            // })
        };

        this.resize = function(width, height) {
            this.chart &&
                this.chart.resize({
                    width: width,
                    height: height
                });
        };
    }

    BI.provider("bi.provider.share.chart", chartDisplayProvider);
    BI.provider("bi.provider.share.expander", expanderProvider);

    BI.config("bi.provider.chart", function(provider) {
        provider.inject({
            type: "boxplot",
            text: "箱线图",
            cls: "chart-type-boxplot-column-icon",
            disabledCls: "chart-type-boxplot-column-disabled-icon",
            resultType: BICst.DESIGN.WIDGET.DETAIL,
            providers: {
                chartProvider: {
                    // 自己注册的provider
                    type: "bi.provider.share.chart"
                }
            },
            expanders: [
                {
                    type: "bi.provider.share.expander",
                    text: "xxx设置",
                    value: "attr1"
                }
            ],
            required: [
                {
                    dimension: ">=1",
                    measure: ">=1"
                }
            ]
        });
    });

}));