当前位置：网站首页>Basic realization of line chart (II)

Basic realization of line chart (II)

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

11.7 In the version updated on the th ,y Axis is not displayed by default , Just add the following

Insert picture description here
Fill the style areaStyle
Next to the edge boundaryGap
Insert picture description here
The zoom ： Out of the 0 Value ratio
scale:true
If the data is close , Big numbers , The line chart will show a straight line , Out of the 0 Value proportion can solve this problem
Insert picture description here
Insert picture description here
If you want to show several different data in a chart , As long as Series Add objects under the array
Insert picture description here
Stacking effect ：
stack
Pictured above , Because the two line charts are based on 0 For reference , So there will be cross phenomenon , If the second graph is drawn on the basis of the first graph, it will not cross .
stay series Inside stack As long as the two values remain the same , Then the second one will be drawn on the basis of the first one , No cross .

Insert picture description here
add areaStyle, The effect is more obvious
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 yDaraArr1=[3000,2200,3004,2706,1008,2001,4002,4506,3903,3601,2501,3807] var yDaraArr2=[2000,4025,3058,3806,2728,3821,3432,3856,3323,3021,3501,3837] var option={
    
                
                xAxis:{
    
                    type:'category'  ,// Taxonomic axis 
                    data:xDataArr,
                    boundaryGap:false
                    
                }, yAxis:{
    
                   type:'value', scale:true, axisLine:{
    
                       show:true
                   }
                }, series:[
                    {
    
                        name:' a brand of instant noodles ', type:'line', //bar It's a histogram ,line It's linear ,pie It's pie shaped  data:yDaraArr1, stack:'all', areaStyle:{
    }
                    },{
    
                        neme:' Unified ', type:'line', data:yDaraArr2, stack:'all', areaStyle:{
    }
                    }
                ]
             }
             // step 5： Set the configuration item to echarts Instance object   
             mCharts.setOption(option) 
          </script>
     
     </body>
     </html>
原网站

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

边栏推荐

猜你喜欢

随机推荐