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); ...@@ -25,16 +25,6 @@ const plotInstance = ref(null);
const generateChart = (data) => { const generateChart = (data) => {
const ret = options.value; const ret = options.value;
// console.log(ret); // 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({ plotInstance.value = Plot.plot({
width: ret.chart_width || 800, width: ret.chart_width || 800,
height: ret.chart_height || 700, height: ret.chart_height || 700,
...@@ -43,7 +33,8 @@ const generateChart = (data) => { ...@@ -43,7 +33,8 @@ const generateChart = (data) => {
marginBottom: ret.margin_bottom || 60, marginBottom: ret.margin_bottom || 60,
marginLeft: ret.margin_left || 60, marginLeft: ret.margin_left || 60,
color: { color: {
legend: ret.show_legend legend: ret.show_legend,
range: ret.data_color_list || []
}, },
x: { x: {
grid: ret.show_x_gridLine, grid: ret.show_x_gridLine,
......
src/components/MsDimplot/components/chart.vue
浏览文件 @ 0aeece05
...@@ -43,7 +43,8 @@ const generateChart = (data) => { ...@@ -43,7 +43,8 @@ const generateChart = (data) => {
marginBottom: ret.margin_bottom || 60, marginBottom: ret.margin_bottom || 60,
marginLeft: ret.margin_left || 60, marginLeft: ret.margin_left || 60,
color: { color: {
legend: ret.show_legend legend: ret.show_legend,
range: ret.data_color_list || []
}, },
// x: { // x: {
// grid: ret.show_x_gridLine, // grid: ret.show_x_gridLine,
...@@ -54,7 +55,6 @@ const generateChart = (data) => { ...@@ -54,7 +55,6 @@ const generateChart = (data) => {
// domain: [-100, 100] // domain: [-100, 100]
// }, // },
marks: [ marks: [
// Plot.frame(),
Plot.ruleX([0]), Plot.ruleX([0]),
Plot.ruleY([0]), Plot.ruleY([0]),
Plot.axisX({ Plot.axisX({
......
src/components/Test/index.vue
浏览文件 @ 0aeece05
...@@ -10,152 +10,361 @@ const chartRef = ref(null); ...@@ -10,152 +10,361 @@ const chartRef = ref(null);
const data = [ const data = [
{ {
name: 'a', hour: 0,
value: 199 fruit_trip: 0.21,
protein_trip: 0.08,
fmcg_trip: 0.08,
fastfoods: 0.09,
caterings: 0.12,
weighted: 0.1
}, },
{ {
name: 'b', hour: 1,
value: 205 fruit_trip: 0.12,
protein_trip: 0.32,
fmcg_trip: 0.08,
fastfoods: 0.09,
caterings: 0.12,
weighted: 0.1
}, },
{ {
name: 'c', hour: 2,
value: 206 fruit_trip: 0.11,
protein_trip: 0.21,
fmcg_trip: 0.02,
fastfoods: 0.1,
caterings: 0.11,
weighted: 0.2
}, },
{ {
name: 'd', hour: 3,
value: 213 fruit_trip: 0.12,
protein_trip: 0.32,
fmcg_trip: 0.08,
fastfoods: 0.09,
caterings: 0.12,
weighted: 0.1
}, },
{ {
name: 'e', hour: 4,
value: 226 fruit_trip: 0.08,
protein_trip: 0.21,
fmcg_trip: 0.12,
fastfoods: 0.08,
caterings: 0.21,
weighted: 0.02
}, },
{ {
name: 'f', hour: 5,
value: 216 fruit_trip: 0.12,
protein_trip: 0.32,
fmcg_trip: 0.08,
fastfoods: 0.09,
caterings: 0.12,
weighted: 0.1
}, },
{ {
name: 'g', hour: 6,
value: 211 fruit_trip: 0.08,
protein_trip: 0.21,
fmcg_trip: 0.12,
fastfoods: 0.08,
caterings: 0.21,
weighted: 0.02
}, },
{ {
name: 'h', hour: 7,
value: 198 fruit_trip: 0.01,
protein_trip: 0.04,
fmcg_trip: 0.21,
fastfoods: 0.01,
caterings: 0.2,
weighted: 0.02
}, },
{ {
name: 'i', hour: 8,
value: 207 fruit_trip: 0.08,
protein_trip: 0.21,
fmcg_trip: 0.12,
fastfoods: 0.08,
caterings: 0.21,
weighted: 0.02
}, },
{ {
name: 'j', hour: 9,
value: 213 fruit_trip: 0.01,
protein_trip: 0.12,
fmcg_trip: 0.21,
fastfoods: 0.01,
caterings: 0.09,
weighted: 0.01
}, },
{ {
name: 'k', hour: 10,
value: 225 fruit_trip: 0.09,
protein_trip: 0.12,
fmcg_trip: 0.21,
fastfoods: 0.01,
caterings: 0.21,
weighted: 0.07
}, },
{ {
name: 'l', hour: 11,
value: 210 fruit_trip: 0.113,
protein_trip: 0.102,
fmcg_trip: 0.067,
fastfoods: 0.008,
caterings: 0.036,
weighted: 0.057
}, },
{ {
name: 'm', hour: 12,
value: 184 fruit_trip: 0.154,
protein_trip: 0.15,
fmcg_trip: 0.09,
fastfoods: 0.057,
caterings: 0.153,
weighted: 0.108
}, },
{ {
name: 'n', hour: 13,
value: 145 fruit_trip: 0.17,
protein_trip: 0.116,
fmcg_trip: 0.096,
fastfoods: 0.097,
caterings: 0.172,
weighted: 0.121
}, },
{ {
name: '0', hour: 14,
value: 105 fruit_trip: 0.119,
protein_trip: 0.095,
fmcg_trip: 0.088,
fastfoods: 0.092,
caterings: 0.162,
weighted: 0.107
}, },
{ {
name: 'p', hour: 15,
value: 77 fruit_trip: 0.1,
protein_trip: 0.081,
fmcg_trip: 0.086,
fastfoods: 0.067,
caterings: 0.115,
weighted: 0.089
}, },
{ {
name: 'q', hour: 16,
value: 58 fruit_trip: 0.093,
protein_trip: 0.087,
fmcg_trip: 0.076,
fastfoods: 0.048,
caterings: 0.057,
weighted: 0.069
}, },
{ {
name: 'r', hour: 17,
value: 59 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 generateChart = () => {
const width = 640; let width = 500;
// const marginTop = 20; let height = Math.min(width, 500);
// const marginRight = 20;
// const marginBottom = 30; const color = (max, range_count, d) => {
// const marginLeft = 40; return d3
.scaleQuantize()
const height = Math.min(width, 500); .domain([0, max])
const radius = Math.min(width, height) / 2; .range(d3.merge([[d3.color('steelblue')], d3.quantize((t) => d3.interpolateRainbow(t), range_count - 1).reverse()]));
};
const arc = d3
.arc() const arc = (index, total) => {
.innerRadius(radius * 0.67) const off = 1;
.outerRadius(radius - 1); const radius = (i) => ((Math.min(width, height) / 2) * (i + off + 1)) / (total + off + 3);
const pie = d3 return d3
.pie() .arc()
.padAngle(1 / radius) .innerRadius(radius(index - 1) + 5)
.sort(null) .outerRadius(radius(index));
.value((d) => d.value); };
const color = d3 const arcTotal = (index, total) => {
.scaleOrdinal() const off = 1;
.domain(data.map((d) => d.name)) const radius = (i) => ((Math.min(width, height) / 2) * (i + off + 1)) / (total + off + 3);
.range(d3.quantize((t) => d3.interpolateSpectral(t * 0.8 + 0.1), data.length).reverse());
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 const svg = d3
.create('svg') .create('svg')
.attr('width', width) .attr('width', width)
.attr('height', height) .attr('height', height)
.attr('viewBox', [-width / 2, -height / 2, width, height]) .attr('viewBox', [-width / 2, -height / 2, width, height]);
.attr('style', 'max-width: 100%; height: auto;');
for (var i = 0; i < cleaned.length; i++) {
svg.append('g') let set = new Set(cleaned[i].data.map((f) => f.data.value));
.selectAll() let distinct_values = set.size;
.data(pie(data))
.join('path') let fcolors = color(d3.max(cleaned[i].data.map((f) => f.data.value)), distinct_values);
.attr('fill', (d) => color(d.data.name))
.attr('d', arc) svg.append('g')
.append('title') .attr('stroke', 'none')
.text((d) => `${d.data.name}: ${d.data.value.toLocaleString()}`); .attr('stroke-width', 1)
.attr('stroke-linejoin', 'round')
svg.append('g') .selectAll('path' + i)
.attr('font-family', 'sans-serif') .data(cleaned[i].data.slice(0, 6))
.attr('font-size', 12) .attr('id', function (d, i) {
.attr('text-anchor', 'middle') return 'catArc_' + i;
.selectAll() })
.data(pie(data)) .join('path')
.join('text') .attr('fill', (d) => fcolors(d.data.value))
.attr('transform', (d) => `translate(${arc.centroid(d)})`) // .attr('d', i == cleaned.length - 1 ? arcTotal(i, cleaned.length) : arc(i, cleaned.length));
.call((text) => .attr('d', arcCustom(i, cleaned.length))
text .attr('transform', 'rotate(70)');
.append('tspan') }
.attr('y', '-0.4em')
.attr('font-weight', 'bold') for (var i = 0; i < cleaned.length; i++) {
.text((d) => d.data.name) let set = new Set(cleaned[i].data.map((f) => f.data.value));
) let distinct_values = set.size;
.call((text) =>
text let fcolors = color(d3.max(cleaned[i].data.map((f) => f.data.value)), distinct_values);
.filter((d) => d.endAngle - d.startAngle > 0.25)
.append('tspan') svg.append('g')
.attr('x', 0) .attr('stroke', 'none')
.attr('y', '0.7em') .attr('stroke-width', 1)
.attr('fill-opacity', 0.7) .attr('stroke-linejoin', 'round')
.text((d) => d.data.value.toLocaleString('en-US')) .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. // Append the SVG element.
chartRef.value.append(svg.node()); chartRef.value.append(svg.node());
}; };
onMounted(() => { onMounted(() => {
// generateChart(); generateChart();
}); });
</script> </script>
......
src/views/home/index.vue
浏览文件 @ 0aeece05
...@@ -18,7 +18,7 @@ import BeeColonyDiagram from '../../components/BeeColonyDiagram/index.vue'; ...@@ -18,7 +18,7 @@ import BeeColonyDiagram from '../../components/BeeColonyDiagram/index.vue';
import CorrelationAnalysis from '../../components/CorrelationAnalysis/index.vue'; import CorrelationAnalysis from '../../components/CorrelationAnalysis/index.vue';
import ClusterHeatmap from '../../components/ClusterHeatmap/index.vue'; import ClusterHeatmap from '../../components/ClusterHeatmap/index.vue';
const chartCurrent = ref(6); const chartCurrent = ref(0);
const chartList = shallowRef([ const chartList = shallowRef([
{ title: '线性拟合图', value: 1, comName: LinearFitting }, { title: '线性拟合图', value: 1, comName: LinearFitting },
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论