当前位置：网站首页>Basic realization of line graph

Basic realization of line graph

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

Implementation steps

ECharts The most basic code structure ：
introduce js file ,DOM Containers , Initialize object , Set up option
x Axis data ：
data 1：[‘1 month ’,‘2 month ’,‘3 month ’,‘4 month ’,‘5 month ’,‘6 month ’,‘7 month ’,‘8 month ’,‘9 month ’,‘10 month ’,‘11 month ’,‘12 month ’]
y Axis data ：
data 2：[3000,2800,900,1000,800,700,1400,1300,900,1000,800,600]
Chart type ：
stay series Lower setup type:line
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
               }
           ]
        }
        // step 5： Set the configuration item to echarts Instance object   
        mCharts.setOption(option) 
     </script>

</body>
</html>
原网站

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

边栏推荐

猜你喜欢

随机推荐