使用echarts图练习(一）_html-js-css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div  id='aa' style="width: 600px; height: 400px;">
    </div>
    <div id='bb' style="width: 600px; height: 400px;">
    </div>
    <script src="js/echarts.js"></script>
    <script>
        var myecharts=echarts.init(document.querySelector('#aa'))
        var xDataArr=['张三','李四','王五','闰土','猪小明','蘑菇头','王炸']
        var yDateArr=[67,43,55,77,22,88,55,77]
        var option={
            title:{
                text:'语文成绩表'
            },
           
            xAxis:{
                type:'value',             
            },
            tooltip:{
                trigger:'item'
            },
            yAxis:{
                type:'category',
                data:xDataArr
            },
            label:{
                show:true,
                // color:greenyellow
            },
            barWidth:'30%',
            series:[
                {
                    name:'语文',
                    type:'bar',
                    data:yDateArr,
                    markPoint:{
                        data:[
                            {
                                type: 'max',name:'最大值'
                            },{
                                type:'min',name:'最小值'
                            }
                        ]
                    },
                    markLine:{
                      data:[
                          {
                              type:'average',name:'平均值'
                          }
                      ]  
                    },

                
                }
            ]
        };
        myecharts.setOption(option)
    </script>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
原文地址: https://outofmemory.cn/web/1297466.html
使用echarts图练习(一）

发表评论

评论列表（0条）
