• 关于echarts 报错 初始化对象未定义


    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="../js/skin1/build/dist/echarts.js" charset="UTF-8"></script>
    </head>
    <body>
        
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="main" style=" 600px;height:400px;"></div>
        <script type="text/javascript">
                // 基于准备好的dom,初始化echarts实例
                var myChart = ec.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);
        </script>
    

     

    以上代码会报如下错误:

    我们可以按如下步骤操作:

    1. 配置图表路径
    2. 加载图表js文件
    3. 绘制图表

        

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="../js/skin1/build/dist/echarts.js" charset="UTF-8"></script>
    </head>
    <body>
        
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="main" style=" 600px;height:400px;"></div>
        <script type="text/javascript">
    
            require.config({
                paths: {
                    echarts: '../js/skin1/build/dist'
                }
            }
    
            );
            require(
                [
                    'echarts',
    'echarts/chart/bar', 'echarts/chart/line' ], DrawEChart //异步加载的回调函数绘制图表 ); function DrawEChart(ec) { // 基于准备好的dom,初始化echarts实例 var myChart = ec.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); } </script> </body> </html>

      

  • 相关阅读:
    day 011总结
    day 010 总结
    day 10作业
    day 009总结
    day 008总结
    wireshark 解密tls消息
    js基础 数组slice
    js基础 数组splice
    js基础 Array.from
    js基础 Array.of
  • 原文地址:https://www.cnblogs.com/yigexiaojiangshi/p/8422759.html
Copyright © 2020-2023  润新知