Axure 基于Echarts，引入动态图表（折线图、柱状图、饼状图等）

以下用饼状图进行演示，其他简单图表做法相同（复杂图表实现了解，请移步至：Axure 基于Echarts，引入复杂动态图表（堆叠柱状图、气泡图等）-CSDN博客）

先看下最终效果： 

接下来，我们来看下具体实现：

目录

步骤一：放置一个矩形框

步骤二：将矩形框命名为Demo（这步很重要，后面会使用到此名称）

步骤三： 打开Echarts示例，选择需要的样式，并调整数值

 步骤四：准备好基础代码

步骤五：将Echarts示例中JS代码替换到基础代码中“option = {};”

步骤六：将代码在矩形Demo中引用

常见问题及解决办法

（这步很重要，后面会使用到此名称）

选择需要的样式，并调整数值

Echarts示例网址：Examples - Apache ECharts

其中，“data-label=Demo”中的“Demo”就是矩形的名称

javascript:

$axure.utils.loadJS('https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js');

setTimeout(function(){

var dom =$('[data-label=Demo]').get(0);

var Chart = echarts.init(dom);

var option = {};

if (option && typeof option === "object"){

Chart.setOption(option, true);

}}, 1000);

将Echarts示例中JS代码替换到基础代码中“option = {};”

 替换后代码：

javascript:

$axure.utils.loadJS('https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js');

setTimeout(function(){

var dom =$('[data-label=Demo]').get(0);

var Chart = echarts.init(dom);

var option = {

title: {

text: 'Referer of a Website',

subtext: 'Fake Data',

left: 'center'

},

tooltip: {

trigger: 'item'

},

legend: {

orient: 'vertical',

left: 'left'

},

series: [

{

name: 'Access From',

type: 'pie',

radius: '50%',

data: [

{ value: 1048, name: 'Search Engine' },

{ value: 735, name: 'Direct' },

{ value: 580, name: 'Email' },

{ value: 484, name: 'Union Ads' },

{ value: 300, name: 'Video Ads' }

],

emphasis: {

itemStyle: {

shadowBlur: 10,

shadowOffsetX: 0,

shadowColor: 'rgba(0, 0, 0, 0.5)'

}

}

}

]

};

if (option && typeof option === "object"){

Chart.setOption(option, true);

}}, 1000);

 保存后运行即可

打开后空白的小伙伴可以尝试更换CDN，这里列举了目前使用版本的几种地址。CDN 地址可能会随着时间的推移而发生变化。建议在使用之前检查官方文档或相关资源以获取最新的 CDN 地址：

（ 小编会不定时更新，各位也可评论区留言 ^_^ ）

$axure.utils.loadJS('https://registry.npmmirror.com/echarts/5.5.1/files/dist/echarts.min.js');

$axure.utils.loadJS('https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js');

$axure.utils.loadJS('https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.0/echarts.min.js');

$axure.utils.loadJS('https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.min.js');

$axure.utils.loadJS('https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js');

如果觉得不错，欢迎点赞收藏

相关知识

基于Python的全国主要城市天气数据可视化大屏系统
常用大数据可视化分析工具介绍
花店数据分析图怎么做
鳞翅目害虫危害数据分析图怎么看
鲜花店数据分析图怎么做
L7
基于Echarts的鸢尾花数据可视化
C＝问高套。花色开叫可没有这一说
Python中的数据可视化：Matplotlib基础与高级技巧
【python】python双十一美妆数据分析（源码+报告）【独一无二】课程设计

网址: Axure 基于Echarts，引入动态图表（折线图、柱状图、饼状图等） https://www.huajiangbk.com/newsview1545017.html