当前位置：网站首页>General configuration toolbox

General configuration toolbox

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

toolbox:ECharts Toolbar provided
toolbox Configure in option Subelement
Show toolbar buttons feature
Built in export picture saveAsImage, Data view dataView, Dynamic type switching magicType, Data area scaling dataZoom, Reset restore Five tools
Insert picture description here
Insert picture description here
Insert picture description here
Insert picture description here
Insert picture description here 

 <!-- 1.ECharts The most basic code structure  2.x Axis data ：[' Zhang San ',‘ Li Si ’,‘ Wang Wu ’,‘ Intercalary soil ’,‘ Xiao Ming ’,‘ maotai ’,‘ Er Niu ’,‘ Daqiang ’] 3.y Axis data ：[88,92,63,77,94,80,72,86] 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=[' Zhang San ',' Li Si ',' Wang Wu ',' Intercalary soil ',' Xiao Ming ',' maotai ',' Er Niu ',' Daqiang '] var yDaraArr=[70,92,85,89,77,90,87,98] var option={
    
            title:{
    
                text:' Results show ', textStyle:{
    
                    color:'blue'
                },
                borderWidth:5,
                borderColor:'blue',
                borderRadius:5,
                left:30,
                top:10
            }, tooltip:{
    
                trigger:'axis', triggerOn:'click', // formatter:'{b} The results of {c}' formatter:function(arg){
    
                   
                    return arg[0].name+' My score is '+arg[0].data
                }
            }, toolbox:{
    
                feature:{
    
                    saveAsImage:{
    },// Export pictures  dataView:{
    }, // Data view  restore:{
    } , // Data reset （ Restore ） dataZoom:{
    }, // Area zoom  magicType:{
    // Chart switching 
                        type:['bar','line']
                    }  
                }
            }, xAxis:{
    
               type:'category'  ,// Taxonomic axis 
               data:xDataArr
               
           }, yAxis:{
    
               type:'value'  ,// Value axis 
              
           }, series:[
               {
    
                   name:' Chinese language and literature ', type:'bar', //bar It's a histogram ,line It's linear ,pie It's pie shaped  markPoint:{
       
                       data:[
                         {
    
                             type:'max',name:' Maximum '
                         },{
    
                           type:'min',name:' minimum value '
                         }
                      ]
                    }, markLine:{
    
                       data:[
                           {
    
                               type:'average',name:' Average '
                           }
                       ]
                    }, label:{
    
                       show: true,
                       position:'top'
                    },

                       
                    barWidth:'30%',
                   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/202202130548222029.html

边栏推荐

猜你喜欢

随机推荐