Dataview结合echart.js的问题

疑问解答
1

我试图在 obsidian 中使用更加丰富的 Echart 图表用来记录，但是我试了一些方法之后并没有达到我想要的预期，所有想求助一下我应该如何在obsidian中使用echar.js，在 js 代码方面我是完全的新手:sob::sob::sob:

遇到的问题

无法导入 echart.js 并调用其在obsidian中画图

SYSTEM INFO:
	Obsidian version: v1.7.7
	Installer version: v1.7.7
	Operating system: Windows 11
	Login status: not logged in
	Language: zh
	Plugins installed: 18
	Plugins enabled: 11
		1:  JS Engine v0.1.20
		2:  Dataview v0.5.67
		3:  obsidian echarts v0.0.3
		4:  Modules v2.4.4
		5:  Fix Require Modules v6.1.0
		6:  CustomJS v1.0.21

预期的效果

  1. Step 1： 引入 Javascript；
  2. Step 2 ：使用 Dataview 或者 JS Engine 进行调用；
  3. Step 3： 绘制 Echart

引入 JS

在我进行了一些资料查找后，以下三款社区插件有进行尝试，但是并未生效，我觉得我用他们的出发点本身就不对（或许）
但是老实说，我并不知道我应该怎么引入，但参见下面一节的内容后，我选择了 await import("https://fastly.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"); 的引入方法；

  • Modules
  • Fix Require Modules
  • CustomJS

调用 Js

常见的是使用 Dataview 进行调用，但是似乎 JS Engine 也能进行调用；但是我也没看懂，如果大佬们有相关经验，也请告诉我；

已尝试的解决方案

尝试了怎样的解决方法，为什么行不通等等。

我参考了此篇blog，进行了一些尝试 Dataview结合char.js的问题 - 疑问解答 - Obsidian 中文论坛 ，以下是可以执行的代码，但当我试图将其替换成 EchartJs 的时候他并没有生效；

~~~dataviewjs
const ctx = dv.el("div");

// 导入 Chart.js
await import("https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.umd.js");

// 创建环形图
const echartContainer = document.createElement("div");
echartContainer.style.width = "50%"; // 设置容器宽度
echartContainer.style.margin = "0 auto"; // 中心对齐
echartContainer.style.position = "relative"; // 相对定位
ctx.appendChild(echartContainer); // 将容器添加到 ctx

const echartCanvas = echartContainer.appendChild(document.createElement("canvas"));

const data = {
    labels: [
      'Red',
      'Blue',
      'Yellow'
    ],
    datasets: [{
      label: 'My First Dataset',
      data: [300, 50, 100],
      backgroundColor: [
        'rgb(255, 99, 132)',
        'rgb(54, 162, 235)',
        'rgb(255, 205, 86)'
      ],
      hoverOffset: 4
    }]
  };

const echartConfig = {
    type: 'doughnut',
    data: data,
};
new Chart(echartCanvas.getContext("2d"), echartConfig);
~~~

以下是我改为导入echart的代码，他没有报错，但是也没有显示；

var echartDom = dv.el("div");

// 导入 eChart.js
await import("https://fastly.jsdelivr.net/npm/[email protected]/dist/echarts.min.js");

// 创建容器
const echartContainer = document.createElement("div");
echartContainer.style.width = "50%"; // 设置容器宽度
echartContainer.style.margin = "0 auto"; // 中心对齐
echartContainer.style.position = "relative"; // 相对定位
echartDom.appendChild(echartContainer); // 将容器添加到 ctx

const echartCanvas = echartContainer.appendChild(document.createElement("canvas"));

var myChart = echarts.init(echartDom, null, {
    renderer: 'canvas',
    useDirtyRect: false
  });
var option;

option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
      }
    ]
  };


myChart.setOption(option);