使用 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]
}]
};