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
}]
}
最终生成图表如下:
但是目前官方还没修改,参见 希望 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
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于