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 2022/04/19 01:19:12 UTC

[GitHub] [echarts] zhuang010203 opened a new issue, #16907: [Bug] myChart.dispatchAction

zhuang010203 opened a new issue, #16907:
URL: https://github.com/apache/echarts/issues/16907

   ### Version
   
   5.2.2
   
   ### Link to Minimal Reproduction
   
   https://echarts.apache.org/examples/zh/editor.html?c=geo-organ
   
   ### Steps to Reproduce
   
   import * as echarts from 'echarts';
   
   var ROOT_PATH =
     'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
   
   var chartDom = document.getElementById('main');
   var myChart = echarts.init(chartDom);
   var option;
   
   $.get(
     ROOT_PATH + '/data/asset/geo/Veins_Medical_Diagram_clip_art.svg',
     function (svg) {
       echarts.registerMap('organ_diagram', { svg: svg });
       option = {
         tooltip: {},
         geo: {
           left: 10,
           right: '50%',
           map: 'organ_diagram',
           selectedMode: 'multiple',
           emphasis: {
             focus: 'self',
             itemStyle: {
               color: null
             },
             label: {
               position: 'bottom',
               distance: 0,
               textBorderColor: '#fff',
               textBorderWidth: 2
             }
           },
           blur: {},
           select: {
             itemStyle: {
               color: '#b50205'
             },
             label: {
               show: false,
               textBorderColor: '#fff',
               textBorderWidth: 2
             }
           }
         },
         grid: {
           left: '60%',
           top: '20%',
           bottom: '20%'
         },
         xAxis: {},
         yAxis: {
           data: [
             'heart',
             'large-intestine',
             'small-intestine',
             'spleen',
             'kidney',
             'lung',
             'liver'
           ]
         },
         series: [
           {
             type: 'bar',
             emphasis: {
               focus: 'self'
             },
             data: [121, 321, 141, 52, 198, 289, 139]
           }
         ]
       };
       myChart.setOption(option);
   
       myChart.dispatchAction({
         type: 'highlight',
         geoIndex: 0,
         name: ['liver', 'heart']
         //name:'liver'
       });
   
       myChart.on('mouseover', { seriesIndex: 0 }, function (event) {
         myChart.dispatchAction({
           type: 'highlight',
           geoIndex: 0,
           name: event.name
         });
       });
       myChart.on('mouseout', { seriesIndex: 0 }, function (event) {
         myChart.dispatchAction({
           type: 'downplay',
           geoIndex: 0,
           name: event.name
         });
       });
     }
   );
   
   option && myChart.setOption(option);
   
   ### Current Behavior
   
   geo map use API(highlight)
   
   // 如果要高亮 geo 组件(从 `v5.1.0` 开始支持):
   dispatchAction({
       type: 'highlight',
   
       // 用 index 或 id 或 name 来指定 geo 组件。
       // 可以用数组指定多个 geo 组件。
       geoIndex?: number | number[],
       geoId?: string | string[],
       geoName?: string | string[],
   
       // geo 组件中 region 名称。
       // 可以是一个数组指定多个名称。
       **name?: string | string[],**
   });
   name?:sting     //is OK
   name?:string[] //No
   
   ### Expected Behavior
   
   import * as echarts from 'echarts';
   
   var ROOT_PATH =
     'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
   
   var chartDom = document.getElementById('main');
   var myChart = echarts.init(chartDom);
   var option;
   
   $.get(
     ROOT_PATH + '/data/asset/geo/Veins_Medical_Diagram_clip_art.svg',
     function (svg) {
       echarts.registerMap('organ_diagram', { svg: svg });
       option = {
         tooltip: {},
         geo: {
           left: 10,
           right: '50%',
           map: 'organ_diagram',
           selectedMode: 'multiple',
           emphasis: {
             focus: 'self',
             itemStyle: {
               color: null
             },
             label: {
               position: 'bottom',
               distance: 0,
               textBorderColor: '#fff',
               textBorderWidth: 2
             }
           },
           blur: {},
           select: {
             itemStyle: {
               color: '#b50205'
             },
             label: {
               show: false,
               textBorderColor: '#fff',
               textBorderWidth: 2
             }
           }
         },
         grid: {
           left: '60%',
           top: '20%',
           bottom: '20%'
         },
         xAxis: {},
         yAxis: {
           data: [
             'heart',
             'large-intestine',
             'small-intestine',
             'spleen',
             'kidney',
             'lung',
             'liver'
           ]
         },
         series: [
           {
             type: 'bar',
             emphasis: {
               focus: 'self'
             },
             data: [121, 321, 141, 52, 198, 289, 139]
           }
         ]
       };
       myChart.setOption(option);
   
       myChart.dispatchAction({
         type: 'highlight',
         geoIndex: 0,
         **name: ['liver', 'heart'] //No
         //name:'liver'             // is OK**
       });
   
       myChart.on('mouseover', { seriesIndex: 0 }, function (event) {
         myChart.dispatchAction({
           type: 'highlight',
           geoIndex: 0,
           name: event.name
         });
       });
       myChart.on('mouseout', { seriesIndex: 0 }, function (event) {
         myChart.dispatchAction({
           type: 'downplay',
           geoIndex: 0,
           name: event.name
         });
       });
     }
   );
   
   option && myChart.setOption(option);
   
   ### Environment
   
   ```markdown
   - OS:Windows10
   - Browser:96.0.4664.93 (正式版本) (64 位) (cohort: 96_win_45)
   - Framework:html
   ```
   
   
   ### Any additional comments?
   
   _No response_


-- 
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.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


[GitHub] [echarts] zhuang010203 closed issue #16907: [Bug] myChart.dispatchAction

Posted by GitBox <gi...@apache.org>.
zhuang010203 closed issue #16907: [Bug] myChart.dispatchAction
URL: https://github.com/apache/echarts/issues/16907


-- 
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