diff --git a/frontend/src/icons/svg/bar-horizontal.svg b/frontend/src/icons/svg/bar-horizontal.svg new file mode 100644 index 0000000000..6ade56b3c8 --- /dev/null +++ b/frontend/src/icons/svg/bar-horizontal.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/icons/svg/bar-stack-horizontal.svg b/frontend/src/icons/svg/bar-stack-horizontal.svg new file mode 100644 index 0000000000..9a78910ab6 --- /dev/null +++ b/frontend/src/icons/svg/bar-stack-horizontal.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/icons/svg/bar-stack.svg b/frontend/src/icons/svg/bar-stack.svg new file mode 100644 index 0000000000..90beda11f0 --- /dev/null +++ b/frontend/src/icons/svg/bar-stack.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/icons/svg/bar.svg b/frontend/src/icons/svg/bar.svg new file mode 100644 index 0000000000..2136e79aad --- /dev/null +++ b/frontend/src/icons/svg/bar.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/icons/svg/funnel.svg b/frontend/src/icons/svg/funnel.svg new file mode 100644 index 0000000000..89190945f5 --- /dev/null +++ b/frontend/src/icons/svg/funnel.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/icons/svg/line.svg b/frontend/src/icons/svg/line.svg new file mode 100644 index 0000000000..c72c676e2b --- /dev/null +++ b/frontend/src/icons/svg/line.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/icons/svg/pie.svg b/frontend/src/icons/svg/pie.svg new file mode 100644 index 0000000000..7d7c52824e --- /dev/null +++ b/frontend/src/icons/svg/pie.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index 46ef617959..96afef2bb0 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -614,7 +614,8 @@ export default { color_gentle: '柔和', color_elegant: '淡雅', color_technology: '科技', - color_simple: '简洁' + color_simple: '简洁', + not_alpha: '不透明度' }, dataset: { datalist: '数据集', diff --git a/frontend/src/views/chart/chart/bar/bar.js b/frontend/src/views/chart/chart/bar/bar.js new file mode 100644 index 0000000000..1200b1d3a3 --- /dev/null +++ b/frontend/src/views/chart/chart/bar/bar.js @@ -0,0 +1,81 @@ +import { hexColorToRGBA } from '../util.js' + +export function baseBarOption(chart_option, chart) { + // 处理shape attr + let customAttr = {} + if (chart.customAttr) { + customAttr = JSON.parse(chart.customAttr) + if (customAttr.color) { + chart_option.color = customAttr.color.colors + } + } + // 处理data + if (chart.data) { + chart_option.title.text = chart.title + chart_option.xAxis.data = chart.data.x + for (let i = 0; i < chart.data.series.length; i++) { + const y = chart.data.series[i] + y.itemStyle = { + color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha) + } + y.type = 'bar' + chart_option.legend.data.push(y.name) + chart_option.series.push(y) + } + } + // console.log(chart_option); + return chart_option +} + +export function stackBarOption(chart_option, chart) { + baseBarOption(chart_option, chart) + + // ext + chart_option.series.forEach(function(s) { + s.stack = 'stack' + s.emphasis = { + focus: 'series' + } + }) + return chart_option +} + +export function horizontalBarOption(chart_option, chart) { + // 处理shape attr + let customAttr = {} + if (chart.customAttr) { + customAttr = JSON.parse(chart.customAttr) + if (customAttr.color) { + chart_option.color = customAttr.color.colors + } + } + // 处理data + if (chart.data) { + chart_option.title.text = chart.title + chart_option.yAxis.data = chart.data.x + for (let i = 0; i < chart.data.series.length; i++) { + const y = chart.data.series[i] + y.itemStyle = { + color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha) + } + y.type = 'bar' + chart_option.legend.data.push(y.name) + chart_option.series.push(y) + } + } + // console.log(chart_option); + return chart_option +} + +export function horizontalStackBarOption(chart_option, chart) { + horizontalBarOption(chart_option, chart) + + // ext + chart_option.series.forEach(function(s) { + s.stack = 'stack' + s.emphasis = { + focus: 'series' + } + }) + return chart_option +} diff --git a/frontend/src/views/chart/chart/bar/baseBar.js b/frontend/src/views/chart/chart/bar/baseBar.js deleted file mode 100644 index 69788002e1..0000000000 --- a/frontend/src/views/chart/chart/bar/baseBar.js +++ /dev/null @@ -1,21 +0,0 @@ -export function baseBarOption(chart_option, chart) { -// 处理data - if (chart.data) { - chart_option.title.text = chart.title - chart_option.xAxis.data = chart.data.x - chart.data.series.forEach(function(y) { - chart_option.legend.data.push(y.name) - chart_option.series.push(y) - }) - } - // console.log(chart_option); - // 处理shape attr - if (chart.customAttr) { - const customAttr = JSON.parse(chart.customAttr) - if (customAttr.color) { - chart_option.color = customAttr.color.colors - } - } - return chart_option -} - diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js index ee38bc088f..53142e5580 100644 --- a/frontend/src/views/chart/chart/chart.js +++ b/frontend/src/views/chart/chart/chart.js @@ -1,6 +1,7 @@ export const DEFAULT_COLOR_CASE = { value: 'default', - colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'] + colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'], + alpha: 100 } export const BASE_BAR = { title: { @@ -18,6 +19,22 @@ export const BASE_BAR = { }, series: [] } +export const HORIZONTAL_BAR = { + title: { + text: '' + }, + tooltip: {}, + legend: { + data: [] + }, + xAxis: { + type: 'value' + }, + yAxis: { + data: [] + }, + series: [] +} export const BASE_LINE = { title: { @@ -36,6 +53,78 @@ export const BASE_LINE = { series: [] } -export default { - BASE_BAR, BASE_LINE, DEFAULT_COLOR_CASE +export const BASE_PIE = { + title: { + text: '' + }, + tooltip: { + trigger: 'item', + formatter: '{a}
{b}: {c} ({d}%)' + }, + legend: {}, + series: [ + { + name: '', + type: 'pie', + radius: ['0%', '60%'], + avoidLabelOverlap: false, + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + }, + data: [] + } + ] +} + +export const BASE_FUNNEL = { + title: { + text: '' + }, + tooltip: { + trigger: 'item' + }, + legend: { + // data: [] + }, + series: [ + { + name: '', + type: 'funnel', + left: '10%', + top: 60, + bottom: 60, + width: '80%', + min: 0, + max: 100, + minSize: '0%', + maxSize: '100%', + sort: 'descending', + gap: 1, + // label: { + // show: true, + // position: 'inside' + // }, + labelLine: { + length: 10, + lineStyle: { + width: 1, + type: 'solid' + } + }, + itemStyle: { + borderColor: '#fff', + borderWidth: 1 + }, + emphasis: { + label: { + fontSize: 20 + } + }, + data: [] + } + ] } diff --git a/frontend/src/views/chart/chart/funnel/funnel.js b/frontend/src/views/chart/chart/funnel/funnel.js new file mode 100644 index 0000000000..639f58c36a --- /dev/null +++ b/frontend/src/views/chart/chart/funnel/funnel.js @@ -0,0 +1,34 @@ +import { hexColorToRGBA } from '@/views/chart/chart/util' + +export function baseFunnelOption(chart_option, chart) { + // 处理shape attr + let customAttr = {} + if (chart.customAttr) { + customAttr = JSON.parse(chart.customAttr) + if (customAttr.color) { + chart_option.color = customAttr.color.colors + } + } + // 处理data + if (chart.data) { + chart_option.title.text = chart.title + if (chart.data.series.length > 0) { + chart_option.series[0].name = chart.data.series[0].name + const valueArr = chart.data.series[0].data + for (let i = 0; i < valueArr.length; i++) { + const y = { + name: chart.data.x[i], + value: valueArr[i] + } + y.itemStyle = { + color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha) + } + y.type = 'funnel' + chart_option.series[0].data.push(y) + } + } + } + // console.log(chart_option); + return chart_option +} + diff --git a/frontend/src/views/chart/chart/line/baseLine.js b/frontend/src/views/chart/chart/line/line.js similarity index 53% rename from frontend/src/views/chart/chart/line/baseLine.js rename to frontend/src/views/chart/chart/line/line.js index d431f2758d..8fe395b7e7 100644 --- a/frontend/src/views/chart/chart/line/baseLine.js +++ b/frontend/src/views/chart/chart/line/line.js @@ -1,21 +1,29 @@ +import { hexColorToRGBA } from '@/views/chart/chart/util' + export function baseLineOption(chart_option, chart) { -// 处理data - if (chart.data) { - chart_option.title.text = chart.title - chart_option.xAxis.data = chart.data.x - chart.data.series.forEach(function(y) { - chart_option.legend.data.push(y.name) - chart_option.series.push(y) - }) - } - // console.log(chart_option); // 处理shape attr + let customAttr = {} if (chart.customAttr) { - const customAttr = JSON.parse(chart.customAttr) + customAttr = JSON.parse(chart.customAttr) if (customAttr.color) { chart_option.color = customAttr.color.colors } } + // 处理data + if (chart.data) { + chart_option.title.text = chart.title + chart_option.xAxis.data = chart.data.x + for (let i = 0; i < chart.data.series.length; i++) { + const y = chart.data.series[i] + y.itemStyle = { + color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha) + } + y.type = 'line' + chart_option.legend.data.push(y.name) + chart_option.series.push(y) + } + } + // console.log(chart_option); return chart_option } diff --git a/frontend/src/views/chart/chart/pie/pie.js b/frontend/src/views/chart/chart/pie/pie.js new file mode 100644 index 0000000000..8739c4a0e1 --- /dev/null +++ b/frontend/src/views/chart/chart/pie/pie.js @@ -0,0 +1,34 @@ +import { hexColorToRGBA } from '@/views/chart/chart/util' + +export function basePieOption(chart_option, chart) { + // 处理shape attr + let customAttr = {} + if (chart.customAttr) { + customAttr = JSON.parse(chart.customAttr) + if (customAttr.color) { + chart_option.color = customAttr.color.colors + } + } + // 处理data + if (chart.data) { + chart_option.title.text = chart.title + if (chart.data.series.length > 0) { + chart_option.series[0].name = chart.data.series[0].name + const valueArr = chart.data.series[0].data + for (let i = 0; i < valueArr.length; i++) { + const y = { + name: chart.data.x[i], + value: valueArr[i] + } + y.itemStyle = { + color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha) + } + y.type = 'pie' + chart_option.series[0].data.push(y) + } + } + } + // console.log(chart_option); + return chart_option +} + diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js new file mode 100644 index 0000000000..1429a54fd2 --- /dev/null +++ b/frontend/src/views/chart/chart/util.js @@ -0,0 +1,19 @@ +export function hexColorToRGBA(hex, alpha) { + const rgb = [] // 定义rgb数组 + if (/^\#[0-9A-F]{3}$/i.test(hex)) { // 判断传入是否为#三位十六进制数 + let sixHex = '#' + hex.replace(/[0-9A-F]/ig, function(kw) { + sixHex += kw + kw // 把三位16进制数转化为六位 + }) + hex = sixHex // 保存回hex + } + if (/^#[0-9A-F]{6}$/i.test(hex)) { // 判断传入是否为#六位十六进制数 + hex.replace(/[0-9A-F]{2}/ig, function(kw) { + rgb.push(eval('0x' + kw)) // 十六进制转化为十进制并存如数组 + }) + return `rgba(${rgb.join(',')},${alpha / 100})` // 输出RGB格式颜色 + } else { + console.log(`Input ${hex} is wrong!`) + return 'rgb(0,0,0)' + } +} diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue index 4aac1f97ab..8af9544824 100644 --- a/frontend/src/views/chart/components/ChartComponent.vue +++ b/frontend/src/views/chart/components/ChartComponent.vue @@ -5,9 +5,11 @@ -