以下用饼状图进行演示，其他图形做法相同
先看下最终效果：
接下来，我们来看下具体实现：
目录
步骤一：放置一个矩形框
步骤二：将矩形框命名为Demo（这步很重要，后面会使用到此名称）
步骤三： 打开Echarts示例，选择需要的样式，并调整数值
步骤四：准备好基础代码
步骤五：将Echarts示例中JS代码替换到基础代码中“option = {};”
步骤六：将代码在矩形Demo中引用
常见问题及解决办法
步骤一：放置一个矩形框
步骤二：将矩形框命名为Demo（这步很重要，后面会使用到此名称）
步骤三： 打开Echarts示例，选择需要的样式，并调整数值
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);
步骤六：将代码在矩形Demo中引用
保存后运行即可
常见问题及解决办法
打开后空白的小伙伴可以尝试更换CDN，这里列举了目前使用版本的几种地址。CDN 地址可能会随着时间的推移而发生变化。建议在使用之前检查官方文档或相关资源以获取最新的 CDN 地址：
（ 小编会不定时更新，各位也可评论区留言 ^_^ ）
// 第一种
$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');
// 20240325更新
$axure.utils.loadJS('https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js');
如果觉得不错，欢迎点赞收藏
推荐链接
发表评论