echart 多柱图只显示部分数据标签_2分钟上手、3小时学会无代码软件开发---Echarts数据可视化...-CSDN博客

1、引入 ECharts.min.js 库文件

引入方式一：用 script 标签在页面头问Matadata信息中引入JS库文件地址(可联网项目)

引入方式二：库文件放于项目文件夹(本地部署项目及联网项目均可以)

2、图表JS内容生成

参考官方文档处理JS文本

用模板传值生成JS文本并运行(模板传值让参考可以按需变动)

注意：JS中的内容应先用查找“”换行符号替换为一个空格将全部行转为一行处理过程中删除官方标注信息以免造成错误转为一行的Option内容可以在Echarts的官案例中替换运行测试是否正常在项目中测试正常后，将数据改为变量名称，转为用模板输入数据生成完整的JS代码完

3、用HTML Display显示超文本元件定义图片要显示的位置

可以参考“可视化元件”一章“用户端元件(显示元件)”组中“HTML Display显示超文本”中的说明

4、运行时生成图表

在页面中以上设计的“HTML Display显示超文本元件”所在页面显示图表

5、Echarts 官方资料

Echarts是国内最好的图表生成库，由百度创建并维护，商业项目中也可免费使用，请参考官方资料

6、实例测试

下载官方的Echart库文件包，放入TERSUS项目文件夹(如默认的workspace文件夹)项目文件下任意文件夹中(可以在项目的web文件夹下)
· 下载地址：https://github.com/apache/incubator-echarts/releases
· 选中某个发布版本的“Assets”下的“Source Code”文件包，解压后找到“dist”文件夹
· 可以用完整版，也可以用简单版(echarts.simple.min.js)，一般都足够使用，详细请参考官方说明，也可以在官网下载自定义需要生成某些图表的库文件
在Echarts官网找一个图表案例，查看代码复制，参考以上第2步的处理修改为以下内容或直接用以下JS代码内容

var myChart = echarts.init(document.getElementById('ceshichart')); var option = { color: ['#3398DB'], tooltip : { trigger: 'axis', axisPointer : { type : 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisTick: { alignWithLabel: true } } ], yAxis : [ { type : 'value' } ], series : [ { name:'直接访问', type:'bar', barWidth: '60%', data:[10, 52, 200, 334, 390, 330, 220] } ] }; myChart.setOption(option);

在无代码开发平台中，打开对应项目，在某个页面中添加一个HTML Display显示超文本元件，双击后进入元件，点选放入一个字符常量元件，常量元件重命名方式添加值“
”，常量名称随意，注意因为值中含名称不允许的字符所以需独立命名，将常量传给HTML Display显示超文本元件，如第3步所示
通常在HTML Display显示超文本元件的外部，添加一个Action普通行为处理元件，在元件中添加一个Run Javascript运行JS代码元件和一个字符常量元件，同上一步一样将第二步整理的代码添加入字符常量的值，字符常量传值给运行JS代码元件的