(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("
"); } }, 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" } ] }); }); }));