我试图在 obsidian 中使用更加丰富的 Echart 图表用来记录，但是我试了一些方法之后并没有达到我想要的预期，所有想求助一下我应该如何在obsidian中使用echar.js，在 js 代码方面我是完全的新手
遇到的问题
无法导入 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
预期的效果
- Step 1： 引入 Javascript；
- Step 2 ：使用
Dataview或者JS Engine进行调用； - 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);
