修改 Markdown 编译器 vditor 支持 JS 形式 JSON,并支持非 JSON 形式 Option

本贴最后更新于 890 天前,其中的信息可能已经事过境迁

Vditor 中的 echarts 图表,只能输入严格的 JSON 格式数据,参见 Echarts 页面渲染完整示例 ,源码如下 Vditor 示例,否则会报错,比如输入:

{ backgroundColor: '#0e2147', grid: { left: '11%', top: '12%', right: '0%', bottom: '8%', containLabel: true }, xAxis: [{ show: false, }], yAxis: [{ axisTick: 'none', axisLine: 'none', offset: '27', axisLabel: { textStyle: { color: '#ffffff', fontSize: '16', } }, data: ['南昌', '广州', '杭州', '宁夏', '兰州', '南宁', '长沙', '武汉', '合肥', '贵州'] }, { axisTick: 'none', axisLine: 'none', axisLabel: { textStyle: { color: '#ffffff', fontSize: '16', } }, data: ['10', '9', '8', '7', '6', '5', '4', '3', '2', '1'] }, { name: '分拨延误TOP 10', nameGap: '50', nameTextStyle: { color: '#ffffff', fontSize: '16', }, axisLine: { lineStyle: { color: 'rgba(0,0,0,0)' } }, data: [], }], series: [{ name: '条', type: 'bar', yAxisIndex: 0, data: [4, 13, 25, 29, 38, 44, 50, 52, 60, 72], label: { normal: { show: true, position: 'right', textStyle: { color: '#ffffff', fontSize: '16', } } }, barWidth: 12, itemStyle: { normal: { color: function(params) { var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC']; var num = myColor.length; return myColor[params.dataIndex % num] }, } }, z: 2 }, { name: '白框', type: 'bar', yAxisIndex: 1, barGap: '-100%', data: [99, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5], barWidth: 20, itemStyle: { normal: { color: '#0e2147', barBorderRadius: 5, } }, z: 1 }, { name: '外框', type: 'bar', yAxisIndex: 2, barGap: '-100%', data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100], barWidth: 24, itemStyle: { normal: { color: function(params) { var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC']; var num = myColor.length; return myColor[params.dataIndex % num] }, barBorderRadius: 5, } }, z: 0 }, { name: '外圆', type: 'scatter', hoverAnimation: false, data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], yAxisIndex: 2, symbolSize: 35, itemStyle: { normal: { color: function(params) { var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC']; var num = myColor.length; return myColor[params.dataIndex % num] }, opacity: 1, } }, z: 2 } ] }

会报错:

echarts render error: SyntaxError: Unexpected token s **in** JSON at position 2

只能输入以下严格的 JSON 格式才行,即所有字段以及字符串值都需要使用双引号括起来。

{ "backgroundColor": "#0e2147", "grid": { "left": "11%", "top": "12%", "right": "0%", "bottom": "8%", "containLabel": true }, "xAxis": [{ "show": false }], "yAxis": [{ "axisTick": "none", "axisLine": "none", "offset": "27", "axisLabel": { "textStyle": { "color": "#ffffff", "fontSize": "16" } }, "data": ["南昌", "广州", "杭州", "宁夏", "兰州", "南宁", "长沙", "武汉", "合肥", "贵州"] }, { "axisTick": "none", "axisLine": "none", "axisLabel": { "textStyle": { "color": "#ffffff", "fontSize": "16" } }, "data": ["10", "9", "8", "7", "6", "5", "4", "3", "2", "1"] }, { "name": "分拨延误TOP 10", "nameGap": "50", "nameTextStyle": { "color": "#ffffff", "fontSize": "16" }, "axisLine": { "lineStyle": { "color": "rgba(0,0,0,0)" } }, "data": [] }], "series": [{ "name": "条", "type": "bar", "yAxisIndex": 0, "data": [4, 13, 25, 29, 38, 44, 50, 52, 60, 72], "label": { "normal": { "show": true, "position": "right", "textStyle": { "color": "#ffffff", "fontSize": "16" } } }, "barWidth": 12, "itemStyle": { "normal": {} }, "z": 2 }, { "name": "白框", "type": "bar", "yAxisIndex": 1, "barGap": "-100%", "data": [99, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5], "barWidth": 20, "itemStyle": { "normal": { "color": "#0e2147", "barBorderRadius": 5 } }, "z": 1 }, { "name": "外框", "type": "bar", "yAxisIndex": 2, "barGap": "-100%", "data": [100, 100, 100, 100, 100, 100, 100, 100, 100, 100], "barWidth": 24, "itemStyle": { "normal": { "barBorderRadius": 5 } }, "z": 0 }, { "name": "外圆", "type": "scatter", "hoverAnimation": false, "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], "yAxisIndex": 2, "symbolSize": 35, "itemStyle": { "normal": { "opacity": 1 } }, "z": 2 }] }

最终生成图表如下:

var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC']; option = { backgroundColor: '#0e2147', grid: { left: '11%', top: '12%', right: '0%', bottom: '8%', containLabel: true }, xAxis: [{ show: false, }], yAxis: [{ axisTick: 'none', axisLine: 'none', offset: '27', axisLabel: { textStyle: { color: '#ffffff', fontSize: '16', } }, data: ['南昌转运中心', '广州转运中心', '杭州转运中心', '宁夏转运中心', '兰州转运中心', '南宁转运中心', '长沙转运中心', '武汉转运中心', '合肥转运中心', '贵州转运中心'] }, { axisTick: 'none', axisLine: 'none', axisLabel: { textStyle: { color: '#ffffff', fontSize: '16', } }, data: ['10', '9', '8', '7', '6', '5', '4', '3', '2', '1'] }, { name: '分拨延误TOP 10', nameGap: '50', nameTextStyle: { color: '#ffffff', fontSize: '16', }, axisLine: { lineStyle: { color: 'rgba(0,0,0,0)' } }, data: [], }], series: [{ name: '条', type: 'bar', yAxisIndex: 0, data: [4, 13, 25, 29, 38, 44, 50, 52, 60, 72], label: { normal: { show: true, position: 'right', textStyle: { color: '#ffffff', fontSize: '16', } } }, barWidth: 12, itemStyle: { normal: { color: function(params) { var num = myColor.length; return myColor[params.dataIndex % num] }, } }, z: 2 }, { name: '白框', type: 'bar', yAxisIndex: 1, barGap: '-100%', data: [99, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5], barWidth: 20, itemStyle: { normal: { color: '#0e2147', barBorderRadius: 5, } }, z: 1 }, { name: '外框', type: 'bar', yAxisIndex: 2, barGap: '-100%', data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100], barWidth: 24, itemStyle: { normal: { color: function(params) { var num = myColor.length; return myColor[params.dataIndex % num] }, barBorderRadius: 5, } }, z: 0 }, { name: '外圆', type: 'scatter', hoverAnimation: false, data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], yAxisIndex: 2, symbolSize: 35, itemStyle: { normal: { color: function(params) { var num = myColor.length; return myColor[params.dataIndex % num] }, opacity: 1, } }, z: 2 } ] };

但是目前官方还没修改,参见 希望 echarts 支持 js 格式的 json 其中提到,通过 修改 vditor 的源码可实现,把 src\ts\markdown\chartRender.ts 中的

const option = JSON.parse(text)

改成

var js = eval("(" + text + ")"); var strJS = JSON.stringify(js); const option = JSON.parse(strJS)

即可实现,但是有一点问题就是 输入数据中不支持注释。然后使用以下命令编译:

npm run build

编译成功后会生成 dist 目录,使用下面两个文件

index.css index.min.js

替换 vditor.css 和 vditor.js 即可。

关于支持 JS 形式的配置项,通过研究 Echarts 官网的 example-bundle.js 中涉及 JS 形式配置项的代码:

new Function("myChart", "app", "setTimeout", "setInterval", "ROOT_PATH", "var option; \n" + text + "\nreturn option;")

发现,可以采用 JS Function 来解决包含 JS 代码 的配置项结果获取,即修改 src\ts\markdown\chartRender.ts 中的

const option = JSON.parse(text) echarts.init(e, theme === "dark" ? "dark" : undefined).setOption(option);

为以下代码,如果还有其他变量,可以在最后一个参数前继续加入。

// 输入文本的函数定义, https://fuyiyi.imdo.co 如果有其他参数请加入 var optionFun = new Function('myChart', 'setTimeout', 'setInterval', 'var option; \n' + text + '\nreturn option;'); // 原chartRender中的实例化后直接设置Option,现在拆开 var myChart = echarts.init(e, theme === "dark" ? "dark" : undefined); // 通过原 JS 形式配置项 获取最终的option,https://fuyiyi.imdo.co const option = optionFun(myChart, setTimeout, setInterval); myChart.setOption(option);

然后编译后替换文件即可,大功告成!

参考:

修改 vditor 以支持 javascript 形式的 json

vditor/chartRender.ts at master

charts/update-example.js snwowolf20170103/charts

JavaScript 函数

  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    376 引用 • 1860 回帖
2 操作
zxniuniu 在 2023-02-10 19:56:00 更新了该帖
zxniuniu 在 2023-02-10 18:47:06 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 233 回帖
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 179 关注
  • 京东

    京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 313 关注
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖 • 1 关注
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    1444 引用 • 10083 回帖 • 508 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3203 引用 • 8217 回帖 • 1 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    183 引用 • 3885 回帖 • 1 关注
  • 爬虫

    网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖 • 2 关注
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    211 引用 • 358 回帖
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 1 关注
  • 安全

    安全永远都不是一个小问题。

    199 引用 • 818 回帖
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。

    7 引用 • 31 回帖 • 270 关注
  • sts
    2 引用 • 2 回帖 • 244 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 367 关注
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本,加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较(vimdiff)、语法高亮、全面的帮助系统、本地脚本(Vimscript)和便于选择的可视化模式。

    29 引用 • 66 回帖 • 1 关注
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点;但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中,从而不再需要读写 HDFS,因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 565 关注
  • 音乐

    你听到信仰的声音了么?

    62 引用 • 512 回帖 • 3 关注
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高,单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 117 关注
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    188 引用 • 319 回帖 • 239 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展,它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 680 关注
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 445 关注
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 67 回帖 • 445 关注
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    10 引用 • 54 回帖 • 181 关注
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    167 引用 • 408 回帖 • 483 关注