当前位置：网站首页>Generic configuration legend

Generic configuration legend

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

legend: legend , Used to filter series , Need and series In combination with
legend Medium data Is an array
legend Medium data The value of needs and series Of a set of data in an array name Value consistent
Insert picture description here
Code 

 <!-- 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 yDaraArr1=[70,92,85,89,77,90,87,98] var yDaraArr2=[76,82,85,89,79,90,80,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']
                    }  
                }
            }, legend:{
    
                data:[' Chinese language and literature ',' mathematics ']
            }, 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 
                   data:yDaraArr1
               },
               {
    
                   name:' mathematics ',
                   type:'bar',
                   data:yDaraArr2
               }
           ]
        }
        // step 5： Set the configuration item to echarts Instance object   
        mCharts.setOption(option) 
     </script>

</body>
</html>

General configuration refers to the configuration that can be used by any type of chart .

原网站

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

边栏推荐

猜你喜欢

随机推荐