feat：新增通过文件读取图表配置

liuyonghua-cww · Sep 13, 2021 · 1cb1d3b · 1cb1d3b
1 parent fbdc442
commit 1cb1d3b
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 27 deletions.
diff --git a/learn-x6/package.json b/learn-x6/package.json
@@ -11,6 +11,7 @@
     "@antv/x6": "^1.26.0",
     "@antv/x6-vue-shape": "^1.2.9",
     "ant-design-vue": "^1.7.7",
+    "axios": "^0.21.4",
     "core-js": "^3.16.2",
     "deepmerge": "^4.2.2",
     "echarts": "^5.2.0",

diff --git a/learn-x6/public/echartsOption/line-chart.js b/learn-x6/public/echartsOption/line-chart.js
@@ -0,0 +1,84 @@
+lineChart = {
+    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'cross',
+            label: {
+                backgroundColor: '#6a7985'
+            }
+        }
+    },
+    legend: {
+        data: ['Line 1', 'Line 2']
+    },
+    grid: {
+        top: '10%',
+        left: '3%',
+        right: '4%',
+        bottom: '10%',
+        containLabel: true
+    },
+    xAxis: [
+        {
+            type: 'category',
+            boundaryGap: false,
+            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+        }
+    ],
+    yAxis: [
+        {
+            type: 'value'
+        }
+    ],
+    series: [
+        {
+            name: 'Line 1',
+            type: 'line',
+            stack: '总量',
+            smooth: true,
+            lineStyle: {
+                width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+                opacity: 0.8,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                    offset: 0,
+                    color: 'rgba(128, 255, 165)'
+                }, {
+                    offset: 1,
+                    color: 'rgba(1, 191, 236)'
+                }])
+            },
+            emphasis: {
+                focus: 'series'
+            },
+            data: [140, 232, 101, 264, 90, 340, 250]
+        },
+        {
+            name: 'Line 2',
+            type: 'line',
+            stack: '总量',
+            smooth: true,
+            lineStyle: {
+                width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+                opacity: 0.8,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                    offset: 0,
+                    color: 'rgba(0, 221, 255)'
+                }, {
+                    offset: 1,
+                    color: 'rgba(77, 119, 255)'
+                }])
+            },
+            emphasis: {
+                focus: 'series'
+            },
+            data: [120, 282, 111, 234, 220, 340, 310]
+        }
+    ]
+}
diff --git a/learn-x6/src/components/Echarts/index.vue b/learn-x6/src/components/Echarts/index.vue
@@ -6,7 +6,8 @@
 
 <script>
 import * as echarts from 'echarts';
-import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';
+window.echarts = echarts;
+import {SVGRenderer, CanvasRenderer} from 'echarts/renderers';
 
 echarts.use([SVGRenderer, CanvasRenderer]);
 
@@ -16,20 +17,16 @@ export default {
     created() {
         this.node = this.getNode();
         this.id = this.node.id;
-        this.chartOption = this.node.getData().chartOption
     },
     mounted() {
         this.$nextTick(() => {
-            // const chartDom = document.getElementById(this.id);
-            const myChart = echarts.init(this.$refs.chart, null, { renderer: 'svg' });
-            myChart.setOption(eval("(" + this.chartOption + ")"));
+            const myChart = echarts.init(this.$refs.chart, null, {renderer: 'svg'});
+            this.setOption(myChart);
             this.node.on('change:size', () => {
                 myChart.resize();
             });
             this.node.on('change:data', () => {
-               const data = this.node.getData().chartOption;
-                console.log(data);
-                myChart.setOption(data, { notMerge: true });
+                this.setOption(myChart);
             })
         })
     },
@@ -39,6 +36,16 @@ export default {
             id: null,
             chartOption: null
         }
+    },
+    methods: {
+        /**
+         *
+         * @param instance echarts 实例
+         */
+        setOption(instance) {
+            this.chartOption = this.node.getData().chartOption; // 获取配置
+            instance.setOption(eval("(" + this.chartOption + ")"), {notMerge: true}); // eval将字符串转换为对象
+        }
     }
 }
 </script>

diff --git a/learn-x6/src/components/Editor/MonacoEditor.vue b/learn-x6/src/components/Editor/MonacoEditor.vue
@@ -41,12 +41,12 @@ export default {
             this.$emit('setEditorVisible', false);
         },
         dataChange(v) {
+            // 实时更新数据
             this.contextmenuNode.updateData(
                     {
-                        chartOption: eval("(" + v + ")")
+                        chartOption: v
                     }
             );
-            console.log(this.contextmenuNode.getData().chartOption);
         },
         getCode() {
             this.code = this.contextmenuNode.getData().chartOption;

diff --git a/learn-x6/src/components/Stencil/index.vue b/learn-x6/src/components/Stencil/index.vue
@@ -23,7 +23,6 @@ import {
 } from "@/components/Stencil/shapes";
 import MoreShapes from './MoreShapes'
 import {shapes_type} from './MoreShapes/shapes'
-import * as echarts from "echarts";
 
 export default {
     name: "index",
@@ -450,19 +449,7 @@ export default {
                 height: 150,
                 component: "chart-node",
                 data: {
-                    chartOption: "{\n" +
-                            "    xAxis: {\n" +
-                            "        type: 'category',\n" +
-                            "        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n" +
-                            "    },\n" +
-                            "    yAxis: {\n" +
-                            "        type: 'value'\n" +
-                            "    },\n" +
-                            "    series: [{\n" +
-                            "        data: [150, 230, 224, 218, 135, 147, 260],\n" +
-                            "        type: 'line'\n" +
-                            "    }]\n" +
-                            "}"
+                    chartOption: window.lineChart
                 }
             });
             this.stencil.load([lineChart

diff --git a/learn-x6/src/main.js b/learn-x6/src/main.js
@@ -7,12 +7,13 @@ import './theme/index.less'
 import Antd from 'ant-design-vue';
 import './assets/styles/reset.less'
 import './assets/styles/animation.less'
+import '@/readFile/readFile'
 
 Vue.use(Antd);
 Vue.config.productionTip = false
 
 new Vue({
-  router,
-  store,
-  render: h => h(App)
+    router,
+    store,
+    render: h => h(App)
 }).$mount('#app')
diff --git a/learn-x6/src/readFile/readFile.js b/learn-x6/src/readFile/readFile.js
@@ -0,0 +1,6 @@
+import axios from 'axios'
+axios.get('echartsOption/line-chart.js').then(res => {
+    const arr = res.data.split('=')
+    console.log(arr);
+    window[arr[0].replace(/\t|\n|\s/g, '')] = arr[1]
+})