#依赖引入
yarn add axios
yarn add vue-codemirror
yarn add echarts
页面模块
<codemirror ref="mycode" v-model="jsonData" :options="cmOptions" class="code"></codemirror>
components: { codemirror },
import axios from "axios";
import { codemirror } from "vue-codemirror";
import "codemirror/theme/cobalt.css"; // 这里引入的是主题样式,根据设置的theme的主题引入
require("codemirror/mode/javascript/javascript"); // 这里引入的模式的js,根据设置的mode引入
import "codemirror/addon/selection/active-line"; //光标行背景高亮,配置里面也需要styleActiveLine设置为true
// 折叠
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/foldcode";
import "codemirror/addon/fold/foldgutter";
import "codemirror/addon/fold/brace-fold";
import "codemirror/addon/fold/comment-fold";
//下面这几个引入的主要是验证提示类的,配置里的lint需要设置true,gutters: ['CodeMirror-lint-markers']
//如果需要验证 json 的话
import "codemirror/addon/lint/lint";
import "codemirror/addon/lint/lint.css";
import "codemirror/addon/lint/json-lint";
import "codemirror/addon/display/autorefresh"; //及时自动更新,配置里面也需要设置autoRefresh为true
相关属性
data() {
return {
jsonData: "",
myChart: null,
cmOptions: {
mode: "text/javascript",
theme: "cobalt",
lineNumbers: true, //显示行号
foldGutter: true, //代码折叠
// lineWrapping: true,
styleActiveLine: true, //光标行背景高亮
autorefresh: true, //及时自动更新
lint: true, //json检查
gutters: [
"CodeMirror-linenumbers", //显示行号
"CodeMirror-foldgutter", //代码折叠
"CodeMirror-lint-markers" //json检查
]
// readOnly: true
},
};
},
computed: {
codemirror() {//编辑器实例
return this.$refs.mycode.codemirror;
},
moduleSrc() {//获取echarts js 代码
return `/data/${this.$route.params.module}.js`;
}
},
methods: {
init() {
var _this = this;
//获取 js 代码内容 拿到的是字符串 “option={xxx}” 这种
axios.get(this.moduleSrc).then(response => {
_this.jsonData = response.data;
_this.codemirror.setValue(_this.jsonData);
var option=(new Function("return " + _this.jsonData))();//把字符串对象化
_this.myChart.clear();
_this.myChart.setOption(option, true);
});
}
}
};