forked from github/dataease
feat(视图): 1.增加 雷达图、面积堆叠图；2.iconfont样式调整；3.echarts组件配置调整
This commit is contained in:
junjie
parent
d6e07577c0
commit
6a8568673b
@ -1 +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>
|
||||
<?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" p-id="1376"></path></svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 707 B After Width: | Height: | Size: 692 B |
1
frontend/src/icons/svg/line-stack.svg
Normal file
1
frontend/src/icons/svg/line-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="1616398663420" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="787" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M637.6 381.7L495.8 493.1c-4.1 3.1-9.8 3.6-13.9 1l-154.7-84.6c-4.6-2.6-10.8-2.1-14.4 1.5L162.2 547.2v153.1l150-133.5c3.6-3.6 9.8-4.1 14.4-1.5l177.9 96.4c4.1 2.1 9.3 2.1 12.9-0.5l144.4-91.3c1-0.5 2.6-1.5 3.6-1.5l294.4-72.7V301.8l-317.6 77.3c-1.5 0.5-3.1 1.6-4.6 2.6z" p-id="788"></path><path d="M662.3 622.2l-142.8 91.3c-3.6 2.6-8.8 2.6-12.9 0.5l-179.9-96.4c-4.6-2.6-10.8-2.1-14.4 1.5 0 0-150.5 133.5-150.5 136.6v111.4h797.6V545.9l-293.9 74.8-3.2 1.5z" p-id="789"></path><path d="M64 144.2c0-1.3 0.5-2.6 1.5-3.6s2.3-1.5 3.6-1.5H101c1.3 0 2.6 0.5 3.6 1.5s1.5 2.3 1.5 3.6v778.9H955c1.3 0 2.6 0.5 3.6 1.5s1.5 2.3 1.5 3.6v31.9c0 1.3-0.5 2.6-1.5 3.6s-2.3 1.5-3.6 1.5H64v-821z" p-id="790"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@ -1 +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>
|
||||
<?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" p-id="1731"></path></svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 769 B After Width: | Height: | Size: 754 B |
1
frontend/src/icons/svg/radar.svg
Normal file
1
frontend/src/icons/svg/radar.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="1616397690155" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="859" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M499.809524 24.380952L0 405.74781 190.927238 1024h617.764572L999.619048 405.74781 499.809524 24.380952z m396.361143 378.343619l-63.975619 15.018667-302.908953-194.438095v-100.449524l366.884572 279.893333z m-443.830857 144.944762l-139.946667 226.913524L269.897143 504.685714l182.418286 43.008z m-159.939048-100.449523l177.93219-150.430477v192.414477l-177.956571-41.984zM499.809524 584.167619l64.487619 103.960381-185.953524 92.476952L499.809524 584.167619z m47.494095-36.498286l195.413333-46.470095-131.462095 149.455238-63.951238-102.985143z m-18.505143-57.977904v-201.411048l229.424762 146.944-229.424762 54.491429zM470.820571 122.831238v103.960381L226.913524 432.249905l-123.465143-28.988953 367.37219-280.380952zM77.970286 459.702857l136.435809 32.012191 55.491048 351.841523-48.981333 78.994286-142.945524-462.823619z m187.928381 502.808381l57.977904-93.45219 269.409524-133.461334 140.434286 227.425524H265.898667v-0.487619z m512.804571-39.984762l-138.435048-223.914666 192.902096-217.916953 88.478476-20.967619-142.945524 462.823619z" p-id="860"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@ -635,6 +635,7 @@ export default {
|
||||
line_symbol_pin: '钉子',
|
||||
line_symbol_arrow: '箭头',
|
||||
line_symbol_none: '无',
|
||||
line_area: '面积',
|
||||
pie_inner_radius: '内径',
|
||||
pie_outer_radius: '外径',
|
||||
funnel_width: '宽度',
|
||||
@ -654,7 +655,10 @@ export default {
|
||||
orient: '方向',
|
||||
horizontal: '水平',
|
||||
vertical: '垂直',
|
||||
legend: '图例'
|
||||
legend: '图例',
|
||||
shape: '形状',
|
||||
polygon: '多边形',
|
||||
circle: '圆形'
|
||||
},
|
||||
dataset: {
|
||||
datalist: '数据集',
|
||||
|
||||
@ -12,9 +12,11 @@ export const DEFAULT_SIZE = {
|
||||
lineSymbol: 'emptyCircle',
|
||||
lineSymbolSize: 4,
|
||||
lineSmooth: false,
|
||||
lineArea: false,
|
||||
pieInnerRadius: 0,
|
||||
pieOuterRadius: 60,
|
||||
funnelWidth: 80
|
||||
funnelWidth: 80,
|
||||
radarShape: 'polygon'
|
||||
}
|
||||
export const DEFAULT_TITLE_STYLE = {
|
||||
show: true,
|
||||
@ -88,6 +90,7 @@ export const BASE_LINE = {
|
||||
data: []
|
||||
},
|
||||
xAxis: {
|
||||
boundaryGap: false,
|
||||
data: []
|
||||
},
|
||||
yAxis: {
|
||||
@ -180,3 +183,30 @@ export const BASE_FUNNEL = {
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export const BASE_RADAR = {
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
tooltip: {},
|
||||
legend: {
|
||||
data: []
|
||||
},
|
||||
radar: {
|
||||
shape: 'polygon',
|
||||
name: {
|
||||
textStyle: {
|
||||
color: '#000000'
|
||||
// backgroundColor: '#999',
|
||||
// borderRadius: 3,
|
||||
// padding: [3, 5]
|
||||
}
|
||||
},
|
||||
indicator: []
|
||||
},
|
||||
series: [{
|
||||
type: 'radar',
|
||||
// areaStyle: {normal: {}},
|
||||
data: []
|
||||
}]
|
||||
}
|
||||
|
||||
@ -29,6 +29,7 @@ export function baseLineOption(chart_option, chart) {
|
||||
type: customAttr.size.lineType
|
||||
}
|
||||
y.smooth = customAttr.size.lineSmooth
|
||||
customAttr.size.lineArea ? y.areaStyle = { opacity: 0.6 } : { opacity: 0 }
|
||||
}
|
||||
y.type = 'line'
|
||||
chart_option.legend.data.push(y.name)
|
||||
@ -40,3 +41,14 @@ export function baseLineOption(chart_option, chart) {
|
||||
return chart_option
|
||||
}
|
||||
|
||||
export function stackLineOption(chart_option, chart) {
|
||||
baseLineOption(chart_option, chart)
|
||||
|
||||
// ext
|
||||
chart_option.tooltip.trigger = 'axis'
|
||||
chart_option.series.forEach(function(s) {
|
||||
s.stack = 'stack'
|
||||
})
|
||||
return chart_option
|
||||
}
|
||||
|
||||
|
||||
38
frontend/src/views/chart/chart/radar/radar.js
Normal file
38
frontend/src/views/chart/chart/radar/radar.js
Normal file
@ -0,0 +1,38 @@
|
||||
import { hexColorToRGBA } from '@/views/chart/chart/util'
|
||||
import { componentStyle } from '../common/common'
|
||||
|
||||
export function baseRadarOption(chart_option, chart) {
|
||||
// 处理shape attr
|
||||
let customAttr = {}
|
||||
if (chart.customAttr) {
|
||||
customAttr = JSON.parse(chart.customAttr)
|
||||
if (customAttr.color) {
|
||||
chart_option.color = customAttr.color.colors
|
||||
}
|
||||
// size
|
||||
if (customAttr.size) {
|
||||
chart_option.radar.shape = customAttr.size.radarShape
|
||||
}
|
||||
}
|
||||
// 处理data
|
||||
if (chart.data) {
|
||||
chart_option.title.text = chart.title
|
||||
chart.data.x.forEach(function(ele) {
|
||||
chart_option.radar.indicator.push({ name: ele })
|
||||
})
|
||||
for (let i = 0; i < chart.data.series.length; i++) {
|
||||
const y = chart.data.series[i]
|
||||
// color
|
||||
y.itemStyle = {
|
||||
color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha)
|
||||
}
|
||||
chart_option.legend.data.push(y.name)
|
||||
y.value = JSON.parse(JSON.stringify(y.data))
|
||||
chart_option.series[0].data.push(y)
|
||||
}
|
||||
}
|
||||
// console.log(chart_option);
|
||||
componentStyle(chart_option, chart)
|
||||
return chart_option
|
||||
}
|
||||
|
||||
@ -5,11 +5,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { BASE_BAR, BASE_LINE, HORIZONTAL_BAR, BASE_PIE, BASE_FUNNEL } from '../chart/chart'
|
||||
import { BASE_BAR, BASE_LINE, HORIZONTAL_BAR, BASE_PIE, BASE_FUNNEL, BASE_RADAR } from '../chart/chart'
|
||||
import { baseBarOption, stackBarOption, horizontalBarOption, horizontalStackBarOption } from '../chart/bar/bar'
|
||||
import { baseLineOption } from '../chart/line/line'
|
||||
import { baseLineOption, stackLineOption } from '../chart/line/line'
|
||||
import { basePieOption } from '../chart/pie/pie'
|
||||
import { baseFunnelOption } from '../chart/funnel/funnel'
|
||||
import { baseRadarOption } from '../chart/radar/radar'
|
||||
|
||||
export default {
|
||||
name: 'ChartComponent',
|
||||
@ -56,10 +57,14 @@ export default {
|
||||
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 === 'line-stack') {
|
||||
chart_option = stackLineOption(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)
|
||||
} else if (chart.type === 'radar') {
|
||||
chart_option = baseRadarOption(JSON.parse(JSON.stringify(BASE_RADAR)), chart)
|
||||
}
|
||||
console.log(chart_option)
|
||||
this.myEcharts(chart_option)
|
||||
|
||||
@ -1,86 +0,0 @@
|
||||
<template>
|
||||
<div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;">
|
||||
<div :id="chartId" style="width: 100%;height: 100%;" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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: 'ChartComponentView',
|
||||
props: {
|
||||
chart: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
chartId: {
|
||||
type: String,
|
||||
required: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myChart: {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
chart() {
|
||||
this.drawEcharts()
|
||||
},
|
||||
resize() {
|
||||
this.drawEcharts()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
this.myChart = this.$echarts.init(document.getElementById(this.chartId))
|
||||
this.drawEcharts()
|
||||
},
|
||||
methods: {
|
||||
drawEcharts() {
|
||||
const chart = this.chart
|
||||
let chart_option = {}
|
||||
// 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)
|
||||
},
|
||||
myEcharts(option) {
|
||||
// 指定图表的配置项和数据
|
||||
const chart = this.myChart
|
||||
setTimeout(chart.setOption(option, true), 500)
|
||||
window.onresize = function() {
|
||||
chart.resize()
|
||||
}
|
||||
},
|
||||
chartResize() {
|
||||
// 指定图表的配置项和数据
|
||||
const chart = this.myChart
|
||||
chart.resize()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -45,6 +45,9 @@
|
||||
<el-form-item :label="$t('chart.line_smooth')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase">{{ $t('chart.line_smooth') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.line_area')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.lineArea" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-form v-if="chart.type && chart.type.includes('pie')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
|
||||
@ -61,6 +64,15 @@
|
||||
<el-slider v-model="sizeForm.funnelWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-form v-if="chart.type && chart.type.includes('radar')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.shape')" class="form-item">
|
||||
<el-radio-group v-model="sizeForm.radarShape" size="mini" @change="changeBarSizeCase">
|
||||
<el-radio-button label="polygon">{{ $t('chart.polygon') }}</el-radio-button>
|
||||
<el-radio-button label="circle">{{ $t('chart.circle') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
|
||||
<el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.size') }}<i class="el-icon-setting el-icon--right" /></el-button>
|
||||
|
||||
@ -85,8 +85,10 @@
|
||||
<el-radio value="bar-horizontal" label="bar-horizontal"><svg-icon icon-class="bar-horizontal" class="chart-icon" /></el-radio>
|
||||
<el-radio value="bar-horizontal-stack" label="bar-horizontal-stack"><svg-icon icon-class="bar-stack-horizontal" class="chart-icon" /></el-radio>
|
||||
<el-radio value="line" label="line"><svg-icon icon-class="line" class="chart-icon" /></el-radio>
|
||||
<el-radio value="line-stack" label="line-stack"><svg-icon icon-class="line-stack" class="chart-icon" /></el-radio>
|
||||
<el-radio value="pie" label="pie"><svg-icon icon-class="pie" class="chart-icon" /></el-radio>
|
||||
<el-radio value="funnel" label="funnel"><svg-icon icon-class="funnel" class="chart-icon" /></el-radio>
|
||||
<el-radio value="radar" label="radar"><svg-icon icon-class="radar" class="chart-icon" /></el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user