function legendShare() { var zrColor = require('zrender/tool/color'); /* var color = ecConfig.color; var cidx = 0; for (var city in PG) { PG[city].color = zrColor.alpha( //zrColor.getColor(cidx++), color[cidx++ % color.length], 0.6 ); } */ var legend = myChart1.component.legend; var selected = legend.getSelectedMap(); for (var city in selected) { if (selected[city]) { // console.log(city) PG[city].color = zrColor.alpha(legend.getColor(city), 0.6); } } myChart20.hideLoading(); myChart21.hideLoading(); myChart22.hideLoading(); myChart20.setOption(option2(0, selected), true); myChart21.setOption(option2(1, selected), true); myChart22.setOption(option2(2, selected), true); }
function _buildShape() { self.selectedMap = {}; var legend = component.legend; var seriesArray = []; var serie; // 临时映射变量 var serieName; // 临时映射变量 var iconShape; var iconType; for (var i = 0, l = series.length; i < l; i++) { serie = series[i]; serieName = serie.name; if (serie.type == ecConfig.CHART_TYPE_SCATTER) { series[i] = self.reformOption(series[i]); _sIndex2ShapeMap[i] = self.deepQuery([serie], 'symbol') || _symbol[i % _symbol.length]; if (legend){ self.selectedMap[serieName] = legend.isSelected(serieName); _sIndex2ColorMap[i] = zrColor.alpha(legend.getColor(serieName),0.5); iconShape = legend.getItemShape(serieName); if (iconShape) { // 回调legend,换一个更形象的icon iconShape.shape = 'icon'; var iconType = _sIndex2ShapeMap[i]; iconShape.style.brushType = iconType.match('empty') ? 'stroke' : 'both'; iconType = iconType.replace('empty', '') .toLowerCase(); if (iconType.match('star')) { iconShape.style.n = (iconType.replace('star','') - 0) || 5; iconType = 'star'; } iconShape.style.iconType = iconType; legend.setItemShape(serieName, iconShape); } } else { self.selectedMap[serieName] = true; _sIndex2ColorMap[i] = zr.getColor(i); } if (self.selectedMap[serieName]) { seriesArray.push(i); } } } if (seriesArray.length === 0) { return; } _buildSeries(seriesArray); for (var i = 0, l = self.shapeList.length; i < l; i++) { self.shapeList[i].id = zr.newShapeId(self.type); zr.addShape(self.shapeList[i]); } }
function (airData) { DATA_READY = true; var zrColor = require('zrender/tool/color'); var ecConfig = require('echarts/config'); var color = ecConfig.color; var cidx = 0; for (var city in PG) { PG[city].color = zrColor.alpha( //zrColor.getColor(cidx++), color[cidx++ % color.length], 0.6 ); } //console.log(airData); data.format(airData,testData); showTabContent(0, oCurTabIdx); showTabContent(1); showTabContent(2); showTabContent(3, rCurTabIdx); myChart0.on(ecConfig.EVENT.MAP_ROAM, extMark); }
_buildBorkenLine: function (seriesArray, pointList, categoryAxis, orient) { var series = this.series; var data; // 堆积层叠需求,反顺序构建 for (var sIdx = seriesArray.length - 1; sIdx >= 0; sIdx--) { var seriesIndex = seriesArray[sIdx]; var serie = series[seriesIndex]; var seriesPL = pointList[seriesIndex]; if (serie.type === this.type && seriesPL != null) { var bbox = this._getBbox(seriesIndex, orient); var defaultColor = this._sIndex2ColorMap[seriesIndex]; // 折线相关,多级控制 var lineWidth = this.query( serie, 'itemStyle.normal.lineStyle.width' ); var lineType = this.query( serie, 'itemStyle.normal.lineStyle.type' ); var lineColor = this.query( serie, 'itemStyle.normal.lineStyle.color' ); var normalColor = this.getItemStyleColor( this.query(serie, 'itemStyle.normal.color'), seriesIndex, -1 ); // 填充相关 var isFill = this.query(serie, 'itemStyle.normal.areaStyle') != null; var fillNormalColor = this.query( serie, 'itemStyle.normal.areaStyle.color' ); for (var i = 0, l = seriesPL.length; i < l; i++) { var singlePL = seriesPL[i]; var isLarge = this._isLarge(orient, singlePL); if (!isLarge) { // 非大数据模式才显示拐点symbol for (var j = 0, k = singlePL.length; j < k; j++) { data = serie.data[singlePL[j][2]]; if (this.deepQuery([data, serie, this.option], 'calculable') // 可计算 || this.deepQuery([data, serie], 'showAllSymbol') // 全显示 || (categoryAxis.type === 'categoryAxis' // 主轴非空 && categoryAxis.isMainAxis(singlePL[j][2]) && this.deepQuery([data, serie], 'symbol') != 'none' ) ) { this.shapeList.push(this._getSymbol( seriesIndex, singlePL[j][2], // dataIndex singlePL[j][3], // name singlePL[j][0], // x singlePL[j][1], // y orient )); } } } else { // 大数据模式截取pointList singlePL = this._getLargePointList(orient, singlePL); } // 折线图 var brokenLineShape = new BrokenLineShape({ zlevel: this._zlevelBase, style: { miterLimit: lineWidth, pointList: singlePL, strokeColor: lineColor || normalColor || defaultColor, lineWidth: lineWidth, lineType: lineType, smooth: this._getSmooth(serie.smooth), smoothConstraint: bbox, shadowColor: this.query( serie, 'itemStyle.normal.lineStyle.shadowColor' ), shadowBlur: this.query( serie, 'itemStyle.normal.lineStyle.shadowBlur' ), shadowOffsetX: this.query( serie, 'itemStyle.normal.lineStyle.shadowOffsetX' ), shadowOffsetY: this.query( serie, 'itemStyle.normal.lineStyle.shadowOffsetY' ) }, hoverable: false, _main: true, _seriesIndex: seriesIndex, _orient: orient }); ecData.pack( brokenLineShape, series[seriesIndex], seriesIndex, 0, i, series[seriesIndex].name ); this.shapeList.push(brokenLineShape); if (isFill) { var halfSmoothPolygonShape = new HalfSmoothPolygonShape({ zlevel: this._zlevelBase, style: { miterLimit: lineWidth, pointList: zrUtil.clone(singlePL).concat([ [ singlePL[singlePL.length - 1][4], singlePL[singlePL.length - 1][5] ], [ singlePL[0][4], singlePL[0][5] ] ]), brushType: 'fill', smooth: this._getSmooth(serie.smooth), smoothConstraint: bbox, color: fillNormalColor ? fillNormalColor : zrColor.alpha(defaultColor,0.5) }, highlightStyle: { brushType: 'fill' }, hoverable: false, _main: true, _seriesIndex: seriesIndex, _orient: orient }); ecData.pack( halfSmoothPolygonShape, series[seriesIndex], seriesIndex, 0, i, series[seriesIndex].name ); this.shapeList.push(halfSmoothPolygonShape); } } } } },
define("echarts/chart/scatter",["require","./base","../util/shape/Symbol","../component/axis","../component/grid","../component/dataZoom","../component/dataRange","../config","zrender/tool/util","zrender/tool/color","../chart"],function(require){function e(e,i,a,s,r){t.call(this,e,i,a,s,r),this.refresh(s)}var t=require("./base"),i=require("../util/shape/Symbol");require("../component/axis"),require("../component/grid"),require("../component/dataZoom"),require("../component/dataRange");var a=require("../config");a.scatter={zlevel:0,z:2,clickable:!0,legendHoverLink:!0,xAxisIndex:0,yAxisIndex:0,symbolSize:4,large:!1,largeThreshold:2e3,itemStyle:{normal:{label:{show:!1}},emphasis:{label:{show:!1}}}};var s=require("zrender/tool/util"),r=require("zrender/tool/color");return e.prototype={type:a.CHART_TYPE_SCATTER,_buildShape:function(){var e=this.series;this._sIndex2ColorMap={},this._symbol=this.option.symbolList,this._sIndex2ShapeMap={},this.selectedMap={},this.xMarkMap={};for(var t,i,s,o,l=this.component.legend,n=[],h=0,d=e.length;d>h;h++)if(t=e[h],i=t.name,t.type===a.CHART_TYPE_SCATTER){if(e[h]=this.reformOption(e[h]),this.legendHoverLink=e[h].legendHoverLink||this.legendHoverLink,this._sIndex2ShapeMap[h]=this.query(t,"symbol")||this._symbol[h%this._symbol.length],l){if(this.selectedMap[i]=l.isSelected(i),this._sIndex2ColorMap[h]=r.alpha(l.getColor(i),.5),s=l.getItemShape(i)){var o=this._sIndex2ShapeMap[h];if(s.style.brushType=o.match("empty")?"stroke":"both",o=o.replace("empty","").toLowerCase(),o.match("rectangle"))s.style.x+=Math.round((s.style.width-s.style.height)/2),s.style.width=s.style.height;if(o.match("star"))s.style.n=o.replace("star","")-0||5,o="star";if(o.match("image"))s.style.image=o.replace(new RegExp("^image:\\/\\/"),""),s.style.x+=Math.round((s.style.width-s.style.height)/2),s.style.width=s.style.height,o="image";s.style.iconType=o,l.setItemShape(i,s)}}else this.selectedMap[i]=!0,this._sIndex2ColorMap[h]=r.alpha(this.zr.getColor(h),.5);if(this.selectedMap[i])n.push(h)}this._buildSeries(n),this.addShapeList()},_buildSeries:function(e){if(0!==e.length){for(var t,i,a,s,r,o,l,n,h=this.series,d={},p=0,c=e.length;c>p;p++)if(t=e[p],i=h[t],0!==i.data.length){r=this.component.xAxis.getAxis(i.xAxisIndex||0),o=this.component.yAxis.getAxis(i.yAxisIndex||0),d[t]=[];for(var u=0,g=i.data.length;g>u;u++)if(a=i.data[u],s=this.getDataFromOption(a,"-"),!("-"===s||s.length<2))l=r.getCoord(s[0]),n=o.getCoord(s[1]),d[t].push([l,n,u,a.name||""]);else;this.xMarkMap[t]=this._markMap(r,o,i.data,d[t]),this.buildMark(t)}else;this._buildPointList(d)}},_markMap:function(e,t,i,a){for(var s,r={min0:Number.POSITIVE_INFINITY,max0:Number.NEGATIVE_INFINITY,sum0:0,counter0:0,average0:0,min1:Number.POSITIVE_INFINITY,max1:Number.NEGATIVE_INFINITY,sum1:0,counter1:0,average1:0},o=0,l=a.length;l>o;o++){if(s=i[a[o][2]].value||i[a[o][2]],r.min0>s[0])r.min0=s[0],r.minY0=a[o][1],r.minX0=a[o][0];if(r.max0<s[0])r.max0=s[0],r.maxY0=a[o][1],r.maxX0=a[o][0];if(r.sum0+=s[0],r.counter0++,r.min1>s[1])r.min1=s[1],r.minY1=a[o][1],r.minX1=a[o][0];if(r.max1<s[1])r.max1=s[1],r.maxY1=a[o][1],r.maxX1=a[o][0];r.sum1+=s[1],r.counter1++}var n=this.component.grid.getX(),h=this.component.grid.getXend(),d=this.component.grid.getY(),p=this.component.grid.getYend();r.average0=r.sum0/r.counter0;var c=e.getCoord(r.average0);r.averageLine0=[[c,p],[c,d]],r.minLine0=[[r.minX0,p],[r.minX0,d]],r.maxLine0=[[r.maxX0,p],[r.maxX0,d]],r.average1=r.sum1/r.counter1;var u=t.getCoord(r.average1);return r.averageLine1=[[n,u],[h,u]],r.minLine1=[[n,r.minY1],[h,r.minY1]],r.maxLine1=[[n,r.maxY1],[h,r.maxY1]],r},_buildPointList:function(e){var t,i,a,s,r=this.series;for(var o in e)if(t=r[o],i=e[o],!(t.large&&t.data.length>t.largeThreshold))for(var l=0,n=i.length;n>l;l++)a=i[l],s=this._getSymbol(o,a[2],a[3],a[0],a[1]),s&&this.shapeList.push(s);else this.shapeList.push(this._getLargeSymbol(i,this.getItemStyleColor(this.query(t,"itemStyle.normal.color"),o,-1)||this._sIndex2ColorMap[o]))},_getSymbol:function(e,t,i,a,s){var r,o=this.series,l=o[e],n=l.data[t],h=this.component.dataRange;if(h){if(r=isNaN(n[2])?this._sIndex2ColorMap[e]:h.getColor(n[2]),!r)return null}else r=this._sIndex2ColorMap[e];var d=this.getSymbolShape(l,e,n,t,i,a,s,this._sIndex2ShapeMap[e],r,"rgba(0,0,0,0)","vertical");return d.zlevel=this.getZlevelBase(),d.z=this.getZBase(),d._main=!0,d},_getLargeSymbol:function(e,t){return new i({zlevel:this.getZlevelBase(),z:this.getZBase(),_main:!0,hoverable:!1,style:{pointList:e,color:t,strokeColor:t},highlightStyle:{pointList:[]}})},getMarkCoord:function(e,t){var i,a=this.series[e],s=this.xMarkMap[e],r=this.component.xAxis.getAxis(a.xAxisIndex),o=this.component.yAxis.getAxis(a.yAxisIndex);if(t.type&&("max"===t.type||"min"===t.type||"average"===t.type)){var l=null!=t.valueIndex?t.valueIndex:1;i=[s[t.type+"X"+l],s[t.type+"Y"+l],s[t.type+"Line"+l],s[t.type+l]]}else i=["string"!=typeof t.xAxis&&r.getCoordByIndex?r.getCoordByIndex(t.xAxis||0):r.getCoord(t.xAxis||0),"string"!=typeof t.yAxis&&o.getCoordByIndex?o.getCoordByIndex(t.yAxis||0):o.getCoord(t.yAxis||0)];return i},refresh:function(e){if(e)this.option=e,this.series=e.series;this.backupShapeList(),this._buildShape()},ondataRange:function(e,t){if(this.component.dataRange)this.refresh(),t.needRefresh=!0}},s.inherits(e,t),require("../chart").define("scatter",e),e});
_buildShape: function () { var series = this.series; this._sIndex2ColorMap = {}; // series默认颜色索引,seriesIndex索引到color this._symbol = this.option.symbolList; this._sIndex2ShapeMap = {}; // series图形类型,seriesIndex索引到_symbol this.selectedMap = {}; this.xMarkMap = {}; var legend = this.component.legend; var seriesArray = []; var serie; // 临时映射变量 var serieName; // 临时映射变量 var iconShape; var iconType; for (var i = 0, l = series.length; i < l; i++) { serie = series[i]; serieName = serie.name; if (serie.type === ecConfig.CHART_TYPE_SCATTER) { series[i] = this.reformOption(series[i]); this.legendHoverLink = series[i].legendHoverLink || this.legendHoverLink; this._sIndex2ShapeMap[i] = this.query(serie, 'symbol') || this._symbol[i % this._symbol.length]; if (legend){ this.selectedMap[serieName] = legend.isSelected(serieName); this._sIndex2ColorMap[i] = zrColor.alpha(legend.getColor(serieName), 0.5); iconShape = legend.getItemShape(serieName); if (iconShape) { // 回调legend,换一个更形象的icon var iconType = this._sIndex2ShapeMap[i]; iconShape.style.brushType = iconType.match('empty') ? 'stroke' : 'both'; iconType = iconType.replace('empty', '').toLowerCase(); if (iconType.match('rectangle')) { iconShape.style.x += Math.round( (iconShape.style.width - iconShape.style.height) / 2 ); iconShape.style.width = iconShape.style.height; } if (iconType.match('star')) { iconShape.style.n = (iconType.replace('star','') - 0) || 5; iconType = 'star'; } if (iconType.match('image')) { iconShape.style.image = iconType.replace( new RegExp('^image:\\/\\/'), '' ); iconShape.style.x += Math.round( (iconShape.style.width - iconShape.style.height) / 2 ); iconShape.style.width = iconShape.style.height; iconType = 'image'; } iconShape.style.iconType = iconType; legend.setItemShape(serieName, iconShape); } } else { this.selectedMap[serieName] = true; this._sIndex2ColorMap[i] = zrColor.alpha(this.zr.getColor(i), 0.5); } if (this.selectedMap[serieName]) { seriesArray.push(i); } } } this._buildSeries(seriesArray); this.addShapeList(); },
_addDataShape: function (pointList, defaultColor, data, seriesIndex, dataIndex, calculable) { var series = this.series; var queryTarget = [ data, this.serie ]; var nColor = this.getItemStyleColor(this.deepQuery(queryTarget, 'itemStyle.normal.color'), seriesIndex, dataIndex, data); var nLineWidth = this.deepQuery(queryTarget, 'itemStyle.normal.lineStyle.width'); var nLineType = this.deepQuery(queryTarget, 'itemStyle.normal.lineStyle.type'); var nAreaColor = this.deepQuery(queryTarget, 'itemStyle.normal.areaStyle.color'); var nIsAreaFill = this.deepQuery(queryTarget, 'itemStyle.normal.areaStyle'); var shape = { zlevel: this._zlevelBase, style: { pointList: pointList, brushType: nIsAreaFill ? 'both' : 'stroke', color: nAreaColor || nColor || (typeof defaultColor === 'string' ? zrColor.alpha(defaultColor, 0.5) : defaultColor), strokeColor: nColor || defaultColor, lineWidth: nLineWidth, lineType: nLineType }, highlightStyle: { brushType: this.deepQuery(queryTarget, 'itemStyle.emphasis.areaStyle') || nIsAreaFill ? 'both' : 'stroke', color: this.deepQuery(queryTarget, 'itemStyle.emphasis.areaStyle.color') || nAreaColor || nColor || (typeof defaultColor === 'string' ? zrColor.alpha(defaultColor, 0.5) : defaultColor), strokeColor: this.getItemStyleColor(this.deepQuery(queryTarget, 'itemStyle.emphasis.color'), seriesIndex, dataIndex, data) || nColor || defaultColor, lineWidth: this.deepQuery(queryTarget, 'itemStyle.emphasis.lineStyle.width') || nLineWidth, lineType: this.deepQuery(queryTarget, 'itemStyle.emphasis.lineStyle.type') || nLineType } }; ecData.pack(shape, series[seriesIndex], seriesIndex, data, dataIndex, data.name, this.component.polar.getIndicator(series[seriesIndex].polarIndex)); if (calculable) { shape.draggable = true; this.setCalculable(shape); } shape = new PolygonShape(shape); this.shapeList.push(shape); },
/** * 添加数据图形 * @param {Array<Array<number>>} pointList 点集 * @param {string} defaultColor 默认填充颜色 * @param {object} data 数据 * @param {number} serieIndex * @param {number} dataIndex * @param {boolean} calcalable */ function _addDataShape( pointList, defaultColor, data, seriesIndex, dataIndex, calculable ) { // 多级控制 var queryTarget = [data, serie]; var nColor = self.deepQuery( queryTarget, 'itemStyle.normal.color' ); var nLineWidth = self.deepQuery( queryTarget, 'itemStyle.normal.lineStyle.width' ); var nLineType = self.deepQuery( queryTarget, 'itemStyle.normal.lineStyle.type' ); var nAreaColor = self.deepQuery( queryTarget, 'itemStyle.normal.areaStyle.color' ); var nIsAreaFill = self.deepQuery( queryTarget, 'itemStyle.normal.areaStyle' ); var shape = { shape : 'polygon', zlevel : _zlevelBase, style : { pointList : pointList, brushType : nIsAreaFill ? 'both' : 'stroke', color : nAreaColor || nColor || zrColor.alpha(defaultColor,0.5), strokeColor : nColor || defaultColor, lineWidth : nLineWidth, lineType : nLineType }, highlightStyle : { brushType : self.deepQuery( queryTarget, 'itemStyle.emphasis.areaStyle' ) || nIsAreaFill ? 'both' : 'stroke', color : self.deepQuery( queryTarget, 'itemStyle.emphasis.areaStyle.color' ) || nAreaColor || nColor || zrColor.alpha(defaultColor,0.5), strokeColor : self.deepQuery( queryTarget, 'itemStyle.emphasis.color' ) || nColor || defaultColor, lineWidth : self.deepQuery( queryTarget, 'itemStyle.emphasis.lineStyle.width' ) || nLineWidth, lineType : self.deepQuery( queryTarget, 'itemStyle.emphasis.lineStyle.type' ) || nLineType } }; ecData.pack( shape, series[seriesIndex], // 系列 seriesIndex, // 系列索引 data, // 数据 dataIndex, // 数据索引 data.name, // 数据名称 // 附加指标信息 component.polar.getIndicator(series[seriesIndex].polarIndex) ); if (calculable) { shape.draggable = true; self.setCalculable(shape); } self.shapeList.push(shape); }
/** * 生成折线和折线上的拐点 */ function _buildBorkenLine(pointList, categoryAxis, orient) { var defaultColor; // 折线相关 var lineWidth; var lineType; var lineColor; var normalColor; var emphasisColor; // 填充相关 var isFill; var fillNormalColor; var serie; var data; var seriesPL; var singlePL; // 堆叠层叠需求,反顺序构建 for (var seriesIndex = series.length - 1; seriesIndex >= 0; seriesIndex-- ) { serie = series[seriesIndex]; seriesPL = pointList[seriesIndex]; if (serie.type == ecConfig.CHART_TYPE_LINE && typeof seriesPL != 'undefined' ) { defaultColor = _sIndex2ColorMap[seriesIndex]; // 多级控制 lineWidth = self.deepQuery( [serie], 'itemStyle.normal.lineStyle.width' ); lineType = self.deepQuery( [serie], 'itemStyle.normal.lineStyle.type' ); lineColor = self.deepQuery( [serie], 'itemStyle.normal.lineStyle.color' ); normalColor = self.deepQuery( [serie], 'itemStyle.normal.color' ); emphasisColor = self.deepQuery( [serie], 'itemStyle.emphasis.color' ); isFill = typeof self.deepQuery( [serie], 'itemStyle.normal.areaStyle' ) != 'undefined'; fillNormalColor = self.deepQuery( [serie], 'itemStyle.normal.areaStyle.color' ); for (var i = 0, l = seriesPL.length; i < l; i++) { singlePL = seriesPL[i]; for (var j = 0, k = singlePL.length; j < k; j++) { data = serie.data[singlePL[j][2]]; if ((categoryAxis.isMainAxis(singlePL[j][2]) // 主轴 && self.deepQuery( // 非空 [data, serie], 'symbol' ) != 'none' ) || self.deepQuery( // 可计算 [data, serie, option], 'calculable' ) ) { self.shapeList.push(_getSymbol( seriesIndex, singlePL[j][2], // dataIndex singlePL[j][3], // name singlePL[j][0], // x singlePL[j][1], // y self.deepQuery( [data], 'itemStyle.normal.color' ) || normalColor || defaultColor, self.deepQuery( [data], 'itemStyle.emphasis.color' ) || emphasisColor || normalColor || defaultColor, lineWidth, self.deepQuery( [data, serie], 'symbolRotate' ) )); } } // 折线图 self.shapeList.push({ shape : 'brokenLine', zlevel : _zlevelBase, style : { pointList : singlePL, strokeColor : lineColor || normalColor || defaultColor, lineWidth : lineWidth, lineType : lineType, shadowColor : self.deepQuery( [serie], 'itemStyle.normal.lineStyle.shadowColor' ), shadowBlur: self.deepQuery( [serie], 'itemStyle.normal.lineStyle.shadowBlur' ), shadowOffsetX: self.deepQuery( [serie], 'itemStyle.normal.lineStyle.shadowOffsetX' ), shadowOffsetY: self.deepQuery( [serie], 'itemStyle.normal.lineStyle.shadowOffsetY' ) }, hoverable : false, _main : true, _seriesIndex : seriesIndex, _orient : orient }); if (isFill) { self.shapeList.push({ shape : 'polygon', zlevel : _zlevelBase, style : { pointList : singlePL.concat([ [ singlePL[singlePL.length - 1][4], singlePL[singlePL.length - 1][5] - 2 ], [ singlePL[0][4], singlePL[0][5] - 2 ] ]), brushType : 'fill', color : fillNormalColor ? fillNormalColor : zrColor.alpha(defaultColor,0.5) }, hoverable : false, _main : true, _seriesIndex : seriesIndex, _orient : orient }); } } } } }