效果图

先引入jQuery、echarts和ace.js

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/ace/test/ace.js"></script>

在页面中放入ace代码编辑器

<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>

获取编辑器

var editor = ace.edit("editor");

更改语言模式

editor.session.setMode("ace/mode/javascript");

使用setOptions方法一次性设置多个选项

editor.setOptions({enableBasicAutocompletion: true, //启用基本自动完成enableSnippets: true, //启用代码段enableLiveAutocompletion: true, // 启用实时自动完成wrap: true, //开启换行});

设置默认显示的图表

与echart官网示例一样（略）

获取到图表配置信息的options字符串

function getChartOptionsStr(el,option){let str// 将传入的option对象转为字符串,第三个参数2表示字符串缩进2个空格option = JSON.stringify(option,null,2)str = `option = ${option};`return str
}

与echart官网图表在线配置编辑器一样，编辑器内容显示当前图表的配置信息，这时候就要为ace’编辑器设置内容

// editor.setValue()第一个参数为内容，第二个参数控制光标位置 1为末尾,-1为首行,不设置的话则为全选
editor.setValue(getChartOptionsStr('main',option),1)

在编辑器中修改完代码后点击运行按钮后重新渲染图表

var submit = document.querySelector('#submit');
submit.addEventListener('click', function () {// 获取编辑器里的配置代码var script = editor.getValue()var myChart = echarts.init(document.getElementById('main'));// 更改图表前先清空当前图表myChart.clear()// 更新图表changeChart(script)
})

更新图表方法

// 更改图表
function changeChart(script) {try {let func = new Function(`var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';var option;var myChart = echarts.init(document.getElementById('main'));` + script + `myChart.setOption(option);`)func()} catch (e) {console.log('编辑有误')}}

用aceEditor和new Function制作简单的echarts编辑器相关推荐

python制作图片编辑器_Tkinter制作简单的python编辑器
想要制作简单的python脚本编辑器,其中文字输入代码部分使用Tkinter中的Text控件即可实现. 但是问题是,如何实现高亮呢?参考python自带的编辑器:python27/vidle文件夹中的 ...
用Vue实现简单的echarts在线编辑器
用Vue实现简单的echarts在线编辑器简述思路效果图页面分布 main.js的配置其中ace编辑器的配置按钮功能实现思路具体实现图表初始化图表组件传给父组件option配置对象 ...
使用matlab建立个人简历,HTML 使用表格制作简单的个人简历
复习一下HTML,用表格做一个简单的个人简历 .btbg{ text-align:center; } 个人简历姓名性别出生日期照片民族政治面貌婚姻状况现所在地籍贯学历毕业学校专 ...
html根据字段制作曲线图,canvas制作简单的HTML图表，折线或者矩形统计(原创)
插件描述:canvas制作简单的HTML图表,折线或者矩形统计使用canvas制作简单的HTML图表,折线或者矩形统计. 使用canvas制作简单的HTML图表,折线或者矩形统计,简单而实用.图形由 ...
phalcon: eventManager事件管理（结合dispatcher调度控制器）制作简单的acl
制作简单的acl, dispatcher(专门用来加载或调度或跳转到相应的url地址即XXXcontroller的调度器或控制器,能够在controller执行前对controller进行停止跳转等) ...
php简单网页制作代码,用HTML和CSS以及JS制作简单的网页菜单界面的代码
这篇文章主要介绍了使用HTML+CSS+JS制作简单的网页菜单界面,这个ABROAD项目所使用的JavaScript部分代码非常简单,需要的朋友可以参考下写ABROAD项目用到了标签这个东东,其实标 ...
d3.js-V3制作简单的飞线图
d3.js制作简单的飞线图简介期末的一个小作业,放上来分享一下.若有不懂的地方欢迎在评论区提问~ 最终效果图: 使用工具 d3.js (V3版本) 步骤简介准备好数据. 绘制一个中国地图. 绘制 ...
电脑PHP动画制作画板,html5教程制作简单画板代码分享
HTML5制作简单画板复制代码代码如下: http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">> ...
电脑PHP动画制作画板,HTML_html5教程制作简单画板代码分享，HTML5制作简单画板复制代码代 - phpStudy...
html5教程制作简单画板代码分享 HTML5制作简单画板复制代码代码如下: http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min ...

用aceEditor和new Function制作简单的echarts编辑器

效果图

用aceEditor和new Function制作简单的echarts编辑器相关推荐

最新文章

热门文章