简单记录下 利用 vue-codemirror 实现 echarts 代码编辑


#依赖引入

1
2
3
yarn add axios
yarn add vue-codemirror
yarn add echarts

页面模块

1
2
<codemirror ref="mycode" v-model="jsonData" :options="cmOptions" class="code"></codemirror>
components: { codemirror },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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

相关属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  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
      },
    };
  },
1
2
3
4
5
6
7
8
  computed: {
    codemirror() {//编辑器实例
      return this.$refs.mycode.codemirror;
    },
    moduleSrc() {//获取echarts js 代码
      return `/data/${this.$route.params.module}.js`;
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  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);
      });
    }
  }
};