mirror of
https://gitee.com/dromara/go-view.git
synced 2026-04-23 00:00:12 +08:00
feat: 柱状图折线图添加网格配置
This commit is contained in:
@@ -4,15 +4,15 @@ import { CreateComponentType } from '@/packages/index.d'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = ['legend', 'xAxis', 'yAxis']
|
||||
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
|
||||
export const seriesItem = {
|
||||
type: 'bar',
|
||||
barWidth: 15,
|
||||
label:{
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
},
|
||||
itemStyle: {
|
||||
color: null,
|
||||
@@ -31,6 +31,13 @@ export const option = {
|
||||
legend: {
|
||||
show: true
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
left: '10%',
|
||||
top: '60',
|
||||
right: '10%',
|
||||
bottom: '60'
|
||||
},
|
||||
xAxis: {
|
||||
show: true,
|
||||
type: 'category'
|
||||
|
||||
@@ -4,7 +4,7 @@ import { CreateComponentType } from '@/packages/index.d'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = ['legend', 'xAxis', 'yAxis']
|
||||
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
|
||||
export const seriesItem = {
|
||||
type: 'bar',
|
||||
barWidth: null,
|
||||
@@ -31,6 +31,13 @@ export const option = {
|
||||
legend: {
|
||||
show: true
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
left: '10%',
|
||||
top: '60',
|
||||
right: '10%',
|
||||
bottom: '60'
|
||||
},
|
||||
xAxis: {
|
||||
show: true,
|
||||
type: 'value'
|
||||
|
||||
@@ -4,7 +4,7 @@ import { CreateComponentType } from '@/packages/index.d'
|
||||
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = ['legend', 'xAxis', 'yAxis']
|
||||
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
|
||||
export const seriesItem = {
|
||||
type: 'line',
|
||||
label: {
|
||||
@@ -13,7 +13,7 @@ export const seriesItem = {
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
},
|
||||
symbolSize: 5, //设定实心点的大小
|
||||
symbolSize: 5, //设定实心点的大小
|
||||
itemStyle: {
|
||||
color: null,
|
||||
borderRadius: 0
|
||||
@@ -21,7 +21,7 @@ export const seriesItem = {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
width: 3,
|
||||
color: null,
|
||||
color: null
|
||||
}
|
||||
}
|
||||
|
||||
@@ -36,6 +36,13 @@ export const option = {
|
||||
legend: {
|
||||
show: true
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
left: '10%',
|
||||
top: '60',
|
||||
right: '10%',
|
||||
bottom: '60'
|
||||
},
|
||||
xAxis: {
|
||||
show: true,
|
||||
type: 'category'
|
||||
|
||||
@@ -5,7 +5,7 @@ import { graphic } from 'echarts/core'
|
||||
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = ['legend', 'xAxis', 'yAxis']
|
||||
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
|
||||
|
||||
const options = {
|
||||
tooltip: {
|
||||
@@ -18,9 +18,16 @@ const options = {
|
||||
legend: {
|
||||
show: true
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
left: '10%',
|
||||
top: '60',
|
||||
right: '10%',
|
||||
bottom: '60'
|
||||
},
|
||||
xAxis: {
|
||||
show: true,
|
||||
type: 'category',
|
||||
type: 'category'
|
||||
},
|
||||
yAxis: {
|
||||
show: true,
|
||||
@@ -31,12 +38,12 @@ const options = {
|
||||
{
|
||||
type: 'line',
|
||||
smooth: false,
|
||||
symbolSize: 5, //设定实心点的大小
|
||||
label:{
|
||||
symbolSize: 5, //设定实心点的大小
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
},
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
@@ -59,8 +66,7 @@ const options = {
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass
|
||||
implements CreateComponentType {
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key: string = LineGradientSingleConfig.key
|
||||
public chartConfig = LineGradientSingleConfig
|
||||
// 图表配置项
|
||||
|
||||
@@ -5,12 +5,19 @@ import { graphic } from 'echarts/core'
|
||||
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = ['legend', 'xAxis', 'yAxis']
|
||||
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
|
||||
|
||||
const option = {
|
||||
legend: {
|
||||
show: true
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
left: '10%',
|
||||
top: '60',
|
||||
right: '10%',
|
||||
bottom: '60'
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
@@ -31,7 +38,7 @@ const option = {
|
||||
{
|
||||
type: 'line',
|
||||
smooth: false,
|
||||
symbolSize: 5, //设定实心点的大小
|
||||
symbolSize: 5, //设定实心点的大小
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
|
||||
@@ -4,7 +4,7 @@ import { CreateComponentType } from '@/packages/index.d'
|
||||
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = ['legend', 'xAxis', 'yAxis']
|
||||
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
|
||||
|
||||
export const option = {
|
||||
tooltip: {
|
||||
@@ -17,6 +17,13 @@ export const option = {
|
||||
legend: {
|
||||
show: true
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
left: '10%',
|
||||
top: '60',
|
||||
right: '10%',
|
||||
bottom: '60'
|
||||
},
|
||||
xAxis: {
|
||||
show: true,
|
||||
type: 'category'
|
||||
@@ -29,7 +36,7 @@ export const option = {
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
symbolSize: 5, //设定实心点的大小
|
||||
symbolSize: 5, //设定实心点的大小
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
width: 3,
|
||||
|
||||
Reference in New Issue
Block a user