登录 注册

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

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

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。

    351 引用 • 1814 回帖
2 操作
zxniuniu 在 2023-02-10 19:56:00 更新了该帖
zxniuniu 在 2023-02-10 18:47:06 更新了该帖
成都 位置
1 感谢
2 操作
251 38 12 94 7 7 1 92

相关帖子

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

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
zxniuniu
成都
回帖
54
 帖子
41
 积分
19051

近期热议

推荐标签 标签

  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务，可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 58 关注
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”，在线用户由 1999 年的 2 人（马化腾和张志东）到现在已经发展到上亿用户了，在线人数超过一亿，是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 67 关注
  • Gzip

    gzip （GNU zip）是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件，它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式，或者说一种文件格式。

    9 引用 • 12 回帖 • 134 关注
  • 星云链

    星云链是一个开源公链，业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎，一个公链的所有功能，它基本都有，比如你可以用它来开发部署你的去中心化的 APP，你可以在上面编写智能合约，发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件，让构建、部署、自动化集成项目变得简单易用。

    53 引用 • 37 回帖
  • 单点登录

    单点登录（Single Sign On）是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖
  • Firefox

    Mozilla Firefox 中文俗称“火狐”（正式缩写为 Fx 或 fx，非正式缩写为 FF），是一个开源的网页浏览器，使用 Gecko 排版引擎，支持多种操作系统，如 Windows、OSX 及 Linux 等。

    8 引用 • 30 回帖 • 407 关注
  • wolai

    我来 wolai：不仅仅是未来的云端笔记！

    2 引用 • 14 回帖
  • Openfire

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

    6 引用 • 7 回帖 • 94 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣，为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 51 关注
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言，应用广泛。C++ 支持多种编程范式，面向对象编程、泛型编程和过程化编程。

    107 引用 • 153 回帖
  • 创造

    你创造的作品可能会帮助到很多人，如果是开源项目的话就更赞了！

    179 引用 • 995 回帖
  • OkHttp

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

    16 引用 • 6 回帖 • 62 关注
  • OnlyOffice
    4 引用 • 3 关注
  • 设计模式

    设计模式（Design pattern）代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖
  • Lute

    Lute 是一款结构化的 Markdown 引擎，支持 Go 和 JavaScript。

    25 引用 • 191 回帖 • 16 关注
  • Ubuntu

    Ubuntu（友帮拓、优般图、乌班图）是一个以桌面应用为主的 Linux 操作系统，其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词，意思是“人性”、“我的存在是因为大家的存在”，是非洲传统的一种价值观，类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    125 引用 • 169 回帖 • 1 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 31 关注
  • 安全

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

    199 引用 • 816 回帖 • 1 关注
  • MongoDB

    MongoDB（来自于英文单词“Humongous”，中文含义为“庞大”）是一个基于分布式文件存储的数据库，由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。它支持的数据结构非常松散，是类似 JSON 的 BSON 格式，因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖 • 1 关注
  • Solo

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

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

    1434 引用 • 10054 回帖 • 490 关注
  • golang

    Go 语言是 Google 推出的一种全新的编程语言，可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克（Rob Pike）说：我们之所以开发 Go，是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    497 引用 • 1387 回帖 • 283 关注
  • GitLab

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

    46 引用 • 72 回帖
  • JRebel

    JRebel 是一款 Java 虚拟机插件，它使得 Java 程序员能在不进行重部署的情况下，即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 664 关注
  • RabbitMQ

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

    49 引用 • 60 回帖 • 362 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 3 关注
  • FreeMarker

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

    23 引用 • 20 回帖 • 463 关注

最新标签