You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
336 lines
6.9 KiB
JavaScript
336 lines
6.9 KiB
JavaScript
import { Chart } from "@antv/g2";
|
|
/**
|
|
* 漏斗图
|
|
*
|
|
*
|
|
*
|
|
*/
|
|
export function ldChart (dom, data) {
|
|
let ldChart = new Chart({
|
|
container: dom, //chart容器id
|
|
autoFit: true,
|
|
// width:230,
|
|
// height: 240,
|
|
padding: [10, 60, 15],
|
|
});
|
|
setTimeout(() => {
|
|
ldChart.data(data);
|
|
ldChart.axis(false);
|
|
ldChart.legend(false);
|
|
ldChart.tooltip({
|
|
showTitle: false,
|
|
showMarkers: false,
|
|
itemTpl: '<li style="margin-bottom:4px;list-style-type:none;padding: 0;">' + '<span style="background-color:{color};" class="g2-tooltip-marker"></span>' + "{name}<br/>" + '<span style="padding-left: 16px;line-height: 16px;">浏览人数：{pv}</span><br/>' + "</li>",
|
|
});
|
|
ldChart.interaction("active-region");
|
|
ldChart.coordinate("rect").transpose().scale(1, -1);
|
|
ldChart
|
|
.interval()
|
|
.adjust("symmetric")
|
|
.position("action*pv")
|
|
.shape("funnel")
|
|
.color("action", ["#0050B3", "#1890FF", "#40A9FF", "#69C0FF", "#BAE7FF"])
|
|
.label(
|
|
"action*pv",
|
|
(action, pv) => {
|
|
return {
|
|
content: `${action} ${pv}`,
|
|
};
|
|
},
|
|
{
|
|
offset: 35,
|
|
labelLine: {
|
|
style: {
|
|
lineWidth: 1,
|
|
stroke: "rgba(0, 0, 0, 0.15)",
|
|
},
|
|
},
|
|
}
|
|
)
|
|
.tooltip("action*pv", (action, pv) => {
|
|
return {
|
|
name: action,
|
|
// percent: +percent * 100 + '%',
|
|
pv,
|
|
};
|
|
})
|
|
.animate({
|
|
appear: {
|
|
animation: "fade-in",
|
|
},
|
|
update: {
|
|
annotation: "fade-in",
|
|
},
|
|
});
|
|
ldChart.interaction("element-active");
|
|
ldChart.render();
|
|
return ldChart;
|
|
}, 100);
|
|
}
|
|
/**
|
|
* 环形图
|
|
*
|
|
*
|
|
*
|
|
*/
|
|
export function annulusChart (dom, data) {
|
|
const chart = new Chart({
|
|
container: dom,
|
|
autoFit: true,
|
|
padding: [10, 10, 10],
|
|
});
|
|
chart.data(data);
|
|
chart.scale("percent", {
|
|
formatter: (val) => {
|
|
val = val * 100 + "%";
|
|
return val;
|
|
},
|
|
});
|
|
chart.coordinate("theta", {
|
|
radius: 0.75,
|
|
innerRadius: 0.6,
|
|
});
|
|
chart.tooltip({
|
|
showTitle: false,
|
|
showMarkers: false,
|
|
itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>',
|
|
});
|
|
chart.legend(false);
|
|
// 辅助文本
|
|
chart
|
|
.annotation()
|
|
.text({
|
|
position: ["50%", "60%"],
|
|
content: "职位总数",
|
|
style: {
|
|
fontSize: 12,
|
|
fill: "#8c8c8c",
|
|
textAlign: "center",
|
|
},
|
|
offsetY: -20,
|
|
})
|
|
.text({
|
|
position: ["51%", "50%"],
|
|
content: "200",
|
|
style: {
|
|
fontSize: 12,
|
|
fill: "#8c8c8c",
|
|
textAlign: "center",
|
|
},
|
|
offsetX: -10,
|
|
offsetY: 20,
|
|
})
|
|
.text({
|
|
position: ["46%", "50%"],
|
|
content: "%",
|
|
style: {
|
|
fontSize: 12,
|
|
fill: "#8c8c8c",
|
|
textAlign: "center",
|
|
},
|
|
offsetY: 20,
|
|
offsetX: 20,
|
|
});
|
|
chart
|
|
.interval()
|
|
.adjust("stack")
|
|
.position("percent")
|
|
.color("item")
|
|
.label("percent", (percent) => {
|
|
return {
|
|
content: (data) => {
|
|
return `${data.item}: ${percent * 100}%`;
|
|
},
|
|
};
|
|
})
|
|
.tooltip("item*percent", (item, percent) => {
|
|
percent = percent * 100 + "%";
|
|
return {
|
|
name: item,
|
|
value: percent,
|
|
};
|
|
});
|
|
|
|
chart.interaction("element-active");
|
|
|
|
chart.render();
|
|
}
|
|
/**
|
|
* 折线图无坐标轴版
|
|
*
|
|
*
|
|
*
|
|
*
|
|
*/
|
|
export function brokenLineChart (dom, data) {
|
|
const chart = new Chart({
|
|
container: dom,
|
|
autoFit: true,
|
|
padding: [10, 10, 10],
|
|
});
|
|
|
|
|
|
|
|
|
|
chart.data(data);
|
|
chart.legend(false);
|
|
chart.axis(false);
|
|
chart.scale({
|
|
month: {
|
|
range: [0, 1],
|
|
},
|
|
temperature: {
|
|
nice: true,
|
|
alias: 'value',
|
|
},
|
|
});
|
|
|
|
// chart.tooltip(false);
|
|
chart.tooltip({
|
|
showCrosshairs: false, // 是否显示十字定位线
|
|
// shared: true,
|
|
showTitle: true,
|
|
showMarkers: false,
|
|
// title: (title, datum) => datum['value'],
|
|
// itemTpl: '{month}{temperature}<li style="margin-bottom:4px;list-style-type:none;padding: 0;">' + '<span style="background-color:{color};" class="g2-tooltip-marker"></span>' + "{month}<br/>" + '<span style="padding-left: 16px;line-height: 16px;">浏览人数：{temperature}</span><br/>' + "</li>",
|
|
});
|
|
|
|
// chart.axis("temperature", {
|
|
// label: {
|
|
// formatter: (val) => {
|
|
// return val + " °C";
|
|
// },
|
|
// },
|
|
// });
|
|
|
|
chart // 设置折线
|
|
.line()
|
|
.position("month*temperature")
|
|
.color("#9C66E5")
|
|
.shape("smooth").animate({
|
|
appear: {
|
|
// 初始入场动画配置
|
|
delay: 0,
|
|
duration: 200
|
|
},
|
|
enter: {
|
|
// 更新时出现动画配置
|
|
delay: 0,
|
|
duration: 200
|
|
},
|
|
leave: {
|
|
// 更新时销毁动画配置
|
|
delay: 0,
|
|
duration: 200
|
|
},
|
|
update: {
|
|
// 更新时改变动画配置
|
|
delay: 0,
|
|
duration: 200
|
|
}
|
|
});
|
|
|
|
chart.area().position("month*temperature").shape("smooth").color("l(270) 0:#ffffff 0.6:#9C66E5 0.8:#9C66E5 1 :#bb7ff3").animate({
|
|
appear: {
|
|
// 初始入场动画配置
|
|
delay: 0,
|
|
duration: 200
|
|
},
|
|
enter: {
|
|
// 更新时出现动画配置
|
|
delay: 0,
|
|
duration: 200
|
|
},
|
|
leave: {
|
|
// 更新时销毁动画配置
|
|
delay: 0,
|
|
duration: 200
|
|
},
|
|
update: {
|
|
// 更新时改变动画配置
|
|
delay: 0,
|
|
duration: 200
|
|
}
|
|
}); // 设置色块区域
|
|
|
|
// chart // 设置折线节点
|
|
// .point()
|
|
// .position('month*temperature')
|
|
// .color('city')
|
|
// .shape('circle');
|
|
|
|
chart.render();
|
|
return chart;
|
|
}
|
|
/**
|
|
* 柱状图
|
|
*
|
|
*
|
|
*/
|
|
export function histogramChart (dom, data) {
|
|
const chart = new Chart({
|
|
container: dom,
|
|
autoFit: true,
|
|
padding: [10, 30, 20],
|
|
});
|
|
|
|
chart.data(data);
|
|
chart.scale("sales", {
|
|
nice: true,
|
|
});
|
|
|
|
chart.tooltip({
|
|
showMarkers: false,
|
|
});
|
|
chart.interaction("active-region");
|
|
|
|
chart.interval().position("year*sales");
|
|
|
|
chart.render();
|
|
}
|
|
/**
|
|
* 折线图有坐标轴版
|
|
*
|
|
*
|
|
*/
|
|
export function brokenLineChartWithAxis (dom, data, linecolor) {
|
|
const chart = new Chart({
|
|
container: dom,
|
|
autoFit: true,
|
|
padding: [30, 30, 30, 30],
|
|
});
|
|
|
|
chart.data(data);
|
|
chart.legend(false);
|
|
chart.scale({
|
|
month: {
|
|
range: [0, 1],
|
|
},
|
|
temperature: {
|
|
nice: true,
|
|
},
|
|
});
|
|
|
|
chart.tooltip({
|
|
showCrosshairs: true,
|
|
shared: true,
|
|
});
|
|
|
|
chart.axis("temperature", {
|
|
label: {
|
|
formatter: (val) => {
|
|
return val;
|
|
},
|
|
},
|
|
});
|
|
|
|
chart.area().position("month*temperature").color(`l(270) 0:#ffffff 0.5:${linecolor} `).shape("smooth");
|
|
chart.line().position("month*temperature").color(`${linecolor}`).shape("smooth");
|
|
|
|
chart.point().position("month*temperature").color(`${linecolor}`).shape("circle");
|
|
|
|
chart.render();
|
|
|
|
return chart;
|
|
}
|