数据可视化初学案例

首先在echarts官方下载echarts.js

echarts是一个开源的数据分析的js

echarts首个条形图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Echarts</title>
        <!--引入 echarts。js-->
        <script src="js/echarts.js"></script>
    </head>
    <body>
        <div id="main" style="width: 600px;height: 400px;"></div>
        <script type="text/javascript">
            var myChart = echarts.init(document.getElementById("main"))
            
            var option = {
                title:{
                    text:'Echarts 入门示例'
                },
                
                legend:{
                    data:['销量']
                },
                xAxis:{
                    data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis:{},
                
                series:[{
                    name:"销量",
                    type:'bar',
                    data:[5,20,36,10,10,20]
                }]
            };
            myChart.setOption(option)
        </script>
    </body>
</html>

运行结果

posted on 2021-05-26 11:05 温醉酒一壶阅读(128) 评论(0) 收藏举报