ECharts(1)-5分钟上手ECharts

最新推荐文章于 2022-09-23 17:54:37 发布

LJ·START

最新推荐文章于 2022-09-23 17:54:37 发布

阅读量171

点赞数

文章标签： echarts html5 html css

本文链接：https://blog.csdn.net/weixin_44790446/article/details/115250207

版权

本文将引导读者在5分钟内了解并动手使用ECharts，通过简单的HTML、CSS和JavaScript代码实现数据可视化。从基本配置到图表类型，一步步展示ECharts的易用性和强大功能。

摘要由CSDN通过智能技术生成

入门示例-柱状统计图

<!--加载js文件-->
<script src="js/echarts.min.js"></script>

<body>
    <!--创建容器-->
    <div id="main" style="width:800px;height:600px;"></div>
</body>

<body>
    <!--通过js创建图形-->
    <script>
        /*获取容器main对象*/
        var main=document.getElementById('main');
        /*依据main对象来创建echart对象*/
        var mychart=echarts.init(main);
        /*创建配置选项 option*/
        var option={
            title:{text:"入门示例-柱状统计图"},
            xAxis:{data:["衬衫","裤子","鞋","雪纺衫"]},
            yAxis:{},
            series:[
                {type:"bar",data: [100,100,1,10]},
                {type: "line",data:[100,100,1,10]}
            ]
        };
        /*将配置选项添加echarts对象即可*/
        mychart.setOption(option);
    </script>
</body>