当前位置：网站首页>Basic implementation of pie chart

Basic implementation of pie chart

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

Insert picture description here
Implementation steps
ECharts The most basic code structure ：
introduce js file ,DOM Containers , Initialize object , Set up option
Data preparation ：[{name:??,value:??},{},{}]
TaoBao ：12111 JD.COM ：23322 Vipshop ：33223 Jumei.com ：67899 1 Number point ：1223
take type Is set to type
Insert picture description here
Insert picture description here 

 <!-- ECharts The most basic code structure ： 1. introduce js file ,DOM Containers , Initialize object , Set up option 2. Data preparation ：[{
    name:??,value:??},{
    },{
    }] 3. TaoBao ：12111  JD.COM ：23322  Vipshop ：33223  Jumei.com ：67899 1 Number point ：1223 4. take type Is set to type --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!--  step 1： introduce echarts.js file  --> <script src="lib/echarts.min.js"></script> </head> <body> <!--  step 2： Prepare a box to present the chart  --> <div style="width: 600px;height: 400px;"></div> <script> //  step 3： initialization echarts Instance object  // Parameters ,dom, Decide where the icon will eventually appear  var mCharts= echarts.init(document.querySelector('div')) // step 4： Prepare the data   TaoBao ：12111  JD.COM ：23322  Vipshop ：33223  Jumei.com ：67899 1 Number point ：1223 var pieData=[
            {
    
                name:' TaoBao ',
                value:12111 

            },
            {
    
                name:' JD.COM ',
                value :23322
            },
            {
    
                name:' Vipshop ',
                value:33223 
            },
            {
    
                name:' Jumei.com ',
                value:67899 
            },
            {
    
                name:'1 Shop No. ',
                value:1223
            }
        ] // step 5： Prepare configuration items  var option={
    
            
           series:[
               {
    
                   name:' shopping ',
                   type:'pie',   //bar It's a histogram ,line It's linear ,pie It's pie shaped 
                   data:pieData
               }
           ]
        }
        // step 5： Set the configuration item to echarts Instance object   
        mCharts.setOption(option) 
     </script>
</body>
</html>
原网站

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

边栏推荐

猜你喜欢

随机推荐