github/go-view
github/go-view
3
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-02-25 00:33:00 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 新增折线图颜色控制

Browse Source
This commit is contained in:
MTrun 2022-03-09 20:27:53 +08:00
parent f25ec3d6a7
commit 98100be99d
7 changed files with 126 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/packages/chartConfiguration/echarts/index.ts
View File

@ -1 +1,2 @@
export * from './axis'
export * from './line'

18
src/packages/chartConfiguration/echarts/line.ts Normal file
View File

@ -0,0 +1,18 @@
export const lineConf = {
lineStyle: {
type: [
{
label: 'solid',
value: 'solid'
},
{
label: 'dashed',
value: 'dashed'
},
{
label: 'dotted',
value: 'dotted'
}
]
}
}

2
src/packages/components/Charts/Bars/BarCommon/config.vue
View File

@ -1,5 +1,5 @@
<template>
<CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-数据-${index+1}`" :expanded="true">
<CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-${index+1}`" :expanded="true">
<SettingItemBox name="图形">
<SettingItem name="颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color" />

2
src/packages/components/Charts/Bars/BarCrossrange/config.vue
View File

@ -1,5 +1,5 @@
<template>
<CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-数据-${index+1}`" :expanded="true">
<CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-${index+1}`" :expanded="true">
<SettingItemBox name="图形">
<SettingItem name="颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color" />

49
src/packages/components/Charts/Lines/LineCommon/config.ts
View File

@ -5,7 +5,7 @@ import omit from 'lodash/omit'
export const includes = ['legend', 'xAxis', 'yAxis']
const option = {
export const option = {
tooltip: {
show: true,
trigger: 'axis',
@ -30,34 +30,25 @@ const option = {
name: 'data1',
type: 'line',
lineStyle: {
normal: {
width: 3,
color: {
type: 'linear',
colorStops: [
{
offset: 0,
color: '#42a5f5' // 0% 处的颜色
},
{
offset: 1,
color: '#48D8BF' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
shadowColor: 'rgba(68, 181, 226, 0.3)',
shadowBlur: 5,
shadowOffsetY: 20
}
},
itemStyle: {
normal: {
color: '#fff',
borderWidth: 10,
borderColor: '#42a5f5'
}
type: 'solid',
width: 3,
color: {
type: 'linear',
colorStops: [
{
offset: 0,
color: '#42a5f5' // 0% 处的颜色
},
{
offset: 1,
color: '#48D8BF' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
shadowColor: 'rgba(68, 181, 226, 0.3)',
shadowBlur: 5,
shadowOffsetY: 20
},
data: [120, 200, 150, 80, 70, 110, 130]
}

81
src/packages/components/Charts/Lines/LineCommon/config.vue
View File

@ -1,6 +1,87 @@
<template>
<CollapseItem
v-for="(item, index) in seriesList"
:key="index"
:name="`折线图-${index + 1}`"
:expanded="true"
>
<SettingItemBox name="线条">
<SettingItem name="颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="item.lineStyle.color.colorStops[0].color"
/>
</SettingItem>
<SettingItem name="颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="item.lineStyle.color.colorStops[1].color"
/>
</SettingItem>
<SettingItem name="宽度">
<n-input-number
v-model:value="item.lineStyle.width"
:min="1"
:max="100"
size="small"
placeholder="自动计算"
/>
</SettingItem>
<SettingItem name="类型">
<n-select
v-model:value="item.lineStyle.type"
size="small"
:options="lineConf.lineStyle.type"
/>
</SettingItem>
<SettingItem name="类型">
<n-select
v-model:value="item.lineStyle.type"
size="small"
:options="lineConf.lineStyle.type"
/>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="阴影">
<SettingItem name="颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="item.lineStyle.shadowColor"
/>
</SettingItem>
<SettingItem name="控制">
<n-button
size="small"
@click="item.lineStyle.shadowColor = 'rgba(0, 0, 0, 0)'"
>
去除阴影
</n-button>
</SettingItem>
</SettingItemBox>
</CollapseItem>
</template>
<script setup lang="ts">
import { PropType, computed } from 'vue'
import { lineConf } from '@/packages/chartConfiguration/echarts/index'
import {
CollapseItem,
SettingItemBox,
SettingItem
} from '@/components/ChartItemSetting/index'
import { option } from './config'
const props = defineProps({
optionData: {
type: Object as PropType<typeof option>,
required: true
}
})
const seriesList = computed(() => {
return props.optionData.series
})
</script>

10
src/packages/components/Charts/Lines/LineCommon/index.vue
View File

@ -10,11 +10,7 @@ import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import config, { includes } from './config'
import { mergeTheme } from '@/packages/public/chart'
import {
GridComponent,
TooltipComponent,
LegendComponent,
} from 'echarts/components'
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
const props = defineProps({
themeSetting: {
@ -36,10 +32,10 @@ use([
LineChart,
GridComponent,
TooltipComponent,
LegendComponent,
LegendComponent
])
const option = computed(() => {
return mergeTheme( props.chartConfig.option, props.themeSetting, includes)
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})
</script>