1 截图法
截图法指从一些提供数据图表生成的网站，将示例图表调整成自己想要的图表，截图在axure中拼接成数据看板。
优点：简单、易学、快速、便捷
缺点：图表展示效果不好，无法动态化
以下是笔者收集到的一些常见图表生成网站：
- Excel（微软）
顾明思义，通过excel生成图表，再将Excel贴图进axure中。
- Echarts（百度）
- antV(阿里)
- 帆软（自主厂商）
- ChartCube(阿里)
- 图说（百度）
扩展阅读
echarts antv 区别比较？
2 html文件法
html仅限于图表网站提供html下载的场景下使用。
主要步骤是：①打开图表网站->②调整配置参数->③生成html并下载->④上传至云服务器->⑤在axure中新建框架原件->⑥框架目标填写html在云服务器上的地址。
优点：简单、易学、图表展示效果好(动态效果)
缺点：发布麻烦、更新麻烦、需要云服务器
①打开图表网站
Echarts:
antV:
https://g2.antv.vision/zh/examples/gallery
②调整配置参数
Echarts:
antV:
③生成html并下载
Echarts:
antV:
根据提示修改好代码，保存成html文件。
④上传至云服务器
此过程根据自己的实际情况操作。
⑤在axure中新建框架原件
⑥文件地址配置
如果无法显示，可以尝试将服务器协议修改为https。框架目标应该是支持http的。
4 JS调用法
JS调用法是图表应用高阶用法，
基础方法
- 在axure中新建一个矩形，命名为“bar1”，记住这个名称，后面改代码会用到它。
- 设置矩形的用例，载入时，选中自己。然后，点击打开链接。
- 按下图点击右边的“fx”。
- 将下列代码复制到如图方框中。
代码如下：
javascript:
var script = document.createElement(‘script’);
script.type = “text/javascript”;
script.src =”https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js”;
document.head.appendChild(script);
setTimeout(function(){
var dom =$(‘[data-label=bar1]’).get(0);
var myChart = echarts.init(dom);
option = {
xAxis: {
type: ‘category’,
data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’]
},
yAxis: {
type: ‘value’
},
grid:{
containLabel:true,
top: 15,
left: 15,
bottom: 15,
right: 15
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: ‘bar’,
showBackground: true,
backgroundStyle: {
color: ‘rgba(180, 180, 180, 0.2)’
}
}]
};
if (option && typeof option === “object”){
myChart.setOption(option, true);
}}, 800);
如果出现下图就代表你成功了。
现在我把本代码的注释版黏贴在下：
javascript:
//引入ECharts库
var script = document.createElement(‘script’);
script.type = “text/javascript”;
script.src =”https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js”;
document.head.appendChild(script);
//获取插入的矩形框对象，bar1是上面取得名字，如果是其它名字，则进行替换
//这里用了定时器来延迟图表载入时间，测试时发现刚引入ECharts库就执行图形代码可能会出错。
setTimeout(function(){
//获取插入的bar1矩形框，作为图表绘制的容器,如果前面矩形框为其它名字，则bar1改为对应的名字
var dom =$(‘[data-label=bar1]’).get(0);
//初始化
var myChart = echarts.init(dom);
var option = {
/*在此处粘贴ECharts官网的示例代码*/
};
//设置数据
if (option && typeof option === “object”){
myChart.setOption(option, true);
}}, 800);
进入echarts官网，选择一个你中意的图表，进入它的代码编辑页面，如下图：
为了避免语法错误，直接全选“option ={…};”
然后替换刚刚那段代码下图部分：
结果如下：
按照前文所讲的，将此段代码复制进矩形的打开链接的“fx”函数中。
在axure中如下图显示：
按f5运行出现柱状图就说明你成功了。
刚才的方法当然不是万能的，不行你试试它：
var labelRight = {
position: ‘right’
};
option = {
title: {
text: ‘交错正负轴标签’,
subtext: ‘From ExcelHome’,
sublink: ‘http://e.weibo.com/1341556070/AjwF2AgQm’
},
tooltip: {
trigger: ‘axis’,
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: ‘shadow’ // 默认为直线，可选为：’line’ | ‘shadow’
}
},
grid: {
top: 80,
bottom: 30
},
xAxis: {
type: ‘value’,
position: ‘top’,
splitLine: {
lineStyle: {
type: ‘dashed’
}
}
},
yAxis: {
type: ‘category’,
axisLine: {show: false},
axisLabel: {show: false},
axisTick: {show: false},
splitLine: {show: false},
data: [‘ten’, ‘nine’, ‘eight’, ‘seven’, ‘six’, ‘five’, ‘four’, ‘three’, ‘two’, ‘one’]
},
series: [
{
name: ‘生活费’,
type: ‘bar’,
stack: ‘总量’,
label: {
show: true,
formatter: ‘{b}’
},
data: [
{value: -0.07, label: labelRight},
{value: -0.09, label: labelRight},
0.2, 0.44,
{value: -0.23, label: labelRight},
0.08,
{value: -0.17, label: labelRight},
0.47,
{value: -0.36, label: labelRight},
0.18
]
}
]
};
