Axure9原型设计:能增删改数据的动态饼图(1)
最近无聊,在网上闲逛,看到一篇教程《能增删改数据的动态饼图》,故仿照实践。
因信息量较大,分三篇完成,如下:
提示:给元件命名是个很好的习惯。
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来完善
};
*进入echarts在线示例库Examples – Apache ECharts
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);
如果预览效果没有,检查JavaScript代码中的js路径、容器名称、代码空格,问题不大。
—end
至此在axure中通过JavaScript注入,集成eCharts图表完毕。
感谢
https://www.woshipm.com/rp/5687731.html
https://www.woshipm.com/rp/5054935.html
本文由 @头发渐少脾气渐涨 原创发布于人人都是产品经理。未经作者许可,禁止转载
题图来自Unsplash,基于CC0协议
该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务