[GitHub] [echarts] iuliust opened a new issue #16137: [Feature] Handle changing styles of elements via CSS media queries

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

iuliust opened a new issue #16137:
URL: https://github.com/apache/echarts/issues/16137


   ### What problem does this feature solve?
   
   We're developing an application where users print charts on thermal printers. Those printers can only print in black.
   Hence, the styles of the charts as they are displayed on-screen are wildly different from the styles on print.
   
   For instance, our customer wants lines to be distinguishable by their color when on screen, but those same lines shall be only distinguishable by their lineStyle.type ('dotted', 'dashed', 'solid', [number, number]+) on print.
   
   I've seen that media queries can only be tuned for screen characteristics, but nowhere in the documentation have I seen a way to add styles specificly for print media.
   
   One way to solve the issue would be adding in the options of each component a way to specify custom attributes the generated SVG elements should have, so that they could be easily targeted via native CSS media queries. 
   
   ### What does the proposed API look like?
   
   ```typescript
       echartsInstance.setOption({
           yAxis: {
             min: 5,
             max: 18,
             interval: 6,
             customAttributes: { myId: 'y-axis' }
           },
           series: [{
             name: 'firstSeries',
             color: 'yellow'
             customAttributes: { myId: 'first-series' },
           }],
         } as CrmChartsOption, { lazyUpdate: true });
   ```
   
   ```scss
   .echarts-container {
       svg {
           @media print {
               path[data-myId="first-series"] {
                   fill: black !important;
                   stroke-dasharray: 2 2 !important;
               }
           }
       }
   }
   ```


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

[GitHub] [echarts] pissang commented on issue #16137: [Feature] Handle changing styles of elements via CSS media queries

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

pissang commented on issue #16137:
URL: https://github.com/apache/echarts/issues/16137#issuecomment-982225552


   Thanks for the suggestion. Currently you can change color palette manually before print.
   
   ```ts
   var mediaQueryList = window.matchMedia('print');
   mediaQueryList.addListener(function(mql) {
     if (mql.matches) {
         echartsInstance.setOption({ color: ['#000'] });
      } else {
         echartsInstance.setOption({ color: normalColorPalette });
      }
   });
   ```


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