Axure自定义Echarts交互图

文章目录

一、固定JS代码
二、可变代码示例

要想在Axure中载入echarts动态图表，需要利用原件交互动作。具体步骤如下：

step1:选择原件

step2:添加载入交互

step3:添加打开链接动作

step4:选择链接外部URL，并写入JS代码

step5:保存并预览

一、固定JS代码

下列代码是固定代码，需要将原件名称修改给step1中的实际原件名称，需要将可变代码处全部#和文字替换为具体的JS代码。

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=原件名称]').get(0);var myChart = echarts.init(dom);
#######################################    #可变代码
#######################################
if (option && typeof option === "object"){myChart.setOption(option, true);    }}, 800);

二、可变代码示例

Apache ECharts是一个基于JS的开源可视化图标库，在其官网示例中几乎涵盖所有二维图表、三维图表的交互图形示例JS代码，可以直接拷贝后针对性进行修改即可。如饼图：

左侧代码如下：

option = {tooltip: {trigger: 'item'},legend: {top: '5%',left: 'center'},series: [{name: 'Access From',type: 'pie',radius: ['40%', '70%'],avoidLabelOverlap: false,itemStyle: {borderRadius: 10,borderColor: '#fff',borderWidth: 2},label: {show: false,position: 'center'},emphasis: {label: {show: true,fontSize: '40',fontWeight: 'bold'}},labelLine: {show: false},data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }]}]
};

Axure自定义Echarts交互图相关推荐

百度地图 - 自定义ECharts覆盖物
简介在开发地图可视化页面时,产品想在城市的对应位置展示一个统计图.这时候先不要慌,大声的说你是在哪抄的这个需求.好看到页面了,就没有前端人不会(抄的)开发的.研究后发现使用的是,百度地图api自定义 ...
Axure自定义元件
Axure自定义元件及元件库前言一.创建元件库及元件 1.新建页面(作为元件库) 2.在页面中编辑内容(创建元件) 3.根据需求给元件绑定相关事件 4.给元件库命名 5.保存元件库二.导入元件库 ...
自定义echarts地图展示行政区域
展示全国前十数据省份及数据大小如图 echarts地图设置map默认显示中国地图,若想自定义各省市县地图需要先引入当地数据资源json文件以沈阳为例首先引入沈阳json文件如下 import s ...
【Echarts图例点击事件】自定义Echarts图例legend点击事件（已解决）
目录先睹为快(效果) 1.实现Echarts多条曲线 2.点击echarts触发接口请求 2.1 先默认隐藏部分数据 2.2 自定义legend图例点击事件 3.源码下载地址(解压即用) **[写在 ...
Axure 自定义元件库
点击文件 -> 新建元件库可以添加多个元件,并将期重命名保存元件库新建页面添加元件,选择自建的元件库导入后就会发现我的原件库这样就可以使用我们自定义的元件库了
自定义Echarts图表图例的图片
从Echarts官网上我们可以知道图例默认的图片样式有以下几种,分别是'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arr ...
自定义echarts地图，HTML+CSS加载全国、或某一省市（安徽省）（各个省市县）地图的完美方法
echarts加载全国.或某一省市(安徽省)(各个省市县)地图: 1.全国地图大屏demo实例下载 2.安徽省地图大屏demo实例下载如果想要其他省.市.县地图方法一样,可以参考这篇文章:链接如下: ...
【Vue ECharts开发】自定义echarts柱状图颜色渐变效果
1. 效果演示 2. 示例代码 Vue 模板代码: <template><div><div id="main"></div>< ...
echarts图表y轴数据设置为固定值，等间距，如何自定义echarts图表y轴数据
如图将Y轴设置为固定的0% 20% ----100% 话不多说直接上代码 yAxis: {type: 'value',max: 100,//最大值min: 0,//最小值interval:20, ...

Axure自定义Echarts交互图

文章目录

一、固定JS代码

二、可变代码示例

Axure自定义Echarts交互图相关推荐

最新文章

热门文章