[GitHub] [echarts] jiawulin001 commented on issue #16787: [Feature] each data element should have an option for a tooltip

[GitBox <gi...@apache.org>]

jiawulin001 commented on issue #16787:
URL: https://github.com/apache/echarts/issues/16787#issuecomment-1085524402


   Hi, I think you can keep the tooltip on by setting `alwaysShowContent` to true, and enable link click by setting `enterable` to true. Check the example below:
   <details>
   <summary>Code Example</summary>
   
   ```
   option = {
     title: {
       text: 'Distribution of Electricity',
       subtext: 'Fake Data'
     },
     tooltip: {
       trigger: 'item',
       axisPointer: {
         type: 'cross'
       },
       alwaysShowContent: true,
       enterable: true,
       formatter:function(params, ticket, callback){
         let time = params.name;
         let fkdata = params.value;
         return `<b>x: ${time}</b></br><b>y: ${fkdata}</b></br><a href="https://github.com/apache/echarts">This is Echarts!</a>`;
       },
       position:'top'
     },
     toolbox: {
       show: true,
       feature: {
         saveAsImage: {}
       }
     },
     xAxis: {
       type: 'category',
       boundaryGap: false,
       // prettier-ignore
       data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
     },
     yAxis: {
       type: 'value',
       axisLabel: {
         formatter: '{value} W'
       },
       axisPointer: {
         snap: true
       }
     },
     visualMap: {
       show: false,
       dimension: 0,
       pieces: [
         {
           lte: 6,
           color: 'green'
         },
         {
           gt: 6,
           lte: 8,
           color: 'red'
         },
         {
           gt: 8,
           lte: 14,
           color: 'green'
         },
         {
           gt: 14,
           lte: 17,
           color: 'red'
         },
         {
           gt: 17,
           color: 'green'
         }
       ]
     },
     series: [
       {
         name: 'Electricity',
         type: 'line',
         smooth: true,
         // prettier-ignore
         data: [{value: 300,select:{labelLine:{show: true},label:{show:true}}}, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
         markArea: {
           itemStyle: {
             color: 'rgba(255, 173, 177, 0.4)'
           },
           data: [
             [
               {
                 name: 'Morning Peak',
                 xAxis: '07:30'
               },
               {
                 xAxis: '10:00'
               }
             ],
             [
               {
                 name: 'Evening Peak',
                 xAxis: '17:30'
               },
               {
                 xAxis: '21:15'
               }
             ]
           ]
         }
       }
     ]
   };
   ```
   </details>


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