Echarts数据可视化

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

• 引入方式一：用 script 标签在页面头问Matadata信息中引入JS库文件地址（可联网项目可联网项目，此类添加案例可参考本章“地图API接入”一节的案例，可下载修改复用）

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

2、图表JS内容生成

• 参考官方文档 处理JS文本

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

注意：

• JS中的内容应先用查找“\r\n”换行符号替换为一个空格将全部行转为一行
• 处理过程中删除官方标注信息以免造成错误
• 转为一行的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代码元件的