当前位置：网站首页>Common effects of line chart

Common effects of line chart

2022-07-08 01:11:00 【Just love life】

Common effect

Mark ： Maximum minimum value Average Mark the interval
markPoint 、markLine、markArea
Insert picture description here
Insert picture description here
Code 

 <!-- 1.ECharts The most basic code structure  2.x Axis data ：['1 month ','2 month ','3 month ','4 month ','5 month ','6 month ','7 month ','8 month ','9 month ','10 month ','11 month ','12 month '] 3.y Axis data ：[3000,2800,900,1000,800,700,1400,1300,900,1000,800,600] 4. take type Is set to bar --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="lib/echarts.min.js"></script> </head> <body> <div style="width: 600px;height: 400px;"></div> <script> var mCharts= echarts.init(document.querySelector('div')) var xDataArr=['1 month ','2 month ','3 month ','4 month ','5 month ','6 month ','7 month ','8 month ','9 month ','10 month ','11 month ','12 month '] var yDaraArr=[3000,2800,900,1000,800,700,1400,1300,900,1000,800,600] var option={
    
           
           xAxis:{
    
               type:'category'  ,// Taxonomic axis 
               data:xDataArr
               
           }, yAxis:{
    
               type:'value'  ,// Value axis 
              
           }, series:[
               {
    
                   name:' a brand of instant noodles ', type:'line', //bar It's a histogram ,line It's linear ,pie It's pie shaped  data:yDaraArr, markPoint:{
    
                       data:[
                           {
    
                               type:'max'
                           },
                           {
    
                               type:'min'
                           }
                       ]
                   }, markLine:{
    
                       data:[
                           {
    
                               type:'average'
                           }
                       ]
                   }, markArea:{
    
                       data:[ [
                               {
    
                                   xAxis:'1 month '
                                },
                               {
    
                                   xAxis:'2 month '
                               }
                           ],[
                               {
    
                                   xAxis:'7 month '
                               },{
    
                                   xAxis:'8 month '
                               }
                           ]
                       ]
                   }
               }
           ]
        }
        // step 5： Set the configuration item to echarts Instance object   
        mCharts.setOption(option) 
     </script>

</body>
</html>

Line control ： smooth 、 style
smooth、lineStyle
Fill the style
areaStyle
Insert picture description here
Code 

 <!-- 1.ECharts The most basic code structure  2.x Axis data ：['1 month ','2 month ','3 month ','4 month ','5 month ','6 month ','7 month ','8 month ','9 month ','10 month ','11 month ','12 month '] 3.y Axis data ：[3000,2800,900,1000,800,700,1400,1300,900,1000,800,600] 4. take type Is set to bar --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="lib/echarts.min.js"></script> </head> <body> <div style="width: 600px;height: 400px;"></div> <script> var mCharts= echarts.init(document.querySelector('div')) var xDataArr=['1 month ','2 month ','3 month ','4 month ','5 month ','6 month ','7 month ','8 month ','9 month ','10 month ','11 month ','12 month '] var yDaraArr=[3000,2800,900,1000,800,700,1400,1300,900,1000,800,600] var option={
    
           
           xAxis:{
    
               type:'category'  ,// Taxonomic axis 
               data:xDataArr
               
           }, yAxis:{
    
               type:'value'  ,// Value axis 
              
           }, series:[
               {
    
                   name:' a brand of instant noodles ', type:'line', //bar It's a histogram ,line It's linear ,pie It's pie shaped  data:yDaraArr, markPoint:{
    
                       data:[
                           {
    
                               type:'max'
                           },
                           {
    
                               type:'min'
                           }
                       ]
                   }, markLine:{
    
                       data:[
                           {
    
                               type:'average'
                           }
                       ]
                   }, markArea:{
    
                       data:[ [
                               {
    
                                   xAxis:'1 month '
                                },
                               {
    
                                   xAxis:'2 month '
                               }
                           ],[
                               {
    
                                   xAxis:'7 month '
                               },{
    
                                   xAxis:'8 month '
                               }
                           ]
                       ]
                   }, smooth:true , // smooth  lineStyle:{
    
                       color:'blue',
                       type:'solid'     //dashed dotted solid
                   }, areaStyle:{
    
                       color:'pink'
                   }
                }
           ]
        }
        // step 5： Set the configuration item to echarts Instance object   
        mCharts.setOption(option) 
     </script>

</body>
</html>
原网站

版权声明
本文为[Just love life]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202130548221896.html

边栏推荐

猜你喜欢

随机推荐