Smartchat基于Echarts,所以开发Smartchart,你需要了解下ECharts基础概念

只需要围绕option进行定制设定。echarts 的使用者，使用 option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，option 表述了：数据、数据如何映射成图形、交互行为。

echarts 实例

一个网页中可以创建多个 echarts 实例。每个 echarts 实例 中可以创建多个图表和坐标系等等（用 option 来描述）。准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建

Read more

第一种动态效果: 按系列轮放

参考: 饼图自动播放

设定方法:

• 如果不改动图形, 可以在"仪表盘" --> 高级设定中 进行

  //动态播放
    "animate":{"2":{"dataLen":5,"interval":1000,"showtip":1}},

• 以上方法最简单,但有一个弊端, 需要指定dataLen, 有时可能dataLen不固定,这样你可以采用在图形设定的最后加上一段即可:

  //基于数据项动态设定
  startSelectAnimate(myChart__name__,legend_label.length,1000,1);

第二种动态效果: 时间轴模式(当然不一

Read more

现在开始我们的第一个SmartChart, 经过大量的迭代开发后, 目前正确的开启SmartChart的方法来了.考虑到大家可能不会SQL与数据库操作, 现在以从EXCEL中复制数据方式完成Demo

• 注意excel中准备的数据为结果数据, 你可以采用对原始数据进行透视表操作后生成
• 我们推荐的开发浏览器是:Chrome, 如果有出现异常, 请切换浏览器

以下说明已发生很大变化, 正确方式请参考视屏

SmartChart快速开发入门

建立数据集

点击"数据集", 如下图, 将你在EXCEL中准备好的数据 复制到"数据集编辑框",在头部输入dataset=,然后分别选择数据源

图形编辑

完成

Read more

你可能会有这样一个需求, 当在查看图表时, 发现一个异常点, 需要进一步看它的详细, 或跳转到 另一个网页进行操作, 可以使用smartchart的动作响应功能

首先进入"图形在线调式"中, 在代码最下方加入以下代码:

myChart__name__.on('click', function (params) {
    console.log(params);
});

然后按F12进入浏览器的调试界面, 尝试点击图形, 你会在浏览器的调试界面中 看到如下响应, 这就是params的参数, 找到你要的数据, 比如我们需要是系列 那就是data[0], data中的第一个

Read more

Dashboard高级设定

{
     //初始参数
    "paraminit":{}, 
     //图形点击钻取联动
      "drill":{
        "1":{"paramname":"参数名","child":[2,3],"type":"seriesName"},
        "2":{"paramname":"参数名","child

Read more

数据集准备

首先在需要进行联动的数据集中SQL的写法如下, 比如对应2号图形:

注意 /* ... */的写法, 当参数写在这个区间时, 如果外部没有传入参数, 
会自动忽略这一段代码, 这样对于钻取来说非常重要, 
初始时全部显示, 点击其它图形时传入参数进行动态钻取

select xxx,xxx,xxx from tablename /* where xxxx = '$参数名' */ ....

常规方法

在dashboard设定中的 高级 --> 扩展参数,点击"加载样式", 自动下载样式, 进行如下配置, 这样就可以实现当1号图形点击时,对2号图形进行钻取显示.

Read more

最近有小伙伴说如果不了解数据库, 或手上没有现成数据库连接, 那么是否可以玩转SmartChart, 今天他来了, 我们支持你自定义数据进行demo展示

STEP1: 进入 "数据集装箱" --> "图形格式设定"
STEP2: 选择一个你喜欢的图形, 点击进入编辑界面, 下方点击 "保存为新的"

STEP3: 你可以复制你EXCEL中数据(注意是统计好的数据,smartchart不会主动做统计), 粘贴到 数据样本区, 然后点击 "保存并继续编辑"

STEP4: 系统自动将数据转化成数组格式,你也可以直接输入这种数组格式, 格式请参考 数据集指南

之后你就可以在上方点击图标 预览

Read more