Skip to content

C
chart-project
提交 0aeece05 authored 作者: 祖铭松's avatar 祖铭松
浏览文件
操作

feat: update

上级 b18317d5
隐藏空白字符变更
内嵌 并排
正在显示 包含 311 行增加 和 111 行删除
src/components/BeeColonyDiagram/components/chart.vue
浏览文件 @ 0aeece05
......@@ -25,16 +25,6 @@ const plotInstance = ref(null);
const generateChart = (data) => {
const ret = options.value;
// console.log(ret);
// 点，线，阴影颜色设置
let point_color = '#FF5733';
let line_color = '#39FDBE';
let shadow_color = '#D6D6D6';
if (ret.data_color_list?.length) {
point_color = ret.data_color_list[0];
line_color = ret.data_color_list[1];
shadow_color = ret.data_color_list[2];
}
plotInstance.value = Plot.plot({
width: ret.chart_width || 800,
height: ret.chart_height || 700,
......@@ -43,7 +33,8 @@ const generateChart = (data) => {
marginBottom: ret.margin_bottom || 60,
marginLeft: ret.margin_left || 60,
color: {
legend: ret.show_legend
legend: ret.show_legend,
range: ret.data_color_list || []
},
x: {
grid: ret.show_x_gridLine,
......
src/components/MsDimplot/components/chart.vue
浏览文件 @ 0aeece05
......@@ -43,7 +43,8 @@ const generateChart = (data) => {
marginBottom: ret.margin_bottom || 60,
marginLeft: ret.margin_left || 60,
color: {
legend: ret.show_legend
legend: ret.show_legend,
range: ret.data_color_list || []
},
// x: {
// grid: ret.show_x_gridLine,
......@@ -54,7 +55,6 @@ const generateChart = (data) => {
// domain: [-100, 100]
// },
marks: [
// Plot.frame(),
Plot.ruleX([0]),
Plot.ruleY([0]),
Plot.axisX({
......
src/components/Test/index.vue
浏览文件 @ 0aeece05
......@@ -10,152 +10,361 @@ const chartRef = ref(null);
const data = [
{
name: 'a',
value: 199
hour: 0,
fruit_trip: 0.21,
protein_trip: 0.08,
fmcg_trip: 0.08,
fastfoods: 0.09,
caterings: 0.12,
weighted: 0.1
},
{
name: 'b',
value: 205
hour: 1,
fruit_trip: 0.12,
protein_trip: 0.32,
fmcg_trip: 0.08,
fastfoods: 0.09,
caterings: 0.12,
weighted: 0.1
},
{
name: 'c',
value: 206
hour: 2,
fruit_trip: 0.11,
protein_trip: 0.21,
fmcg_trip: 0.02,
fastfoods: 0.1,
caterings: 0.11,
weighted: 0.2
},
{
name: 'd',
value: 213
hour: 3,
fruit_trip: 0.12,
protein_trip: 0.32,
fmcg_trip: 0.08,
fastfoods: 0.09,
caterings: 0.12,
weighted: 0.1
},
{
name: 'e',
value: 226
hour: 4,
fruit_trip: 0.08,
protein_trip: 0.21,
fmcg_trip: 0.12,
fastfoods: 0.08,
caterings: 0.21,
weighted: 0.02
},
{
name: 'f',
value: 216
hour: 5,
fruit_trip: 0.12,
protein_trip: 0.32,
fmcg_trip: 0.08,
fastfoods: 0.09,
caterings: 0.12,
weighted: 0.1
},
{
name: 'g',
value: 211
hour: 6,
fruit_trip: 0.08,
protein_trip: 0.21,
fmcg_trip: 0.12,
fastfoods: 0.08,
caterings: 0.21,
weighted: 0.02
},
{
name: 'h',
value: 198
hour: 7,
fruit_trip: 0.01,
protein_trip: 0.04,
fmcg_trip: 0.21,
fastfoods: 0.01,
caterings: 0.2,
weighted: 0.02
},
{
name: 'i',
value: 207
hour: 8,
fruit_trip: 0.08,
protein_trip: 0.21,
fmcg_trip: 0.12,
fastfoods: 0.08,
caterings: 0.21,
weighted: 0.02
},
{
name: 'j',
value: 213
hour: 9,
fruit_trip: 0.01,
protein_trip: 0.12,
fmcg_trip: 0.21,
fastfoods: 0.01,
caterings: 0.09,
weighted: 0.01
},
{
name: 'k',
value: 225
hour: 10,
fruit_trip: 0.09,
protein_trip: 0.12,
fmcg_trip: 0.21,
fastfoods: 0.01,
caterings: 0.21,
weighted: 0.07
},
{
name: 'l',
value: 210
hour: 11,
fruit_trip: 0.113,
protein_trip: 0.102,
fmcg_trip: 0.067,
fastfoods: 0.008,
caterings: 0.036,
weighted: 0.057
},
{
name: 'm',
value: 184
hour: 12,
fruit_trip: 0.154,
protein_trip: 0.15,
fmcg_trip: 0.09,
fastfoods: 0.057,
caterings: 0.153,
weighted: 0.108
},
{
name: 'n',
value: 145
hour: 13,
fruit_trip: 0.17,
protein_trip: 0.116,
fmcg_trip: 0.096,
fastfoods: 0.097,
caterings: 0.172,
weighted: 0.121
},
{
name: '0',
value: 105
hour: 14,
fruit_trip: 0.119,
protein_trip: 0.095,
fmcg_trip: 0.088,
fastfoods: 0.092,
caterings: 0.162,
weighted: 0.107
},
{
name: 'p',
value: 77
hour: 15,
fruit_trip: 0.1,
protein_trip: 0.081,
fmcg_trip: 0.086,
fastfoods: 0.067,
caterings: 0.115,
weighted: 0.089
},
{
name: 'q',
value: 58
hour: 16,
fruit_trip: 0.093,
protein_trip: 0.087,
fmcg_trip: 0.076,
fastfoods: 0.048,
caterings: 0.057,
weighted: 0.069
},
{
name: 'r',
value: 59
hour: 17,
fruit_trip: 0.077,
protein_trip: 0.087,
fmcg_trip: 0.084,
fastfoods: 0.038,
caterings: 0.032,
weighted: 0.064
},
{
hour: 18,
fruit_trip: 0.087,
protein_trip: 0.094,
fmcg_trip: 0.088,
fastfoods: 0.038,
caterings: 0.025,
weighted: 0.066
},
{
hour: 19,
fruit_trip: 0.058,
protein_trip: 0.086,
fmcg_trip: 0.085,
fastfoods: 0.086,
caterings: 0.049,
weighted: 0.075
},
{
hour: 20,
fruit_trip: 0.026,
protein_trip: 0.078,
fmcg_trip: 0.092,
fastfoods: 0.157,
caterings: 0.064,
weighted: 0.091
},
{
hour: 21,
fruit_trip: 0,
protein_trip: 0.02,
fmcg_trip: 0.085,
fastfoods: 0.169,
caterings: 0.067,
weighted: 0.083
},
{
hour: 22,
fruit_trip: 0.003,
protein_trip: 0.003,
fmcg_trip: 0.05,
fastfoods: 0.11,
caterings: 0.054,
weighted: 0.053
},
{
hour: 23,
fruit_trip: 0,
protein_trip: 0.001,
fmcg_trip: 0.015,
fastfoods: 0.035,
caterings: 0.015,
weighted: 0.016
}
];
// 生成图表
const generateChart = () => {
const width = 640;
// const marginTop = 20;
// const marginRight = 20;
// const marginBottom = 30;
// const marginLeft = 40;
const height = Math.min(width, 500);
const radius = Math.min(width, height) / 2;
const arc = d3
.arc()
.innerRadius(radius * 0.67)
.outerRadius(radius - 1);
const pie = d3
.pie()
.padAngle(1 / radius)
.sort(null)
.value((d) => d.value);
const color = d3
.scaleOrdinal()
.domain(data.map((d) => d.name))
.range(d3.quantize((t) => d3.interpolateSpectral(t * 0.8 + 0.1), data.length).reverse());
let width = 500;
let height = Math.min(width, 500);
const color = (max, range_count, d) => {
return d3
.scaleQuantize()
.domain([0, max])
.range(d3.merge([[d3.color('steelblue')], d3.quantize((t) => d3.interpolateRainbow(t), range_count - 1).reverse()]));
};
const arc = (index, total) => {
const off = 1;
const radius = (i) => ((Math.min(width, height) / 2) * (i + off + 1)) / (total + off + 3);
return d3
.arc()
.innerRadius(radius(index - 1) + 5)
.outerRadius(radius(index));
};
const arcTotal = (index, total) => {
const off = 1;
const radius = (i) => ((Math.min(width, height) / 2) * (i + off + 1)) / (total + off + 3);
return d3
.arc()
.innerRadius(radius(index - 1) + 20)
.outerRadius(radius(index + 2));
};
const arcCustom = (index, total) => {
const off = 8;
const radius = (i) => ((Math.min(width, height) / 2) * (i + off + 1)) / (total + off + 3);
return d3
.arc()
.innerRadius(radius(index - 1))
.outerRadius(radius(index));
};
const pie = d3.pie().sort(null).value(1);
let categories = Object.keys(data[0]).splice(1);
let cleaned = categories.map((c) => {
return {
name: c,
data: pie(
data
.filter((d) => !!d.hour)
.map((d) => {
return {
hour: d.hour,
value: d[c]
};
})
)
};
});
const svg = d3
.create('svg')
.attr('width', width)
.attr('height', height)
.attr('viewBox', [-width / 2, -height / 2, width, height])
.attr('style', 'max-width: 100%; height: auto;');
svg.append('g')
.selectAll()
.data(pie(data))
.join('path')
.attr('fill', (d) => color(d.data.name))
.attr('d', arc)
.append('title')
.text((d) => `${d.data.name}: ${d.data.value.toLocaleString()}`);
svg.append('g')
.attr('font-family', 'sans-serif')
.attr('font-size', 12)
.attr('text-anchor', 'middle')
.selectAll()
.data(pie(data))
.join('text')
.attr('transform', (d) => `translate(${arc.centroid(d)})`)
.call((text) =>
text
.append('tspan')
.attr('y', '-0.4em')
.attr('font-weight', 'bold')
.text((d) => d.data.name)
)
.call((text) =>
text
.filter((d) => d.endAngle - d.startAngle > 0.25)
.append('tspan')
.attr('x', 0)
.attr('y', '0.7em')
.attr('fill-opacity', 0.7)
.text((d) => d.data.value.toLocaleString('en-US'))
);
.attr('viewBox', [-width / 2, -height / 2, width, height]);
for (var i = 0; i < cleaned.length; i++) {
let set = new Set(cleaned[i].data.map((f) => f.data.value));
let distinct_values = set.size;
let fcolors = color(d3.max(cleaned[i].data.map((f) => f.data.value)), distinct_values);
svg.append('g')
.attr('stroke', 'none')
.attr('stroke-width', 1)
.attr('stroke-linejoin', 'round')
.selectAll('path' + i)
.data(cleaned[i].data.slice(0, 6))
.attr('id', function (d, i) {
return 'catArc_' + i;
})
.join('path')
.attr('fill', (d) => fcolors(d.data.value))
// .attr('d', i == cleaned.length - 1 ? arcTotal(i, cleaned.length) : arc(i, cleaned.length));
.attr('d', arcCustom(i, cleaned.length))
.attr('transform', 'rotate(70)');
}
for (var i = 0; i < cleaned.length; i++) {
let set = new Set(cleaned[i].data.map((f) => f.data.value));
let distinct_values = set.size;
let fcolors = color(d3.max(cleaned[i].data.map((f) => f.data.value)), distinct_values);
svg.append('g')
.attr('stroke', 'none')
.attr('stroke-width', 1)
.attr('stroke-linejoin', 'round')
.selectAll('path' + i)
.data(cleaned[i].data.slice(6, 12))
// .attr('id', function (d, i) {
// return 'catArc_' + i;
// })
.join('path')
.attr('fill', (d) => fcolors(d.data.value))
// .attr('d', i == cleaned.length - 1 ? arcTotal(i, cleaned.length) : arc(i, cleaned.length));
.attr('d', arcCustom(i, cleaned.length))
.attr('transform', 'rotate(95)');
}
for (var i = 0; i < cleaned.length; i++) {
let set = new Set(cleaned[i].data.map((f) => f.data.value));
let distinct_values = set.size;
let fcolors = color(d3.max(cleaned[i].data.map((f) => f.data.value)), distinct_values);
svg.append('g')
.attr('stroke', 'none')
.attr('stroke-width', 1)
.attr('stroke-linejoin', 'round')
.selectAll('path' + i)
.data(cleaned[i].data.slice(12, 18))
// .attr('id', function (d, i) {
// return 'catArc_' + i;
// })
.join('path')
.attr('fill', (d) => fcolors(d.data.value))
// .attr('d', i == cleaned.length - 1 ? arcTotal(i, cleaned.length) : arc(i, cleaned.length));
.attr('d', arcCustom(i, cleaned.length))
.attr('transform', 'rotate(125)');
}
// Append the SVG element.
chartRef.value.append(svg.node());
};
onMounted(() => {
// generateChart();
generateChart();
});
</script>
......
src/views/home/index.vue
浏览文件 @ 0aeece05
......@@ -18,7 +18,7 @@ import BeeColonyDiagram from '../../components/BeeColonyDiagram/index.vue';
import CorrelationAnalysis from '../../components/CorrelationAnalysis/index.vue';
import ClusterHeatmap from '../../components/ClusterHeatmap/index.vue';
const chartCurrent = ref(6);
const chartCurrent = ref(0);
const chartList = shallowRef([
{ title: '线性拟合图', value: 1, comName: LinearFitting },
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论