登录 注册

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

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

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。

    328 引用 • 1715 回帖 • 4 关注
2 操作
zxniuniu 在 2023-02-10 19:56:00 更新了该帖
zxniuniu 在 2023-02-10 18:47:06 更新了该帖
成都 位置
1 感谢
2 操作
224 33 12 76 4 7 92

相关帖子

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

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
zxniuniu
成都
回帖
47
 帖子
40
 积分
19011

近期热议

推荐标签 标签

  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言，由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码，也可以编译成 JavaScript，方便在没有 JVM 的设备上运行。在 Google I/O 2017 中，Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 51 关注
  • GAE

    Google App Engine（GAE）是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 705 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统，由瑞典 MySQL AB 公司开发，目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    675 引用 • 535 回帖
  • Vim

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

    28 引用 • 66 回帖 • 7 关注
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发，最早发布于 2014 年 9 月。

    58 引用 • 22 回帖
  • 以太坊

    以太坊（Ethereum）并不是一个机构，而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity，使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物：投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖 • 2 关注
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案，后端采用 Go 编写，采用 MIT 许可证。

    4 引用 • 16 回帖 • 1 关注
  • 博客

    记录并分享人生的经历。

    272 引用 • 2386 回帖
  • 负能量

    上帝为你关上了一扇门，然后就去睡觉了....努力不一定能成功，但不努力一定很轻松 (° ー °〃)

    88 引用 • 1234 回帖 • 442 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似，也就是用各类命令预先放入到一个文件中，方便一次性执行的一个程序文件，主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大，比用其他编程程序编辑的程序效率更高，因为它使用了 Linux/Unix 下的命令。

    122 引用 • 73 回帖
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。

    85 引用 • 122 回帖 • 617 关注
  • AngularJS

    AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 442 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现，服务器端用 Erlang 语言编写，支持多种语言客户端，如：Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息，在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 396 关注
  • SOHO

    为成为自由职业者在家办公而努力吧！

    7 引用 • 55 回帖 • 65 关注
  • 链滴

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

    记录生活，连接点滴

    143 引用 • 3752 回帖
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统，实现一个自托管的 Git 项目仓库，可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • 生活

    生活是指人类生存过程中的各项活动的总和，范畴较广，一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1454 回帖
  • Flutter

    Flutter 是谷歌的移动 UI 框架，可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作，它正在被越来越多的开发者和组织使用，并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖
  • RIP

    愿逝者安息！

    8 引用 • 92 回帖 • 322 关注
  • 国际化

    i18n（其来源是英文单词 internationalization 的首末字符 i 和 n，18 为中间的字符数）是“国际化”的简称。对程序来说，国际化是指在不修改代码的情况下，能根据不同语言及地区显示相应的界面。

    7 引用 • 26 回帖
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    333 引用 • 619 回帖
  • Java

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

    3169 引用 • 8208 回帖
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库，专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 48 关注
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 429 关注
  • 互联网

    互联网（Internet），又称网际网络，或音译因特网、英特网。互联网始于 1969 年美国的阿帕网，是网络与网络之间所串连成的庞大网络，这些网络以一组通用的协议相连，形成逻辑上的单一巨大国际网络。

    96 引用 • 330 回帖
  • Solo

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

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

    1427 引用 • 10046 回帖 • 472 关注
  • 强迫症

    强迫症（OCD）属于焦虑障碍的一种类型，是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病，其特点为有意识的强迫和反强迫并存，一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖

最新标签