fix:修复bug
liu.shiyi
1 year ago
parent
380cad065b
commit
888d9fc463
@ -0,0 +1,314 @@
|
||||
|
||||
// 配置版本号
|
||||
const version = '2023092201'
|
||||
// 分类
|
||||
const category = '散点图'
|
||||
// 标题
|
||||
const title = '散点图'
|
||||
// 类别， new Line()
|
||||
const chartType = 'Scatter'
|
||||
// 用于标识，唯一，和文件夹名称一致
|
||||
const name = 'SanDianTu'
|
||||
|
||||
// 右侧配置项
|
||||
const setting = [
|
||||
{
|
||||
label: '维度',
|
||||
type: 'select', // 设置组件类型
|
||||
field: 'size', // 字段
|
||||
optionField: 'size', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
value: '',
|
||||
tabName: 'data'
|
||||
},
|
||||
{
|
||||
label: '指标',
|
||||
type: 'select', // 设置组件类型
|
||||
field: 'sets', // 字段
|
||||
optionField: 'sets', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
value: '',
|
||||
tabName: 'data'
|
||||
},
|
||||
{
|
||||
label: '颜色',
|
||||
type: 'select', // 设置组件类型
|
||||
field: 'colorField', // 字段
|
||||
optionField: 'colorField', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
value: '',
|
||||
tabName: 'data'
|
||||
},
|
||||
{
|
||||
label: '颜色配置',
|
||||
// 设置组件类型
|
||||
type: 'colorSelect',
|
||||
// 字段
|
||||
field: 'color',
|
||||
// 对应options中的字段
|
||||
optionField: 'color',
|
||||
value: ['#6b74e4', '#4391f4', '#38bbe5', '#69d6fd', '#36c6a0'],
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '数据点形状',
|
||||
type: 'select', // 设置组件类型
|
||||
field: 'shape', // 字段
|
||||
optionField: 'shape', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
value: 'circle',
|
||||
tabName: 'custom',
|
||||
options: [
|
||||
{
|
||||
label: '无',
|
||||
value: false
|
||||
},
|
||||
{
|
||||
label: '空心圆',
|
||||
value: 'hollow-circle'
|
||||
},
|
||||
{
|
||||
label: '圆形',
|
||||
value: 'circle'
|
||||
},
|
||||
{
|
||||
label: '正方形',
|
||||
value: 'square'
|
||||
},
|
||||
{
|
||||
label: '菱形',
|
||||
value: 'diamond'
|
||||
},
|
||||
{
|
||||
label: '三角形',
|
||||
value: 'triangle'
|
||||
},
|
||||
{
|
||||
label: '六边形',
|
||||
value: 'hexagon'
|
||||
},
|
||||
{
|
||||
label: '菱形交叉',
|
||||
value: 'bowtie'
|
||||
},
|
||||
{
|
||||
label: '十字形',
|
||||
value: 'cross'
|
||||
},
|
||||
{
|
||||
label: 'I形',
|
||||
value: 'tick'
|
||||
},
|
||||
{
|
||||
label: '加号',
|
||||
value: 'plus'
|
||||
},
|
||||
{
|
||||
label: '连字号',
|
||||
value: 'hyphen'
|
||||
}
|
||||
],
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '透明度',
|
||||
type: 'inputNumber', // 设置组件类型
|
||||
field: 'pointStyle_fillOpacity', // 字段
|
||||
optionField: 'pointStyle.fillOpacity', // 对应options中的字段
|
||||
value: 0.8,
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '图表边距',
|
||||
type: 'padding', // 设置组件类型
|
||||
field: 'appendPadding', //
|
||||
optionField: 'appendPadding', // 对应options中的字段
|
||||
value: [20, 20, 20, 20],
|
||||
tabName: 'custom',
|
||||
groupName: 'padding'
|
||||
}
|
||||
]
|
||||
|
||||
// 模拟数据
|
||||
const data = [
|
||||
{
|
||||
Title: 'Guardians of the Galaxy',
|
||||
Genre: 'Action',
|
||||
'Revenue (Millions)': 333.13,
|
||||
Rating: 8.1
|
||||
},
|
||||
{
|
||||
Title: 'Prometheus',
|
||||
Genre: 'Adventure',
|
||||
'Revenue (Millions)': 126.46,
|
||||
Rating: 7
|
||||
},
|
||||
{
|
||||
Title: 'Split',
|
||||
Genre: 'Horror',
|
||||
'Revenue (Millions)': 138.12,
|
||||
Rating: 7.3
|
||||
},
|
||||
{
|
||||
Title: 'Sing',
|
||||
Genre: 'Animation',
|
||||
'Revenue (Millions)': 270.32,
|
||||
Rating: 7.2
|
||||
},
|
||||
{
|
||||
Title: 'Suicide Squad',
|
||||
Genre: 'Action',
|
||||
'Revenue (Millions)': 325.02,
|
||||
Rating: 6.2
|
||||
},
|
||||
{
|
||||
Title: 'The Great Wall',
|
||||
Genre: 'Action',
|
||||
'Revenue (Millions)': 45.13,
|
||||
Rating: 6.1
|
||||
},
|
||||
{
|
||||
Title: 'La La Land',
|
||||
Genre: 'Comedy',
|
||||
'Revenue (Millions)': 151.06,
|
||||
Rating: 8.3
|
||||
},
|
||||
{
|
||||
Title: 'Mindhorn',
|
||||
Genre: 'Comedy',
|
||||
'Revenue (Millions)': null,
|
||||
Rating: 6.4
|
||||
},
|
||||
{
|
||||
Title: 'The Lost City of Z',
|
||||
Genre: 'Action',
|
||||
'Revenue (Millions)': 8.01,
|
||||
Rating: 7.1
|
||||
},
|
||||
{
|
||||
Title: 'Passengers',
|
||||
Genre: 'Adventure',
|
||||
'Revenue (Millions)': 100.01,
|
||||
Rating: 7
|
||||
},
|
||||
{
|
||||
Title: 'Fantastic Beasts and Where to Find Them',
|
||||
Genre: 'Adventure',
|
||||
'Revenue (Millions)': 234.02,
|
||||
Rating: 7.5
|
||||
},
|
||||
{
|
||||
Title: 'Hidden Figures',
|
||||
Genre: 'Other',
|
||||
'Revenue (Millions)': 169.27,
|
||||
Rating: 7.8
|
||||
},
|
||||
{
|
||||
Title: 'Rogue One',
|
||||
Genre: 'Action',
|
||||
'Revenue (Millions)': 532.17,
|
||||
Rating: 7.9
|
||||
},
|
||||
{
|
||||
Title: 'Moana',
|
||||
Genre: 'Animation',
|
||||
'Revenue (Millions)': 248.75,
|
||||
Rating: 7.7
|
||||
},
|
||||
{
|
||||
Title: 'Colossal',
|
||||
Genre: 'Action',
|
||||
'Revenue (Millions)': 2.87,
|
||||
Rating: 6.4
|
||||
},
|
||||
{
|
||||
Title: 'The Secret Life of Pets',
|
||||
Genre: 'Animation',
|
||||
'Revenue (Millions)': 368.31,
|
||||
Rating: 6.6
|
||||
},
|
||||
{
|
||||
Title: 'Hacksaw Ridge',
|
||||
Genre: 'Other',
|
||||
'Revenue (Millions)': 67.12,
|
||||
Rating: 8.2
|
||||
},
|
||||
{
|
||||
Title: 'Jason Bourne',
|
||||
Genre: 'Action',
|
||||
'Revenue (Millions)': 162.16,
|
||||
Rating: 6.7
|
||||
},
|
||||
{
|
||||
Title: 'Lion',
|
||||
Genre: 'Other',
|
||||
'Revenue (Millions)': 51.69,
|
||||
Rating: 8.1
|
||||
},
|
||||
{
|
||||
Title: 'Gold',
|
||||
Genre: 'Adventure',
|
||||
'Revenue (Millions)': 7.22,
|
||||
Rating: 6.7
|
||||
}
|
||||
]
|
||||
// 配置处理脚本
|
||||
const optionHandler = ''
|
||||
|
||||
// 数据处理脚本
|
||||
const dataHandler = ''
|
||||
|
||||
// 图表配置 new Line('domName', option)
|
||||
const option = {
|
||||
appendPadding: 10,
|
||||
data,
|
||||
xField: 'Revenue (Millions)',
|
||||
yField: 'Rating',
|
||||
colorField: 'Genre',
|
||||
shape: 'diamond',
|
||||
pointStyle: {
|
||||
fillOpacity: 0.8
|
||||
},
|
||||
color: ['#6b74e4', '#4391f4', '#38bbe5', '#69d6fd', '#36c6a0'],
|
||||
size: 4,
|
||||
yAxis: {
|
||||
nice: true,
|
||||
line: {
|
||||
style: {
|
||||
stroke: '#aaa'
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
min: -100,
|
||||
grid: {
|
||||
line: {
|
||||
style: {
|
||||
stroke: '#eee'
|
||||
}
|
||||
}
|
||||
},
|
||||
line: {
|
||||
style: {
|
||||
stroke: '#aaa'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
version,
|
||||
category,
|
||||
title,
|
||||
chartType,
|
||||
name,
|
||||
option,
|
||||
setting,
|
||||
optionHandler,
|
||||
dataHandler
|
||||
}
|
||||
Loading…
Reference in New Issue