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

   ### Version
   
   5.5.0
   
   ### Link to Minimal Reproduction
   
   https://echarts.apache.org/examples/zh/editor.html?c=line-gradient
   
   ### Steps to Reproduce
   
   import * as echarts from 'echarts';
   
   var ROOT_PATH = 'https://echarts.apache.org/examples';
   
   var chartDom = document.getElementById('main');
   var myChart = echarts.init(chartDom);
   var option;
   
   // prettier-ignore
   const data = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], 
["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], 
["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 
245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], 
["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 
128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], 
["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 
85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], 
["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 
72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], 
["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 
107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], 
["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], 
["2000-07-21", 111], ["2000-07-22", 57],
  ["2000-07-23", 55], ["2000-07-24", 60]];
   const dateList = data.map(function (item) {
     return item[0];
   });
   const valueList = data.map(function (item) {
     return item[1];
   });
   const weatherIcons = {
     Showers: ROOT_PATH + '/data/asset/img/weather/showers_128.png',
     Sunny: ROOT_PATH + '/data/asset/img/weather/sunny_128.png',
     Cloudy: ROOT_PATH + '/data/asset/img/weather/cloudy_128.png'
   };
   option = {
     // Make gradient line here
     visualMap: [
       {
         show: false,
         type: 'continuous',
         seriesIndex: 0,
         min: 0,
         max: 400
       },
       {
         show: false,
         type: 'continuous',
         seriesIndex: 1,
         dimension: 0,
         min: 0,
         max: dateList.length - 1
       }
     ],
     title: [
       {
         left: 'center',
         text: 'Gradient along the y axis'
       },
       {
         top: '55%',
         left: 'center',
         text: 'Gradient along the x axis'
       }
     ],
     tooltip: {
       trigger: 'axis'
     },
     xAxis: [
       {
         data: dateList
       },
       {
         data: dateList,
         gridIndex: 1
       }
     ],
     yAxis: [
       {},
       {
         gridIndex: 1
       }
     ],
     grid: [
       {
         bottom: '60%'
       },
       {
         top: '60%'
       }
     ],
     graphic: {
       id: '123',
       elements: [
         {
           type: 'group',
           top: 5,
           z: 3,
           children: [
             {
               type: 'rect',
               shape: {
                 width: 300,
                 height: 24
               },
               cursor: 'none',
               style: {
                 fill: '#f5f6f5'
               }
             },
             {
               type: 'text',
               shape: {
                 width: 300,
                 height: 24
               },
               cursor: 'pointer',
               style: {
                 fill: '#333',
                 text: 'hello world',
                 x: 90,
                 width: 120
               },
               onclick: () => {
                 const newOpt = myChart.getOption();
                 const { graphic } = newOpt;
                 const { elements } = graphic[0];
                 elements.forEach((el) => {
                   if (el.type === 'image') {
                     el.style.x = el.style.x === 10 ? 40 : 10;
                   }
                 });
                 myChart.setOption(newOpt, true);
               }
             },
             {
               type: 'image',
               cursor: 'pointer',
               z: 20,
               top: 2,
               ignore: false,
               style: {
                 image: weatherIcons.Sunny,
                 width: 20,
                 x: 10,
                 info: 'rgba(228, 86, 34, 1)',
                 lineWidth: 2,
                 opacity: 1
               },
               onclick: () => {
                 const newOpt = myChart.getOption();
                 const { graphic } = newOpt;
                 const { elements } = graphic[0];
                 elements.forEach((el) => {
                   if (el.type === 'image') {
                     el.style.x = el.style.x === 10 ? 40 : 10;
                   }
                 });
                 myChart.setOption(newOpt);
               }
             },
             {
               type: 'image',
               cursor: 'pointer',
               z: 20,
               top: 2,
               ignore: false,
               style: {
                 image: weatherIcons.Cloudy,
                 width: 20,
                 x: 40,
                 info: 'rgba(228, 86, 34, 1)',
                 lineWidth: 2,
                 opacity: 1
               },
               onclick: () => {
                 const newOpt = myChart.getOption();
                 const { graphic } = newOpt;
                 const { elements } = graphic[0];
                 elements.forEach((el) => {
                   if (el.type === 'image') {
                     el.style.x = el.style.x === 10 ? 40 : 10;
                   }
                 });
                 myChart.setOption(newOpt, true);
               }
             }
           ]
         }
       ]
     },
     series: [
       {
         type: 'line',
         showSymbol: false,
         data: valueList
       },
       {
         type: 'line',
         showSymbol: false,
         data: valueList,
         xAxisIndex: 1,
         yAxisIndex: 1
       }
     ]
   };
   
   option && myChart.setOption(option);
   
   
   ### Current Behavior
   
   if(type === 'text'), 可以一直切换图标
    但是
   type = 'image',切换一次后, 图标无法再点击
   
   ### Expected Behavior
   
   当 graphic中type为image时, setOption(opt, true) 后, 仍可正常使用
   
   ### Environment
   
   ```markdown
   - OS:macOS Monterey 12.2.1
   - Browser:127.0.6533.72
   - Framework: React, next.js
   ```
   
   
   ### 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: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]


---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]

Reply via email to