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

General configuration title

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

General configuration 

  General configuration refers to the configuration that can be used by any chart .
  title ：title
 （1） Writing style   textStyle
 （2） Title border   boderWidth、borderColor 、boderRadius
 （3） Title Position   left、top、right、bottom

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 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
            }, 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/202202130548222101.html

边栏推荐

猜你喜欢

随机推荐