国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

在Axure原型設(shè)計中，如何實現(xiàn)一個能夠動態(tài)增刪改數(shù)據(jù)的餅圖是許多設(shè)計師面臨的挑戰(zhàn)。本文將為你詳細(xì)解析如何通過JavaScript代碼集成eCharts圖表，并借助中繼器動態(tài)修改數(shù)據(jù)源，讓餅圖“動起來”。

最近無聊，在網(wǎng)上閑逛，看到一篇教程《能增刪改數(shù)據(jù)的動態(tài)餅圖》，故仿照實踐。

因信息量較大，分三篇完成，如下：

1. 通過JavaScript代碼，集成eCharts圖表
2. 使用中繼器來代替eCharts圖表數(shù)據(jù)源
3. 使用中繼器動態(tài)修改數(shù)據(jù)源，讓餅圖動起來

步驟如下：

1.創(chuàng)建圖表容器

* 在Axure中拖入一個矩形元件

* 給矩形元件設(shè)置名稱為”chartContainer”

* 調(diào)整合適大小，比如500*500

提示：給元件命名是個很好的習(xí)慣。

2.添加JavaScript代碼

* 點擊矩形”chartContainer”

* 點擊“新建交互”

* 選擇事件“載入時”

* 添加動作“打開鏈接”

* 選擇“鏈接到URL或文件路徑”

* 點擊fx，在彈出的窗口中輸入以下代碼：

javascript:

var script = document.createElement(‘script’);

script.type = “text/javascript”;

script.src =”resources/scripts/echarts.min.js”;

document.head.appendChild(script);

setTimeout(function(){

var dom =$(‘[data-label=chartContainer]’).get(0);

var myChart = echarts.init(dom);

var option = {

};

if (option && typeof option === “object”){

myChart.setOption(option, true);

}}, 800);

代碼注意點：

script.src =”resources/scripts/echarts.min.js”;

事先下載echarts.min.js文件放到目錄resources/scripts中

var dom = $(‘[data-label=chartContainer]’).get(0);

指定矩形“chartContainer”作為echarts圖表的容器

var option = {

配置圖表選項，步驟3、4來完善

};

3.借助echarts在線示例生成圖表

* 進(jìn)入echarts在線示例庫Examples – Apache ECharts

* 根據(jù)需要編輯好示例

4.完善JavaScript代碼

* 將步驟3中的echarts代碼補(bǔ)充到到步驟2的fx里，完整代碼如下：

javascript:
var script = document.createElement(‘script’);
script.type = “text/javascript”;
script.src =”resources/scripts/echarts.min.js”;
document.head.appendChild(script);
setTimeout(function(){
var dom =$(‘[data-label=chartContainer]’).get(0);
var myChart = echarts.init(dom);

var option = {
title: {
text: ‘2025年5月汽車品牌銷量前五’,
left: ‘center’
},
tooltip: {
trigger: ‘item’
},
legend: {
orient: ‘vertical’,
left: ‘left’
},
series: [
{
name: ‘Access From’,
type: ‘pie’,
radius: ‘50%’,
data: [
{ value: 293021, name: ‘比亞迪’ },
{ value: 205093, name: ‘吉利’ },
{ value: 135330, name: ‘長按’ },
{ value: 125303, name: ‘一汽大眾’ },
{ value: 101393, name: ‘奇瑞’ },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: ‘rgba(0, 0, 0, 0.5)’
}
}
}
]
};

if (option && typeof option === “object”){
myChart.setOption(option, true);
}}, 800);

5.預(yù)覽效果

如果預(yù)覽效果沒有，檢查JavaScript代碼中的js路徑、容器名稱、代碼空格，問題不大。

—end

至此在axure中通過JavaScript注入，集成eCharts圖表完畢。

感謝

http://zhangjingwei.cn/rp/5687731.html

http://zhangjingwei.cn/rp/5054935.html