【Axure基础教程】JS代码调用ECharts、AntV图表

【Axure基础教程】JS代码调用ECharts、AntV图表

Axure教程 - AxureMost

https://pm.axuremost.cn/original

1 截图法

截图法指从一些提供数据图表生成的网站，将示例图表调整成自己想要的图表，截图在axure中拼接成数据看板。

**优点：**简单、易学、快速、便捷

**缺点：**图表展示效果不好，无法动态化

以下是笔者收集到的一些常见图表生成网站：

• Excel（微软）

顾明思义，通过excel生成图表，再将Excel贴图进axure中。

• Echarts（百度）
• antV(阿里)
• 帆软（自主厂商）
• ChartCube(阿里)
• 图说（百度）

扩展阅读

echarts antv 区别比较？

2 html文件法

html仅限于图表网站提供html下载的场景下使用。

主要步骤是：①打开图表网站->②调整配置参数->③生成html并下载->④上传至云服务器->⑤在axure中新建框架原件->⑥框架目标填写html在云服务器上的地址。

**优点：**简单、易学、图表展示效果好(动态效果)

**缺点：**发布麻烦、更新麻烦、需要云服务器

①打开图表网站

Echarts:

https://echarts.apache.org/next/examples/zh/editor.html?c=line-simple

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
]
}
]
};