feat: 柱状图折线图添加网格配置

This commit is contained in:
蒋承
2022-10-14 16:46:41 +08:00
parent d835a904c9
commit 2a6e5915f5
8 changed files with 92 additions and 20 deletions
@@ -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,