392 lines
9.1 KiB
JavaScript
392 lines
9.1 KiB
JavaScript
|
||
import { cloneDeep } from "lodash";
|
||
export default function useChartOption(source, type, enableLabel = true, other = null, max) {
|
||
let defaultOption = {
|
||
legend: {
|
||
type: "scroll",
|
||
orient: "horizontal",
|
||
bottom: 0,
|
||
left: "center",
|
||
padding: [10, 0, 0, 0],
|
||
itemGap: 5,
|
||
itemWidth: 10,
|
||
itemHeight: 10,
|
||
pageIconColor: "#6495ed", //翻页下一页的三角按钮颜色
|
||
pageIconInactiveColor: "#aaa", //翻页（即翻页到头时）
|
||
pageIconSize: 11, //翻页按钮大小
|
||
// pageFormatter: "", //隐藏翻页的数字
|
||
// pageButtonItemGap: -6, //翻页按钮的两个之间的间距
|
||
},
|
||
grid: { width: 'auto' },
|
||
tooltip: {
|
||
formatter: function (params) {
|
||
return `${params.value.title}: ${params.value.number} (${params.value.rate})`;
|
||
}
|
||
},
|
||
dataset: {
|
||
source: []
|
||
},
|
||
// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
|
||
series: []
|
||
}
|
||
|
||
let sourceData = cloneDeep(source)
|
||
|
||
defaultOption.dataset.source = sourceData
|
||
|
||
if (type == 'pie') {
|
||
sourceData = sourceData.map(item => {
|
||
let name = item.title
|
||
return {
|
||
...item,
|
||
name,
|
||
value: item.number
|
||
}
|
||
})
|
||
defaultOption.tooltip = {
|
||
formatter: function (params) {
|
||
if(params.value.icon) {
|
||
return `<span class="diagram-toolip-img">${params.value.icon}</span>${params.value.title}: ${params.value.number} (${params.value.rate})`;
|
||
}else {
|
||
return `${params.value.title}: ${params.value.number} (${params.value.rate})`;
|
||
}
|
||
}
|
||
}
|
||
defaultOption.dataset.source = sourceData
|
||
defaultOption.dataset.dimension= other ? other.dimension : null
|
||
defaultOption.series.push({
|
||
type: 'pie',
|
||
label: {
|
||
show: enableLabel ? true : false,
|
||
formatter: function(params) {
|
||
return `${params.data.title},${params.data.number}`
|
||
}
|
||
},
|
||
avoidLabelOverlap: true,
|
||
bottom: 15,
|
||
encode: other ? other.encode : null
|
||
})
|
||
console.log(defaultOption);
|
||
}
|
||
|
||
if (type === 'circle') {
|
||
sourceData = sourceData.map(item => {
|
||
let name = item.title
|
||
return {
|
||
...item,
|
||
name,
|
||
value: item.number
|
||
}
|
||
})
|
||
defaultOption.dataset.source = sourceData
|
||
defaultOption.dataset.dimension= other ? other.dimension : null
|
||
defaultOption.series.push({
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
center: ['50%', '50%'],
|
||
label: {
|
||
show: enableLabel ? true : false,
|
||
formatter: function(params) {
|
||
return `${params.data.title},${params.data.number}`
|
||
}
|
||
},
|
||
avoidLabelOverlap: true,
|
||
bottom: 15,
|
||
encode: other ? other.encode : null
|
||
})
|
||
}
|
||
|
||
if (type === 'bar') {
|
||
const xAxis = {
|
||
type: 'category',
|
||
triggerEvent: true,
|
||
axisLabel: {
|
||
interval: 0, //横轴信息全部显示
|
||
rotate: -56, //-15度角倾斜显示
|
||
formatter(value) {
|
||
if (value.length > 5) {
|
||
return value.slice(0, 4)+'...'
|
||
}
|
||
return value;
|
||
},
|
||
},
|
||
}
|
||
const yAxis = {
|
||
type: "value",
|
||
axisLabel: {
|
||
margin: 4,
|
||
}
|
||
}
|
||
defaultOption.color = ['#70b936']
|
||
defaultOption.dataZoom = sourceData.length > 8 ?
|
||
[
|
||
{
|
||
type: 'slider',
|
||
show: true,
|
||
minValueSpan: 5,
|
||
maxValueSpan: 8,
|
||
handleSize: 4,
|
||
filterMode: 'filter',
|
||
xAxisIndex: [0],
|
||
height: 10,
|
||
backgroundColor: '#fff',
|
||
dataBackground: {
|
||
areaStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
brushStyle: {
|
||
color: '#fff'
|
||
},
|
||
showDetail: false,
|
||
showDataShadow: false,
|
||
bottom: 5
|
||
},
|
||
] : null
|
||
defaultOption.legend = null
|
||
defaultOption.grid.bottom = '70'
|
||
defaultOption.xAxis = xAxis
|
||
defaultOption.yAxis = yAxis
|
||
|
||
defaultOption.series.push({
|
||
type: 'bar',
|
||
encode: {
|
||
x: 'title',
|
||
y: 'number'
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: enableLabel ? true : false, //开启显示
|
||
position: "top", //在上方显示
|
||
},
|
||
},
|
||
},
|
||
})
|
||
console.log(defaultOption);
|
||
}
|
||
|
||
if (type === 'horizontalBar') {
|
||
const xAxis = {
|
||
type: 'category',
|
||
axisLabel: {
|
||
formatter(value) {
|
||
if (value.length > 5) {
|
||
return value.slice(0, 4)+'...'
|
||
}
|
||
return value;
|
||
},
|
||
},
|
||
}
|
||
const yAxis = {
|
||
show: true,
|
||
type: "value",
|
||
axisLabel: {
|
||
margin: 4,
|
||
}
|
||
}
|
||
defaultOption.color = ['#70b936']
|
||
|
||
defaultOption.dataZoom = defaultOption.dataZoom = sourceData.length > 8 ?[
|
||
{
|
||
type: 'slider',
|
||
yAxisIndex: [0],
|
||
show: true,
|
||
minValueSpan: 5,
|
||
maxValueSpan: 8,
|
||
width: 10,
|
||
handleSize: 4,
|
||
filterMode: 'filter',
|
||
backgroundColor: '#fff',
|
||
dataBackground: {
|
||
areaStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
brushStyle: {
|
||
color: '#fff'
|
||
},
|
||
showDataShadow: false,
|
||
showDetail: false,
|
||
bottom: 10
|
||
},
|
||
] : null
|
||
defaultOption.legend = null
|
||
defaultOption.grid.top = '30'
|
||
defaultOption.grid.left = '70'
|
||
defaultOption.grid.right = '100'
|
||
defaultOption.grid.bottom = '30'
|
||
defaultOption.xAxis = yAxis
|
||
defaultOption.yAxis = xAxis
|
||
defaultOption.series.push({
|
||
type: 'bar',
|
||
encode: {
|
||
x: 'number',
|
||
y: 'title'
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: enableLabel ? true : false, //开启显示
|
||
position: "right", //在上方显示
|
||
},
|
||
},
|
||
},
|
||
})
|
||
}
|
||
|
||
if (type === "line") {
|
||
const xAxis = {
|
||
type: 'category',
|
||
triggerEvent: true,
|
||
axisLabel: {
|
||
interval: 0, //横轴信息全部显示
|
||
rotate: -56, //-15度角倾斜显示
|
||
formatter(value) {
|
||
if (value.length > 5) {
|
||
return value.slice(0, 4)+'...'
|
||
}
|
||
return value;
|
||
},
|
||
},
|
||
}
|
||
|
||
const yAxis = {
|
||
type: "value",
|
||
axisLabel: {
|
||
margin: 4,
|
||
}
|
||
}
|
||
defaultOption.color = ['#70b936']
|
||
|
||
defaultOption.xAxis = xAxis
|
||
defaultOption.yAxis = yAxis
|
||
defaultOption.series.push({
|
||
type: 'line',
|
||
encode: {
|
||
x: 'title',
|
||
y: 'number'
|
||
},
|
||
label: {
|
||
show: enableLabel ? true : false,
|
||
},
|
||
})
|
||
}
|
||
|
||
if (type === 'radar') {
|
||
const legendData = sourceData.map(item => item.title)
|
||
const indicator = legendData.map(name => {
|
||
return {
|
||
name,
|
||
max
|
||
}
|
||
})
|
||
const seriesData = sourceData.map(item =>item.number)
|
||
const tooltipText = sourceData.map(item =>item.title + ': ' + '\xa0' + item.number + '\xa0' + '（' + item.rate + '）' + '<br />')
|
||
defaultOption = {
|
||
// legend: {
|
||
// data: legendData
|
||
// },
|
||
tooltip: {
|
||
formatter:(params)=>{
|
||
return tooltipText.join('')
|
||
}
|
||
},
|
||
color: ['#70b936'],
|
||
radar: {
|
||
indicator
|
||
},
|
||
series: [
|
||
{
|
||
type: 'radar',
|
||
data: [
|
||
{
|
||
value: seriesData,
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
}
|
||
|
||
if (type === 'multi-bar') {
|
||
const xAxis = {
|
||
type: 'category'
|
||
}
|
||
const yAxis = {
|
||
type: "value",
|
||
axisLabel: {
|
||
margin: 4,
|
||
}
|
||
}
|
||
defaultOption.legend = null
|
||
defaultOption.grid.bottom = '40'
|
||
defaultOption.tooltip = {}
|
||
defaultOption.xAxis = xAxis
|
||
defaultOption.yAxis = yAxis
|
||
const num = defaultOption.dataset.source.length - 1
|
||
for (let i = 0; i <= num; i++) {
|
||
const item = {
|
||
type: 'bar',
|
||
label: {
|
||
show: true,
|
||
position: 'top'
|
||
}
|
||
}
|
||
defaultOption.series.push(item)
|
||
}
|
||
}
|
||
|
||
if (type === 'multi-horizontal-bar') {
|
||
const xAxis = {
|
||
type: 'category'
|
||
}
|
||
const yAxis = {
|
||
type: "value",
|
||
axisLabel: {
|
||
margin: 4,
|
||
}
|
||
}
|
||
defaultOption.legend = null
|
||
defaultOption.tooltip = {}
|
||
defaultOption.grid.left = '50'
|
||
defaultOption.xAxis = yAxis
|
||
defaultOption.yAxis = xAxis
|
||
const num = defaultOption.dataset.source.length - 1
|
||
for (let i = 0; i <= num; i++) {
|
||
const item = {
|
||
type: 'bar',
|
||
label: {
|
||
show: true,
|
||
position: 'right'
|
||
}
|
||
}
|
||
defaultOption.series.push(item)
|
||
}
|
||
}
|
||
|
||
if(type === 'multi-line') {
|
||
const xAxis = {
|
||
type: 'category'
|
||
}
|
||
const yAxis = {
|
||
type: "value",
|
||
axisLabel: {
|
||
margin: 4,
|
||
}
|
||
}
|
||
defaultOption.xAxis = xAxis
|
||
defaultOption.yAxis = yAxis
|
||
defaultOption.tooltip = {}
|
||
const num = defaultOption.dataset.source.length - 1
|
||
for (let i = 0; i <= num; i++) {
|
||
const item = {
|
||
type: 'line',
|
||
}
|
||
defaultOption.series.push(item)
|
||
}
|
||
}
|
||
console.log('defaultOption',defaultOption);
|
||
return defaultOption
|
||
}
|