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   width: 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   width: 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="width: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="width: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>
 posted on 2020-11-24 14:53  楼顶铁板烧  阅读(182)  评论(0)  编辑  收藏  举报