ng-cli 中使用ace编辑器演示echarts

本文有两个Demo：直接上代码

一、ng-cli中使用步骤，在线版，待更新

1）在index.html文件中引入

<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript"charset="utf-8"></script>

2）xxx.ts

 1 declare const echarts;
 2 declare const ace;
 3 
 4   ngOnInit() {
 5 
 6     const editor = ace.edit("editor");
 7     editor.setTheme("ace/theme/twilight");
 8     editor.session.setMode("ace/mode/javascript");
 9     editor.setOptions({
10       enableBasicAutocompletion: true,
11       enableSnippets: true,
12       enableLiveAutocompletion: true
13     });
14   }

3)xxx.html

1   <div class="left-part">
2     <div class="btn-wrap">
3         <button id="submit">运行</button>
4     </div>
5     <pre id="editor"></pre>
6   </div>

4)xxx.scss

 1 .left-part {
 2   height: 100%;
 3    100%;
 4   z-index: 1;
 5   position: relative;
 6 }
 7 
 8 .btn-wrap {
 9   position: absolute;
10   top: 0;
11   right:3px;
12   z-index: 1;
13 }
14 
15 #editor {
16   height: 100%;
17    100%;
18   border-right: 3px solid #ccc;
19 }

二、jsDemo,可直接拿到本地运行（注意：本地需要lodash.js文件，直接去官网下载）

  1 <head>
  2     <meta charset="UTF-8">
  3     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  5     <title>Document</title>
  6     <style>
  7         .left-part {
  8             position: absolute;
  9             left: 0;
 10             top: 0;
 11             width: 40%;
 12             height: 100%;
 13             z-index: 1;
 14         }
 15 
 16         .btn-wrap {
 17             background: #f3f3f3;
 18             text-align: right;
 19             position: relative;
 20             z-index: 1;
 21             box-shadow: 0 5px 10px #e8e3e3;
 22         }
 23 
 24         .right-part {
 25             position: absolute;
 26             right: 0;
 27             top: 0;
 28             background: #f3f3f3 !important;
 29             width: 60%;
 30             height: 100%;
 31         }
 32 
 33         #editor {
 34             margin: 0;
 35             height: 100%;
 36             width: 100%;
 37             border-right: 1px solid #ddd;
 38         }
 39     </style>
 40 </head>
 41 
 42 <body>
 43     <div class="left-part">
 44         <div class="btn-wrap">
 45             <button id="submit">运行</button>
 46         </div>
 47         <pre id="editor"></pre>
 48     </div>
 49     <div class="right-part">
 50         <div id="main" style="100%;height:400px;"></div>
 51     </div>
 52     <!-- <script src="https://www.jq22.com/jquery/jquery-2.1.1.js"></script> -->
 53     <script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
 54     <script type="text/javascript" src='lodash.js'></script>
 55     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript"
 56         charset="utf-8"></script>
 57 
 58     <script>
 59         var editor = ace.edit("editor");
 60         //editor.setTheme("ace/theme/twilight");
 61         editor.session.setMode("ace/mode/javascript");
 62         editor.setOptions({
 63             enableBasicAutocompletion: true,
 64             enableSnippets: true,
 65             enableLiveAutocompletion: true
 66         });
 67         var runDebounce = _.debounce(function () {
 68             if (!hasEditorError()) {
 69                 changeChart()
 70             }
 71         }, 500, {
 72                 trailing: true
 73             });
 74 
 75         // 编辑器上的内容改变时触发
 76         editor.on('change', function () {
 77             runDebounce()
 78         });
 79         // 请求js配置项
 80         $.ajax('1.js', {
 81             dataType: 'text',
 82             success: function (data) {
 83                 editor.setValue(data, -1);
 84             }
 85         }).fail(function () {
 86             console.log('加载图表失败！');
 87         });
 88         // 判断是否编辑器有误
 89         function hasEditorError() {
 90             var annotations = editor.getSession().getAnnotations();
 91             for (var aid = 0, alen = annotations.length; aid < alen; ++aid) {
 92                 if (annotations[aid].type === 'error') {
 93                     return true;
 94                 }
 95             }
 96             return false;
 97         }
 98         // 更改图表
 99         function changeChart() {
100             try {
101                 var option;
102                 eval(editor.getValue())
103                 var myChart = echarts.init(document.getElementById('main'));
104                 myChart.setOption(option);
105             } catch (e) {
106                 console.log('编辑有误')
107             }
108 
109         }
110         var submit = document.querySelector('#submit');
111         submit.addEventListener('click', function () {
112             changeChart()
113         })
114     </script>
115 </body>

