parallel style tweak

src/chart/parallel/ParallelSeries.js

@@ -33,6 +33,7 @@ define(function(require) {
             parallelIndex: 0,
 
             inactiveOpacity: 0.2,
+            activeOpacity: 1,
 
             label: {
                 normal: {

src/chart/parallel/ParallelView.js

@@ -155,7 +155,8 @@ define(function (require) {
                 return;
             }
             el.setStyle(lineStyle);
-            el.setStyle('opacity', data.getItemVisual(dataIndex, 'opacity', true));
+            var opacity = data.getItemVisual(dataIndex, 'opacity', true);
+            opacity != null && el.setStyle('opacity', opacity);
         });
     }
 

src/chart/parallel/parallelVisual.js

@@ -15,12 +15,19 @@ define(function (require) {
             var color = itemStyleModel.get('color')
                 || globalColors[seriesModel.seriesIndex % globalColors.length];
             var inactiveOpacity = seriesModel.get('inactiveOpacity');
+            var activeOpacity = seriesModel.get('activeOpacity');
 
             var coordSys = seriesModel.coordinateSystem;
             var dimensions = coordSys.dimensions;
             var dimensionNames = coordSys.getDimensionNames();
             var data = seriesModel.getData();
 
+            var opacityMap = {
+                all: null,
+                active: activeOpacity,
+                inactive: inactiveOpacity
+            };
+
             var hasActiveSet = false;
             for (var j = 0, lenj = dimensions.length; j < lenj; j++) {
                 if (coordSys.getAxis(dimensions[j].name).isActive() !== null) {
@@ -30,24 +37,24 @@ define(function (require) {
 
             for (var i = 0, len = data.count(); i < len; i++) {
                 var values = data.getValues(dimensionNames, i);
-                var isActive;
+                var activeState;
 
                 if (!hasActiveSet) {
-                    isActive = true;
+                    activeState = 'all';
                 }
                 else {
-                    isActive = false;
+                    activeState = 'inactive';
                     for (var j = 0, lenj = dimensions.length; j < lenj; j++) {
                         var dimName = dimensions[j].name;
 
                         if (coordSys.getAxis(dimName).isActive(values[j], j)) {
-                            isActive = true;
+                            activeState = 'active';
                             break;
                         }
                     }
                 }
 
-                data.setItemVisual(i, 'opacity', isActive ? 1 : inactiveOpacity);
+                data.setItemVisual(i, 'opacity', opacityMap[activeState]);
             }
 
             data.setVisual('color', color);

src/coord/parallel/AxisModel.js

@@ -33,8 +33,8 @@ define(function(require) {
             areaSelectStyle: {
                 width: 20,
                 borderWidth: 2,
-                borderColor: 'rgba(160,197,232,0.3)',
-                color: 'rgba(160,197,232,0.3)'
+                borderColor: 'rgba(160,197,232,0.4)',
+                color: 'rgba(160,197,232,0.4)'
             },
 
             z: 10

test/parallel-aqi.html

@@ -34,7 +34,7 @@
                 'zrender/core/util',
                 'echarts',
                 'echarts/chart/parallel',
-                // 'echarts/component/legend',
+                'echarts/component/legend',
                 'echarts/component/parallel',
             ], function (dataBJ, dataGZ, dataSH, zrUtil, echarts) {
 
@@ -43,9 +43,9 @@
                 });
 
 
-                var itemStyle = {
+                var lineStyle = {
                     normal: {
-                        opacity: 0.8,
+                        opacity: 0.5,
                         shadowBlur: 10,
                         shadowOffsetX: 0,
                         shadowOffsetY: 0,
@@ -58,11 +58,12 @@
                         '#dd4444', '#fec42c', '#80F1BE'
                     ],
                     legend: {
-                        y: 'top',
+                        y2: 30,
                         data: ['北京', '上海', '广州'],
+                        itemGap: 20,
                         textStyle: {
                             color: '#fff',
-                            fontSize: 20
+                            fontSize: 18
                         }
                     },
                     tooltip: {
@@ -94,6 +95,7 @@
                         {dim: 'dim6', name: schema[6].text}
                     ],
                     parallel: {
+                        y2: 100,
                         parallelAxisDefault: {
                             type: 'value',
                             name: 'AQI指数',
@@ -127,19 +129,19 @@
                         {
                             name: '北京',
                             type: 'parallel',
-                            itemStyle: itemStyle,
+                            lineStyle: lineStyle,
                             data: dataBJ
                         },
                         {
                             name: '上海',
                             type: 'parallel',
-                            itemStyle: itemStyle,
+                            lineStyle: lineStyle,
                             data: dataSH
                         },
                         {
                             name: '广州',
                             type: 'parallel',
-                            itemStyle: itemStyle,
+                            lineStyle: lineStyle,
                             data: dataGZ
                         }
                     ]