forked from github/dataease
feat(视图): 1.丰富chart种类；2.echarts option封装；3.增加一些不太好看的svg作为图表类型icon-font
This commit is contained in:
junjie
parent
760b05e277
commit
f891dc5aca
1
frontend/src/icons/svg/bar-horizontal.svg
Normal file
1
frontend/src/icons/svg/bar-horizontal.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616054957891" class="icon" viewBox="0 0 1072 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1374" xmlns:xlink="http://www.w3.org/1999/xlink" width="209.375" height="200"><defs><style type="text/css"></style></defs><path d="M150.528 77.482667v207.286857H623.177143l2.998857-207.286857zM1023.853714 380.830476H150.528v207.286857h867.791238zM820.711619 684.178286H150.528v207.286857h665.916952z" p-id="1375"></path><path d="M115.151238 943.079619V0.146286h-41.203809v994.377143h996.10819v-51.44381H115.151238z" fill="#8a8a8a" p-id="1376"></path></svg>
|
||||
|
After Width: | Height: | Size: 707 B |
1
frontend/src/icons/svg/bar-stack-horizontal.svg
Normal file
1
frontend/src/icons/svg/bar-stack-horizontal.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616055514308" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4523" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M1004.202667 396.168533H19.677867c-8.97024 0-16.264533 7.294293-16.264534 16.145067v199.48544c0 8.973653 7.294293 16.145067 16.264534 16.145067h984.64768c8.97024 0 16.264533-7.294293 16.264533-16.145067v-199.48544a16.366933 16.366933 0 0 0-16.387413-16.145067z m-81.926827 150.21056H369.261227c-19.131733 0-34.679467-15.547733-34.679467-34.679466s15.547733-34.686293 34.679467-34.686294h553.018026c19.131733 0 34.679467 15.55456 34.679467 34.686294 0 19.135147-15.54432 34.679467-34.68288 34.679466zM1004.202667 94.306987H19.677867A16.2816 16.2816 0 0 0 3.413333 110.574933v199.48544c0 8.97024 7.294293 16.145067 16.264534 16.145067h984.64768c8.97024 0 16.264533-7.30112 16.264533-16.145067V110.452053c-0.12288-8.850773-7.417173-16.145067-16.387413-16.145066z m-81.926827 150.575786h-205.71136c-19.12832 0-34.68288-15.55456-34.68288-34.686293s15.55456-34.679467 34.68288-34.679467h205.71136c19.131733 0 34.679467 15.547733 34.679467 34.679467s-15.540907 34.686293-34.679467 34.686293zM1004.202667 697.914027H19.677867c-8.97024 0-16.264533 7.181653-16.264534 16.145066v199.48544c0 8.966827 7.294293 16.145067 16.264534 16.145067h984.64768c8.97024 0 16.264533-7.30112 16.264533-16.145067v-199.365973c-0.12288-8.97024-7.417173-16.264533-16.387413-16.264533z m-81.926827 150.572373H547.9424c-19.135147 0-34.686293-15.547733-34.686293-34.679467s15.547733-34.686293 34.686293-34.686293h374.336853c19.131733 0 34.679467 15.55456 34.679467 34.686293 0 19.254613-15.54432 34.679467-34.68288 34.679467z" p-id="4524"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
1
frontend/src/icons/svg/bar-stack.svg
Normal file
1
frontend/src/icons/svg/bar-stack.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616054999656" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2027" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M268.04419 302.762667H59.879619c-19.114667 0-34.694095 15.579429-34.694095 34.694095v624.469333c0 19.041524 15.60381 34.694095 34.694095 34.694095h208.164571c19.114667 0 34.694095-15.652571 34.694096-34.694095V337.456762c0-19.114667-15.60381-34.694095-34.694096-34.694095z m0 624.469333H59.879619V649.679238h208.164571v277.552762zM614.985143 163.986286h-208.164572c-19.114667 0-34.694095 15.579429-34.694095 34.694095v763.245714c0 19.041524 15.60381 34.694095 34.694095 34.694095h208.164572c19.114667 0 34.694095-15.652571 34.694095-34.694095V198.704762c0-19.114667-15.579429-34.694095-34.694095-34.694095z m0 763.245714h-208.164572v-346.940952h208.164572v346.940952zM961.950476 25.209905h-208.164571c-19.114667 0-34.718476 15.579429-34.718476 34.694095v902.022095c0 19.041524 15.60381 34.694095 34.718476 34.694095h208.164571c19.114667 0 34.694095-15.652571 34.694095-34.694095V59.904c0-19.114667-15.60381-34.694095-34.694095-34.694095z m0 902.022095h-208.164571V510.902857h208.164571v416.329143z" p-id="2028"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
1
frontend/src/icons/svg/bar.svg
Normal file
1
frontend/src/icons/svg/bar.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616054813530" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="853" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M95.743954 952.636499h914.090232a14.360374 14.360374 0 0 1 14.165326 13.775231v43.812551a14.019041 14.019041 0 0 1-14.140945 13.775231H38.521886a14.238469 14.238469 0 0 1-14.140945-14.140945V38.521886A14.360374 14.360374 0 0 1 38.156172 24.380941h43.812551c7.631234 0 13.775232 6.436568 13.775231 14.140945v914.114613zM163.839922 402.529332c0-20.284943 14.969898-36.79084 35.206078-36.790839h69.071206c19.455991 0 35.206078 16.993516 35.206078 36.81522v438.369315c0.097524 9.801138-3.535236 19.309705-10.215614 26.209511a33.840746 33.840746 0 0 1-24.990464 10.60571H199.070381c-19.382848-0.219428-35.011031-16.505897-35.206078-36.815221V402.529332z m209.212853-269.482538c0-19.6998 14.994279-35.49865 35.206078-35.49865h69.071205a35.596174 35.596174 0 0 1 35.206079 35.49865v709.192805c0.097524 9.508567-3.63276 18.627039-10.215614 25.307416A34.303984 34.303984 0 0 1 477.37882 877.713868h-69.071205c-19.358467 0-35.108555-15.920754-35.206078-35.596174V133.022413z m232.594175 415.378088c0-20.089895 14.945517-36.400745 35.157316-36.400745h69.022444c19.455991 0 35.181698 15.701326 35.181697 36.400745v292.912622c0.097524 9.801138-3.63276 19.1878-10.288757 25.990083A33.621317 33.621317 0 0 1 709.729186 877.713868h-68.998063a33.645698 33.645698 0 0 1-24.89294-10.410662 37.205316 37.205316 0 0 1-10.313138-25.990083V548.400501h0.097524z m209.115329-196.388478c0-19.334086 14.969898-35.059793 35.206078-35.059793h69.071205c19.455991 0 35.206078 16.091421 35.206079 35.059793v490.642052c0 19.334086-14.994279 35.059793-35.206079 35.059793h-69.071205a35.376745 35.376745 0 0 1-35.206078-35.059793V352.012023z" p-id="854"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
1
frontend/src/icons/svg/funnel.svg
Normal file
1
frontend/src/icons/svg/funnel.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616055024589" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2204" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M904.97219 357.595429L786.041905 690.785524H262.363429L143.36 357.595429h761.58781z m29.769143-83.309715L1024 24.380952H24.380952l89.234286 249.904762h821.150476z m-178.492952 499.809524L667.014095 1024H381.366857l-89.234286-249.904762h464.091429z" p-id="2205"></path></svg>
|
||||
|
After Width: | Height: | Size: 652 B |
1
frontend/src/icons/svg/line.svg
Normal file
1
frontend/src/icons/svg/line.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616054974287" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1552" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M176.664381 916.309333H1024V999.619048H24.380952V0h83.309715v869.571048l271.286857-380.781715L646.826667 616.838095 903.972571 136.533333l73.435429 39.326477-294.716952 550.521904-276.48-132.242285z" p-id="1553"></path></svg>
|
||||
|
After Width: | Height: | Size: 603 B |
1
frontend/src/icons/svg/pie.svg
Normal file
1
frontend/src/icons/svg/pie.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616054982578" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1729" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M549.254095 0.219429v469.430857h469.430857C1018.684952 214.211048 804.693333 0.219429 549.254095 0.219429z" p-id="1730"></path><path d="M494.031238 517.973333V48.542476c-262.339048 0-469.430857 214.016-469.430857 469.430857 0 255.439238 213.991619 469.430857 469.430857 469.430857 262.339048 0 469.430857-213.991619 469.430857-469.430857H494.031238z" fill="#8a8a8a" p-id="1731"></path></svg>
|
||||
|
After Width: | Height: | Size: 769 B |
@ -614,7 +614,8 @@ export default {
|
||||
color_gentle: '柔和',
|
||||
color_elegant: '淡雅',
|
||||
color_technology: '科技',
|
||||
color_simple: '简洁'
|
||||
color_simple: '简洁',
|
||||
not_alpha: '不透明度'
|
||||
},
|
||||
dataset: {
|
||||
datalist: '数据集',
|
||||
|
||||
81
frontend/src/views/chart/chart/bar/bar.js
Normal file
81
frontend/src/views/chart/chart/bar/bar.js
Normal file
@ -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
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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} <br/>{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: []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
34
frontend/src/views/chart/chart/funnel/funnel.js
Normal file
34
frontend/src/views/chart/chart/funnel/funnel.js
Normal file
@ -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
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
34
frontend/src/views/chart/chart/pie/pie.js
Normal file
34
frontend/src/views/chart/chart/pie/pie.js
Normal file
@ -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
|
||||
}
|
||||
|
||||
19
frontend/src/views/chart/chart/util.js
Normal file
19
frontend/src/views/chart/chart/util.js
Normal file
@ -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)'
|
||||
}
|
||||
}
|
||||
@ -5,9 +5,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { BASE_BAR, BASE_LINE } from '../chart/chart'
|
||||
import { baseBarOption } from '../chart/bar/baseBar'
|
||||
import { baseLineOption } from '../chart/line/baseLine'
|
||||
import { BASE_BAR, BASE_LINE, HORIZONTAL_BAR, BASE_PIE, BASE_FUNNEL } from '../chart/chart'
|
||||
import { baseBarOption, stackBarOption, horizontalBarOption, horizontalStackBarOption } from '../chart/bar/bar'
|
||||
import { baseLineOption } from '../chart/line/line'
|
||||
import { basePieOption } from '../chart/pie/pie'
|
||||
import { baseFunnelOption } from '../chart/funnel/funnel'
|
||||
|
||||
export default {
|
||||
name: 'ChartComponent',
|
||||
@ -38,8 +40,18 @@ export default {
|
||||
// todo type
|
||||
if (chart.type === 'bar') {
|
||||
chart_option = baseBarOption(JSON.parse(JSON.stringify(BASE_BAR)), chart)
|
||||
} else if (chart.type === 'bar-stack') {
|
||||
chart_option = stackBarOption(JSON.parse(JSON.stringify(BASE_BAR)), chart)
|
||||
} else if (chart.type === 'bar-horizontal') {
|
||||
chart_option = horizontalBarOption(JSON.parse(JSON.stringify(HORIZONTAL_BAR)), chart)
|
||||
} else if (chart.type === 'bar-horizontal-stack') {
|
||||
chart_option = horizontalStackBarOption(JSON.parse(JSON.stringify(HORIZONTAL_BAR)), chart)
|
||||
} else if (chart.type === 'line') {
|
||||
chart_option = baseLineOption(JSON.parse(JSON.stringify(BASE_LINE)), chart)
|
||||
} else if (chart.type === 'pie') {
|
||||
chart_option = basePieOption(JSON.parse(JSON.stringify(BASE_PIE)), chart)
|
||||
} else if (chart.type === 'funnel') {
|
||||
chart_option = baseFunnelOption(JSON.parse(JSON.stringify(BASE_FUNNEL)), chart)
|
||||
}
|
||||
// console.log(chart_option);
|
||||
this.myEcharts(chart_option)
|
||||
|
||||
@ -18,6 +18,9 @@
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.not_alpha')" class="form-item">
|
||||
<el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeColorCase" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.color') }}<i class="el-icon-setting el-icon--right" /></el-button>
|
||||
@ -86,7 +89,8 @@ export default {
|
||||
}
|
||||
],
|
||||
colorForm: {
|
||||
colorCase: 'default'
|
||||
colorCase: 'default',
|
||||
alpha: 100
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -98,6 +102,7 @@ export default {
|
||||
const customAttr = JSON.parse(chart.customAttr)
|
||||
if (customAttr.color) {
|
||||
this.colorForm.colorCase = customAttr.color.value
|
||||
this.colorForm.alpha = customAttr.color.alpha
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -113,7 +118,8 @@ export default {
|
||||
})
|
||||
this.$emit('onColorChange', {
|
||||
value: items[0].value,
|
||||
colors: items[0].colors
|
||||
colors: items[0].colors,
|
||||
alpha: this.colorForm.alpha
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,10 +24,10 @@
|
||||
<el-dropdown-item icon="el-icon-s-grid">
|
||||
<el-dropdown placement="right-start" size="mini" @command="quickCalc">
|
||||
<span class="el-dropdown-link">
|
||||
{{ $t('chart.quick_calc') }}<span class="summary-span">(test)</span><i class="el-icon-arrow-right el-icon--right" />
|
||||
{{ $t('chart.quick_calc') }}<span class="summary-span">(无)</span><i class="el-icon-arrow-right el-icon--right" />
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item :command="beforeQuickCalc('none')">test</el-dropdown-item>
|
||||
<el-dropdown-item :command="beforeQuickCalc('none')">无</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-dropdown-item>
|
||||
|
||||
@ -79,8 +79,13 @@
|
||||
<el-row>
|
||||
<div class="chart-type">
|
||||
<!--TODO 这里要替换好看点的图标-->
|
||||
<el-radio v-model="view.type" label="bar"><i class="el-icon-platform-eleme" style="font-size: 20px" /></el-radio>
|
||||
<el-radio v-model="view.type" label="line">折线图</el-radio>
|
||||
<el-radio v-model="view.type" label="bar"><svg-icon icon-class="bar" class="chart-icon" /></el-radio>
|
||||
<el-radio v-model="view.type" label="bar-stack"><svg-icon icon-class="bar-stack" class="chart-icon" /></el-radio>
|
||||
<el-radio v-model="view.type" label="bar-horizontal"><svg-icon icon-class="bar-horizontal" class="chart-icon" /></el-radio>
|
||||
<el-radio v-model="view.type" label="bar-horizontal-stack"><svg-icon icon-class="bar-stack-horizontal" class="chart-icon" /></el-radio>
|
||||
<el-radio v-model="view.type" label="line"><svg-icon icon-class="line" class="chart-icon" /></el-radio>
|
||||
<el-radio v-model="view.type" label="pie"><svg-icon icon-class="pie" class="chart-icon" /></el-radio>
|
||||
<el-radio v-model="view.type" label="funnel"><svg-icon icon-class="funnel" class="chart-icon" /></el-radio>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
@ -248,6 +253,11 @@ export default {
|
||||
ele.summary = 'sum'
|
||||
}
|
||||
})
|
||||
if (view.type.startsWith('pie') || view.type.startsWith('funnel')) {
|
||||
if (view.yaxis.length > 1) {
|
||||
view.yaxis.splice(1, view.yaxis.length)
|
||||
}
|
||||
}
|
||||
view.xaxis = JSON.stringify(view.xaxis)
|
||||
view.yaxis = JSON.stringify(view.yaxis)
|
||||
view.customAttr = JSON.stringify(view.customAttr)
|
||||
@ -374,7 +384,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.padding-lr {
|
||||
padding: 0 6px;
|
||||
}
|
||||
@ -445,7 +455,27 @@ export default {
|
||||
height: calc(100% - 6px);
|
||||
}
|
||||
|
||||
.chart-type{
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.chart-icon{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.chart-type>>>.el-radio__input{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-radio{
|
||||
margin:6px;
|
||||
}
|
||||
|
||||
.el-radio>>>.el-radio__label{
|
||||
padding-left: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user