美文网首页
Echarts学习笔记

Echarts学习笔记

作者: hasu | 来源:发表于2017-05-28 11:56 被阅读150次

    因为最近做毕设,需要爬取数据并将数据进行分析可视化。同学推荐说echarts挺不错的,所以就试试,果然,官网上有很多例子可供使用,echarts gallery上有相应的图形对应的代码,复制即可使用。但是,我按照官网的说法引入包的时候,

    很多图例都不能显示出来,或者能显示整体图,但是一些细节总是隐藏了,试了很多种,结果最后发现了一种引入方法,挺好使的。

    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
    

    在这里有个模板,只要复制echarts gallery上的代码插入到其中的位置就行。

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
        <title></title>
        <meta charset="gbk" />
        <link rel="stylesheet" href="style/style.css">
        <script src="js/echarts.common.min.js"></script>   
        <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="main" style="width: 1000px;height:600px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
    ----------------------------------------------------------------------------------------
    ..................................插入代码位置...........................
    ----------------------------------------------------------------------------------------
    // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:Echarts学习笔记

          本文链接:https://www.haomeiwen.com/subject/xwacfxtx.html