new Files

front/public/code/EChart.vue

@@ -0,0 +1,153 @@
+<template>
+  <h2>echarts 代码参考 https://echarts.apache.org/examples/zh/index.html</h2>
+  <el-row>
+    <el-button-group>
+      <el-button plain type="primary" @click="addSvgEChart()">添加图表(SVG)</el-button>
+      <el-button plain type="primary" @click="addCanvasEChart()">添加图表(Canvas)</el-button>
+    </el-button-group>
+  </el-row>
+  <Source src="/code/EChart.vue"></Source>
+  <Editor doc="https://www.x-emr.cn/doc/asdf1.html" @load="onLoad" style="margin: 10px 0;"></Editor>
+</template>
+
+
+<script setup>
+import * as echarts from 'echarts';
+
+let editor = null
+//加载编辑器
+const onLoad = (e) => {
+     editor =  e.target.contentWindow.editor
+}
+
+//添加图表
+const addSvgEChart = function () {
+  var _body = editor.document.getElementById('_body')
+  let chartDom = editor.document.createElement('div')
+  chartDom.style.width = '100%'
+  chartDom.style.height = '500px'
+  _body.appendChild(chartDom)
+
+  var myChart = echarts.init(chartDom, null, { renderer: 'svg' });
+  var option = {
+    title: {
+      text: 'Referer of a Website',
+      subtext: 'Fake Data',
+      left: 'center'
+    },
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      orient: 'vertical',
+      left: 'left'
+    },
+    series: [
+      {
+        name: 'Access From',
+        type: 'pie',
+        radius: '50%',
+        data: [
+          { value: 1048, name: 'Search Engine' },
+          { value: 735, name: 'Direct' },
+          { value: 580, name: 'Email' },
+          { value: 484, name: 'Union Ads' },
+          { value: 300, name: 'Video Ads' }
+        ],
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          }
+        }
+      }
+    ]
+  };
+
+  option && myChart.setOption(option);
+}
+
+//添加图表
+const addCanvasEChart = function () {
+  var _body = editor.document.getElementById('_body')
+  let chartDom = editor.document.createElement('div')
+  chartDom.style.width = '100%'
+  chartDom.style.height = '500px'
+  _body.appendChild(chartDom)
+
+  var myChart = echarts.init(chartDom, null, { renderer: 'canvas' });
+  var option = {
+    title: {
+      text: 'Rainfall vs Evaporation',
+      subtext: 'Fake Data'
+    },
+    tooltip: {
+      trigger: 'axis'
+    },
+    legend: {
+      data: ['Rainfall', 'Evaporation']
+    },
+    toolbox: {
+      show: true,
+      feature: {
+        dataView: { show: true, readOnly: false },
+        magicType: { show: true, type: ['line', 'bar'] },
+        restore: { show: true },
+        saveAsImage: { show: true }
+      }
+    },
+    calculable: true,
+    xAxis: [
+      {
+        type: 'category',
+        // prettier-ignore
+        data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value'
+      }
+    ],
+    series: [
+      {
+        name: 'Rainfall',
+        type: 'bar',
+        data: [
+          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
+        ],
+        markPoint: {
+          data: [
+            { type: 'max', name: 'Max' },
+            { type: 'min', name: 'Min' }
+          ]
+        },
+        markLine: {
+          data: [{ type: 'average', name: 'Avg' }]
+        }
+      },
+      {
+        name: 'Evaporation',
+        type: 'bar',
+        data: [
+          2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+        ],
+        markPoint: {
+          data: [
+            { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
+            { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
+          ]
+        },
+        markLine: {
+          data: [{ type: 'average', name: 'Avg' }]
+        }
+      }
+    ]
+  };
+
+
+  option && myChart.setOption(option);
+}
+
+</script>