Weex实现类似Chart图表，weex官网没有组件，也没有比较好的内置框架可以进行实现的。目前只能通过内置组件<web />来加载本地HTML网页，该HTML是用F2图表框架来实现的。以上下简单的案例：
实现步骤：
1、放在本地file文件夹的HTML页面
chart.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="chart-name" content="我的月账单">
<title>F2 图表组件库 - AntV</title>
<link rel="stylesheet" href="https://gw.alipayobjects.com/os/rmsportal/YmDAMEQVbLJpVbKiRQVX.css" />
</head>
<body>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script><script src="https://gw.alipayobjects.com/os/antv/assets/f2/3.3.8/f2.min.js"></script><script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script src="https://gw.alipayobjects.com/os/rmsportal/NjNldKHIVQRozfbAOJUW.js"></script>
<div class="chart-wrapper">
<canvas id="mountNode"></canvas>
</div>
<script>
var Util = F2.Util;
var G = F2.G;
var Group = G.Group;
function drawLabel(shape, coord, canvas) {
var center = coord.center;
var origin = shape.get('origin');
var points = origin.points;
var x1 = (points[2].x - points[1].x) * 0.75 + points[1].x;
var x2 = (points[2].x - points[1].x) * 1.8 + points[1].x;
var y = (points[0].y + points[1].y) / 2;
var point1 = coord.convertPoint({
x: x1,
y: y
});
var point2 = coord.convertPoint({
x: x2,
y: y
});
var group = new Group();
group.addShape('Line', {
attrs: {
x1: point1.x,
y1: point1.y,
x2: point2.x,
y2: point2.y,
lineDash: [0, 2, 2],
stroke: '#808080'
}
});
var text = group.addShape('Text', {
attrs: {
x: point2.x,
y: point2.y,
text: origin._origin.type + ' ' + origin._origin.cost + ' 元',
fill: '#808080',
textAlign: 'start',
textBaseline: 'bottom'
}
});
var textWidth = text.getBBox().width;
var baseLine = group.addShape('Line', {
attrs: {
x1: point2.x,
y1: point2.y,
x2: point2.x,
y2: point2.y,
stroke: '#808080'
}
});
if (point2.x > center.x) {
baseLine.attr('x2', point2.x + textWidth);
} else if (point2.x < center.x) {
text.attr('textAlign', 'end');
baseLine.attr('x2', point2.x - textWidth);
} else {
text.attr('textAlign', 'center');
text.attr('textBaseline', 'top');
}
canvas.add(group);
shape.label = group;
}
var data = [{
type: '饮食',
cost: 669.47,
a: '1'
}, {
type: '服饰美容',
cost: 338,
a: '1'
}, {
type: '健康',
cost: 118.5,
a: '1'
}, {
type: '生活用品',
cost: 78.64,
a: '1'
}, {
type: '其他',
cost: 14.9,
a: '1'
}, {
type: '交通出行',
cost: 8.7,
a: '1'
}];
var sum = 0;
data.map(function(obj) {
sum += obj.cost;
});
var chart = new F2.Chart({
id: 'mountNode',
pixelRatio: window.devicePixelRatio
});
chart.source(data);
var lastClickedShape;
chart.legend({
position: 'bottom',
offsetY: -5,
marker: 'square',
align: 'center',
onClick: function onClick(ev) {
var clickedItem = ev.clickedItem;
var dataValue = clickedItem.get('dataValue');
var canvas = chart.get('canvas');
var coord = chart.get('coord');
var geom = chart.get('geoms')[0];
var container = geom.get('container');
var shapes = geom.get('shapes'); // 只有带精细动画的 geom 才有 shapes 这个属性
var clickedShape;
// 找到被点击的 shape
Util.each(shapes, function(shape) {
var origin = shape.get('origin');
if (origin && origin._origin.type === dataValue) {
clickedShape = shape;
return false;
}
});
if (lastClickedShape) {
lastClickedShape.animate().to({
attrs: {
lineWidth: 0
},
duration: 200
}).onStart(function() {
if (lastClickedShape.label) {
lastClickedShape.label.hide();
}
}).onEnd(function() {
lastClickedShape.set('selected', false);
});
}
if (clickedShape.get('selected')) {
clickedShape.animate().to({
attrs: {
lineWidth: 0
},
duration: 200
}).onStart(function() {
if (clickedShape.label) {
clickedShape.label.hide();
}
}).onEnd(function() {
clickedShape.set('selected', false);
});
} else {
var color = clickedShape.attr('fill');
clickedShape.animate().to({
attrs: {
lineWidth: 5
},
duration: 350,
easing: 'bounceOut'
}).onStart(function() {
clickedShape.attr('stroke', color);
clickedShape.set('zIndex', 1);
container.sort();
}).onEnd(function() {
clickedShape.set('selected', true);
clickedShape.set('zIndex', 0);
container.sort();
lastClickedShape = clickedShape;
if (clickedShape.label) {
clickedShape.label.show();
} else {
drawLabel(clickedShape, coord, canvas);
}
canvas.draw();
});
}
}
});
chart.coord('polar', {
transposed: true,
innerRadius: 0.7,
radius: 0.85
});
chart.axis(false);
chart.tooltip(false);
chart.interval().position('a*cost').color('type', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0']).adjust('stack');
chart.guide().text({
position: ['50%', '50%'],
content: sum.toFixed(2),
style: {
fontSize: 24
}
});
chart.render();
</script>
</body>
</html>2、使用组件<web />来加载
<web style="height: 400px;" src="root:file/chart.html"></web>