light-chart
Version:
Charts for mobile visualization.
194 lines (184 loc) • 4.69 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基金诊断</title>
<link rel="stylesheet" href="./assets/common.css">
<style>
canvas {
width: 100%;
height: 264px;
}
.chart-wrapper {
position: relative;
}
.chart-card {
width: 100%;
padding: 0;
margin: 12px 0;
background: #fff;
}
.chart-card-title {
width: 100%;
height: 45px;
box-shadow: 0 1px 0 0 #E8E8E8;
padding: 0 16px;
color: rgba(0, 0, 0, .85);
font-size: 16px;
/* font-weight: bold; */
line-height: 45px;
vertical-align: middle;
}
.chart-tooltip {
position: absolute;
z-index: 99;
background-color: rgba(233, 241, 255, 0.8);
border: 1px solid #1890ff;
padding: 5px 9px;
border-radius: 2px;
text-align: center;
font-size: 12px;
color: #2e2e2e;
text-align: left;
top: 0;
left: 0;
visibility: hidden;
max-width: 200px;
}
.chart-tooltip:after, .chart-tooltip:before {
border: solid transparent;
content: ' ';
height: 0;
position: absolute;
width: 0;
top: 100%;
}
.chart-tooltip:before {
border-width: 7px;
border-top-color: #1890ff;
left: 50%;
margin-left: -7px;
margin-top: 1px;
}
.chart-tooltip:after {
border-width: 7px;
border-top-color: #ECF3FE;
left: 50%;
margin-left: -7px;
}
.chart-tooltip span {
display: block;
}
.chart-tooltip span:nth-child(1) {
font-weight: bold;
}
</style>
</head>
<body>
<div class="chart-card">
<div class="chart-card-title">
基金诊断 <img src="https://gw.alipayobjects.com/zos/rmsportal/TDVdSYoxhzcmVyxyhhwm.png" style="display: inline-block;width: 12px;height: 12px;">
</div>
<!-- Content here -->
<div class="chart-wrapper">
<!-- 图表主题 -->
<canvas id="mountNode"></canvas>
<!-- 自定义 tooltip -->
<div class="chart-tooltip">
<span></span>
<span></span>
</div>
</div>
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.js"></script>
<script>
const data = [
{ name: '超大盘能力', value: 6.5, illustrate: '超大盘能力值越高表示相对于参考指数表现越好' },
{ name: '抗跌能力', value: 9.5, illustrate: '股市下跌，净值下跌幅度越小，分值越高' },
{ name: '稳定能力', value: 9, illustrate: '分支越高稳定性越强' },
{ name: '绝对收益能力', value: 6, illustrate: '分值越高绝对收益能力越强' },
{ name: '选证择时能力', value: 6, illustrate: '分值越高选证择时能力越强' },
{ name: '风险回报能力', value: 8, illustrate: '分值越高风险回报能力越强' }
];
const chart = new F2.Chart({
id: 'mountNode',
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
value: {
min: 0,
max: 10,
tickCount: 4
}
});
chart.coord('polar');
chart.axis('value', {
label: null,
grid(text, index) {
if (index === 3) {
return {
lineDash: null
};
}
}
});
chart.tooltip({
custom: true,
onChange(e) {
const item = e.items[0];
const origin = item.origin;
const tooltipEl = $('.chart-tooltip');
tooltipEl.html(
'<span>' + origin.name + ': ' + origin.value + '</span>' +
'<span>' + origin.illustrate + '</span>'
);
// 设置 tooltip 位置
const canvasOffsetTop = $('#mountNode').position().top;
const canvasOffsetLeft = $('#mountNode').position().left;
const tooltipWidth = tooltipEl.outerWidth();
const tooltipHeight = tooltipEl.outerHeight();
tooltipEl.css({
visibility: 'visible',
left: canvasOffsetLeft + item.x - tooltipWidth / 2,
top: canvasOffsetTop + item.y - tooltipHeight - 15
});
},
onHide() {
const tooltipEl = $('.chart-tooltip');
tooltipEl.css({
visibility: 'hidden'
});
}
});
chart.area().position('name*value').style({
fillOpacity: 0.6
}).animate({
appear: {
animation: 'groupWaveIn'
}
});
chart.line().position('name*value').animate({
appear: {
animation: 'groupWaveIn'
}
});
chart.point().position('name*value').style({
lineWidth: 1,
stroke: '#fff'
}).animate({
appear: {
delay: 300
}
});
chart.guide().html({
position: ['50%', '50%'],
html: '<div style="color: #fff;white-space: nowrap;text-align:center;">'
+ '<p style="font-size: 16px;margin:0;">诊断分</p>'
+ '<p style="font-size: 36px;margin:0;font-weight: bold;">73</p>'
+ '</div>'
});
chart.render();
</script>
</body>
</html>