[GitHub] [echarts] shinken008 opened a new issue, #17966: [Bug] component/tooltip set option textStyle fontFamily failed in the svg renderer

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

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

   ### Version
   
   5.4.0
   
   ### Link to Minimal Reproduction
   
   _No response_
   
   ### Steps to Reproduce
   
   1. Echart initial.
   ```js
   chart = echarts.init(svgRef.current, 'light', {
           renderer: 'svg',
           width: E_WIDTH,
           height: E_HEIGHT
         });
   ```
   2. Config option
   ```js
   const option = {
       legend: {
         data: ['Altitude (km) vs Temperature (°C)'],
       },
       tooltip: {
         z: 200,
         trigger: 'axis',
         textStyle: {
           fontSize: 16,
           fontWeight: 'bold',
           fontFamily: 'PingFang SC' // skia 不生效，使用的是默认的 fontFamily
         }
       },
       grid: {
         left: '3%',
         right: '4%',
         bottom: '3%',
         containLabel: true
       },
       xAxis: {
         type: 'value',
         axisLabel: {
           formatter: '{value} °C'
         }
       },
       yAxis: {
         type: 'category',
         axisLine: { onZero: false },
         axisLabel: {
           formatter: '{value} km'
         },
         boundaryGap: true,
         data: ['0', '10', '20', '30', '40', '50', '60', '70', '80']
       },
       graphic: [
         {
           type: 'group',
           rotation: Math.PI / 4,
           bounding: 'raw',
           right: 110,
           bottom: 110,
           z: 100,
           children: [
             {
               type: 'rect',
               left: 'center',
               top: 'center',
               z: 100,
               shape: {
                 width: 400,
                 height: 50
               },
               style: {
                 fill: 'rgba(0,0,0,0.3)'
               }
             },
             {
               type: 'text',
               left: 'center',
               top: 'center',
               z: 100,
               style: {
                 textAlign: 'center',
                 fill: '#fff',
                 text: 'ECHARTS LINE CHART',
                 fontWeight: 'bold',
                 fontSize: '26px',
                 fontFamily: 'sans-serif'
               }
             }
           ]
         },
         {
           type: 'group',
           left: '10%',
           top: 'center',
           children: [
             {
               type: 'rect',
               z: 100,
               left: 'center',
               top: 'middle',
               shape: {
                 width: 240,
                 height: 90
               },
               style: {
                 fill: '#fff',
                 stroke: '#555',
                 lineWidth: 1,
                 shadowBlur: 8,
                 shadowOffsetX: 3,
                 shadowOffsetY: 3,
                 shadowColor: 'rgba(0,0,0,0.2)'
               }
             },
             {
               type: 'text',
               z: 100,
               left: 'center',
               top: 'middle',
               style: {
                 fill: '#333',
                 width: 200,
                 lineHeight: 14,
                 textAlign: 'center',
                 overflow: 'break',
                 text:
                   'xAxis represents temperature in °C, yAxis represents altitude in km, An image watermark in the upper right, This text block can be placed in any place',
                 fontSize: 14,
                 fontFamily: 'PingFang SC'
               }
             }
           ]
         }
       ],
       series: [
         {
           name: 'Relationship between height and temperature',
           type: 'line',
           smooth: true,
           data: [15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5],
           lineStyle: {
             color: 'blue'
           },
           itemStyle: {
             color: 'blue'
           }
         }
       ]
     };
   ```
   4. Set option.
   ```js
   chart.setOption(option);
   ```
   
   ### Current Behavior
   
   Expect tooltip text use 'PingFang SC' `faceType` ，actually is 'sans-serif' .
   
   ### Expected Behavior
   
   Expect tooltip text use 'PingFang SC' `faceType`.
   
   ### Environment
   
   ```markdown
   - OS:Macbook
   - Browser:chrome 版本 107.0.5304.110（正式版本） (arm64)
   - Framework: Non DOM environment
   ```
   
   
   ### Any additional comments?
   
   https://github.com/apache/echarts/blob/master/src/component/tooltip/tooltipMarkup.ts#L74
   
   https://github.com/apache/echarts/blob/cb722aecad5b44476a5c2f4c343b699cfa834b0e/src/component/tooltip/tooltipMarkup.ts#L79
   
   The returned style has no `fontFamily` value, so used the default `fontFamily`.


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