View Code

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.left-part {
position: absolute;
left: 0;
top: 0;
width: 40%;
height: 100%;
z-index: 1;
}

        .btn-wrap {
            background: #f3f3f3;
            text-align: right;
            position: relative;
            z-index: 1;
            box-shadow: 0 5px 10px #e8e3e3;
        }

        .right-part {
            position: absolute;
            right: 0;
            top: 0;
            background: #f3f3f3 !important;
            width: 60%;
            height: 100%;
        }

        #editor {
            margin: 0;
            height: 100%;
            width: 100%;
            border-right: 1px solid #ddd;
        }
    </style>
</head>

<body>
    <div class="left-part">
        <div class="btn-wrap">
            <button id="submit">运行</button>
        </div>
        <pre id="editor"></pre>
    </div>
    <div class="right-part">
        <div id="main" style="100%;height:400px;"></div>
    </div>
    <!-- <script src="https://www.jq22.com/jquery/jquery-2.1.1.js"></script> -->
    <script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
    <script type="text/javascript" src='lodash.js'></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript"
        charset="utf-8"></script>

    <script>
        var editor = ace.edit("editor");
        //editor.setTheme("ace/theme/twilight");
        editor.session.setMode("ace/mode/javascript");
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });
        var runDebounce = _.debounce(function () {
            if (!hasEditorError()) {
                changeChart()
            }
        }, 500, {
                trailing: true
            });

        // 编辑器上的内容改变时触发
        editor.on('change', function () {
            runDebounce()
        });
        // 请求js配置项
        $.ajax('1.js', {
            dataType: 'text',
            success: function (data) {
                editor.setValue(data, -1);
            }
        }).fail(function () {
            console.log('加载图表失败！');
        });
        // 判断是否编辑器有误
        function hasEditorError() {
            var annotations = editor.getSession().getAnnotations();
            for (var aid = 0, alen = annotations.length; aid < alen; ++aid) {
                if (annotations[aid].type === 'error') {
                    return true;
                }
            }
            return false;
        }
        // 更改图表
        function changeChart() {
            try {
                var option;
                eval(editor.getValue())
                var myChart = echarts.init(document.getElementById('main'));
                myChart.setOption(option);
            } catch (e) {
                console.log('编辑有误')
            }

        }
        var submit = document.querySelector('#submit');
        submit.addEventListener('click', function () {
            changeChart()
        })
    </script>
</body>

相关阅读:
让自己的网站或博客被百度收录的小技巧
 Linux cp一个文件夹时提示cp: omitting directory `test/'
svn checkout 提示“由于连接方在一段时间后没有正确答复或连接的主机没有反应，连接尝试失败。”解决方法
 Linux iptables开放特定端口
 CentOS7使用iptables防火墙开放端口
 Linux平台的SVN服务器的配置及搭建
 官网svn提交到代码库，但是不能同步到web目录
 【LINUX】SVN 代码提交之后。同步到web目录下
 React Native For Android 架构初探
 腾讯QQ会员技术团队：以手机QQ会员H5加速为例，为你揭开sonic技术内幕
原文地址：https://www.cnblogs.com/a1-top/p/14030302.html