zoukankan      html  css  js  c++  java
  • Echart示例

    echart.html:  需要注意js文件加载的顺序

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Echarts</title>
    <!--     <link rel="stylesheet" href="css/index.css">
        <link rel="stylesheet" href="css/head.css"> -->
        <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="js/echarts/echarts.js"></script>
        <script type="text/javascript" src="js/test01.js"></script>
    </head>
    
    <body>
        <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
        <div id="main" style=" 600px;height:200px;"></div>
    </body>
    </html>

    test.js: 需要注意在function(){}()里面加一个jquery的 $(function(){},为的是HTML的DOM加载完毕,否则会报以下错误

    Uncaught Error: Initialize failed: invalid dom.

    test=function () {
        $(function() {
             // 基于准备好的dom,初始化echarts实例
             
            var myChart = echarts.init(document.getElementById('main'));
    
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };
    
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        });
        //alert("test");
        
    }();
  • 相关阅读:
    图(个人复习专用)
    树(复习用)
    由后序遍历与中序遍历确定前序遍历
    网络流问题
    无向图的结合点
    有向图的强连通分量
    最短路径Shortest Path algorithm
    【转】Vector与ArrayList区别
    Java中compareto的用法。
    Java中的Integer和int等包装类和基本数据类型简单比较
  • 原文地址:https://www.cnblogs.com/ys-wuhan/p/6403815.html
Copyright © 2011-2022 走看看