You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2021/07/01 07:34:32 UTC

[GitHub] [echarts] whp1991 commented on issue #15268: vue中使用堆叠柱状图:formatter函数中过去不到this,如何获取stack的值

whp1991 commented on issue #15268:
URL: https://github.com/apache/echarts/issues/15268#issuecomment-872001444


   > ```
   > var xAxisData = [];
   > var data1 = [];
   > var data2 = [];
   > var data3 = [];
   > var data4 = [];
   > 
   > for (var i = 0; i < 10; i++) {
   >     xAxisData.push('Class' + i);
   >     data1.push((Math.random() * 2).toFixed(2));
   >     data2.push((Math.random() * 5).toFixed(2));
   >     data3.push((Math.random() + 0.3).toFixed(2));
   >     data4.push(Math.random().toFixed(2));
   > }
   > 
   > var emphasisStyle = {
   >     itemStyle: {
   >         shadowBlur: 10,
   >         shadowColor: 'rgba(0,0,0,0.3)'
   >     }
   > };
   > 
   > var getStackByName = (name) => {
   >     return name.split('-')[0];
   > }
   > 
   > option = {
   >     brush: {
   >         toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
   >         xAxisIndex: 0
   >     },
   >     toolbox: {
   >         feature: {
   >             magicType: {
   >                 type: ['stack', 'tiled']
   >             },
   >             dataView: {}
   >         }
   >     },
   >     tooltip: {
   >         formatter: ({ seriesName, value }) => {
   >             return getStackByName(seriesName)  + ':' + value;
   >         },
   >     },
   >     xAxis: {
   >         data: xAxisData,
   >         name: 'X Axis',
   >         axisLine: {onZero: true},
   >         splitLine: {show: false},
   >         splitArea: {show: false}
   >     },
   >     yAxis: {},
   >     grid: {
   >         bottom: 100
   >     },
   >     series: [
   >         {
   >             name: 's1-1',
   >             type: 'bar',
   >             stack: getStackByName('s1-1'),
   >             emphasis: emphasisStyle,
   >             data: data1
   >         },
   >         {
   >             name: 's1-2',
   >             type: 'bar',
   >             stack: getStackByName('s1-2'),
   >             emphasis: emphasisStyle,
   >             data: data2
   >         },
   >         {
   >             name: 's2-1',
   >             type: 'bar',
   >             stack: getStackByName('s2-1'),
   >             emphasis: emphasisStyle,
   >             data: data3
   >         },
   >         {
   >             name: 's2-2',
   >             type: 'bar',
   >             stack: getStackByName('s2-2'),
   >             emphasis: emphasisStyle,
   >             data: data4
   >         }
   >     ]
   > };
   > 
   > myChart.on('brushSelected', renderBrushed);
   > 
   > function renderBrushed(params) {
   >     var brushed = [];
   >     var brushComponent = params.batch[0];
   > 
   >     for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
   >         var rawIndices = brushComponent.selected[sIdx].dataIndex;
   >         brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
   >     }
   > 
   >     myChart.setOption({
   >         title: {
   >             backgroundColor: '#333',
   >             text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
   >             bottom: 0,
   >             right:'10%',
   >             width: 100,
   >             textStyle: {
   >                 fontSize: 12,
   >                 color: '#fff'
   >             }
   >         }
   >     });
   > }
   > ```
   > 
   > 可以像上面的`getStackByName`函数做的那样,用一个函数或映射,把`stack`信息和`seriesName`或其他属性关联起来。
   > 
   > You can try to associate stack information with seriesName or other attributes by a map or a getter function, as what `getStackByName` function does above.
   
   Thank you for your reply, but I want to show all the information of each stack column, not the information of each item
   
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org