轻松记录您
灵感和创意

markdown preview enhanced 加载echart画图

使用 vscode 作为markdown 的主要编辑器

以 markdown preview enhanced 作为主要的预览工具,翻看文档, 发现它可以绘图,加载运行代码

文档中以Plotly 为 例子展示绘制的图像

plotly 的js 下载下来 有3M 太大了,以echart 作为绘图工具未尝不可, echart 压缩后的文件只有不到 800k ,很合适

1 打开配置

搜索配置 enable script Execution
并勾选

2. 加载包

下载 去官方下载 echarts.min.js 文件, 也可以通过 网络方式获取包,
使用本地文件加载会快些

markdown 首行引入文件

@import "echarts.min.js"

`javascript {cmd=true element="<div id='showechart' style='width:400px;height:300px;'></div>"}
var myChart = echarts.init(document.getElementById('showechart'));
// 指定图表的配置项和数据
var option = {
title: {
    text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
    data:['销量']
},
xAxis: {
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
}]
};
未经允许不得转载:坚果云Markdown编辑器 » markdown preview enhanced 加载echart画图
分享到: 更多 (0)

坚果云Markdown轻松记录您 灵感和创意

坚果云Markdown下载坚果云Markdown介绍