pyecharts中高阶用法：JScode

**JScode**的使用

导入Jscode

from pyecharts.commons.utils import JsCode

JScode对于pyecharts

jscode对于pyecharts其实没有任何意义，无论怎么写都不会影响pyecharts的渲染

jscode实际上只是一段字符串（包含着javascript的代码），在渲染到html的时候变成html可识别的 js匿名函数

什么是JScode

JScode简单来说：就是一段javascript代码，作用是为了对应jscode的参数在echarts渲染时提供的回调函数

对于pyecharts来说，需要遵循JavaScript的语法进行匿名函数(回调函数)的编写

如何使用JScode

如下所示

from pyecharts import options as opts
from pyecharts.charts import Bar
from pyecharts.commons.utils import JsCode
from pyecharts.globals import ThemeType

list2 = [
 {"value": 12, "percent": 12 / (12 + 3)},
 {"value": 23, "percent": 23 / (23 + 21)},
 {"value": 33, "percent": 33 / (33 + 5)},
 {"value": 3, "percent": 3 / (3 + 52)},
 {"value": 33, "percent": 33 / (33 + 43)},
]

list3 = [
 {"value": 3, "percent": 3 / (12 + 3)},
 {"value": 21, "percent": 21 / (23 + 21)},
 {"value": 5, "percent": 5 / (33 + 5)},
 {"value": 52, "percent": 52 / (3 + 52)},
 {"value": 43, "percent": 43 / (33 + 43)},
]

c = (
 Bar(init_opts=opts.InitOpts(theme=ThemeType.LIGHT))
 .add_xaxis([1, 2, 3, 4, 5])
 .add_yaxis("product1", list2, stack="stack1", category_gap="50%")
 .add_yaxis("product2", list3, stack="stack1", category_gap="50%")
 .set_series_opts(
     label_opts=opts.LabelOpts(
         position="right",
         formatter=JsCode(
             "function(x){return Number(x.data.percent * 100).toFixed() + '%';}"
         ),
     )
 )
 .render("stack_bar_percent.html")
)

理解

1. 通过封装自定义字段value和percent，其中value就是添加的y轴数据，而percent不属于echarts bar中国你data参数下的任何字段，所以percent被保存了下来

重要：万能回调函数

对于任意一个JScode都可以先写下这样一个万能的回调函数

作用：不影响渲染图表，但是可以在浏览器控制台显示出来信息

任何参数的JScode在不知道如何使用的情况下，均可以使用万能回调函数和浏览器控制台去查看

# 万能回调函数：单参数
function(x){
 console.log(x);
 return x;
}
# 万能回调函数：双参数
function(params,item){
 console.log(params,item);
 return params;
}

一些遇到的需要使用JScode的情况

设置柱形图的值label不显示为零的数值

formatter=JScode("your js code")

# my js code
function(x){
 if(x.value>0){
     return x.value;
 }
 else{
     return '';
 }
}