|
|
import * as echarts from 'echarts'
|
|
|
// 配置版本号
|
|
|
const version = '2023091901'
|
|
|
// 标题
|
|
|
const title = '3D分组柱状图'
|
|
|
// 用于标识，唯一，和文件夹名称一致
|
|
|
const name = '3DFenZuZhuZhuangTu'
|
|
|
|
|
|
// 右侧配置项
|
|
|
const setting = [
|
|
|
{
|
|
|
label: '维度',
|
|
|
type: 'select', // 设置组件类型
|
|
|
field: 'xField', // 字段
|
|
|
optionField: 'xField', // 对应options中的字段
|
|
|
// 是否多选
|
|
|
multiple: false,
|
|
|
value: '',
|
|
|
tabName: 'data'
|
|
|
},
|
|
|
{
|
|
|
label: '指标',
|
|
|
type: 'select', // 设置组件类型
|
|
|
field: 'yField', // 字段
|
|
|
optionField: 'yField', // 对应options中的字段
|
|
|
// 是否多选
|
|
|
multiple: false,
|
|
|
value: '',
|
|
|
tabName: 'data'
|
|
|
},
|
|
|
{
|
|
|
label: '分组字段',
|
|
|
type: 'select', // 设置组件类型
|
|
|
field: 'seriesField', // 字段
|
|
|
optionField: 'seriesField', // 对应options中的字段
|
|
|
// 是否多选
|
|
|
multiple: false,
|
|
|
value: '',
|
|
|
tabName: 'data'
|
|
|
},
|
|
|
{
|
|
|
label: '柱子顶部颜色',
|
|
|
type: 'colorPicker', // 设置组件类型
|
|
|
field: 'seriesCustom_barTopColor', // 字段
|
|
|
optionField: 'seriesCustom.barTopColor', // 对应options中的字段
|
|
|
value: '#2DB1EF',
|
|
|
tabName: 'custom',
|
|
|
groupName: 'graph'
|
|
|
},
|
|
|
{
|
|
|
label: '柱子颜色1',
|
|
|
type: 'colorPicker', // 设置组件类型
|
|
|
field: 'seriesCustom_barColor1', // 字段
|
|
|
optionField: 'seriesCustom.barColor1', // 对应options中的字段
|
|
|
value: '#115ba6',
|
|
|
tabName: 'custom',
|
|
|
groupName: 'graph'
|
|
|
},
|
|
|
{
|
|
|
label: '柱子颜色2',
|
|
|
type: 'colorPicker', // 设置组件类型
|
|
|
field: 'seriesCustom_barColor2', // 字段
|
|
|
optionField: 'seriesCustom.barColor2', // 对应options中的字段
|
|
|
value: '#1db0dd',
|
|
|
tabName: 'custom',
|
|
|
groupName: 'graph'
|
|
|
},
|
|
|
{
|
|
|
label: '柱子底部颜色',
|
|
|
type: 'colorPicker', // 设置组件类型
|
|
|
field: 'seriesCustom_barBottomColor', // 字段
|
|
|
optionField: 'seriesCustom.barBottomColor', // 对应options中的字段
|
|
|
value: '#187dcb',
|
|
|
tabName: 'custom',
|
|
|
groupName: 'graph'
|
|
|
},
|
|
|
{
|
|
|
label: '柱子背景顶部颜色',
|
|
|
type: 'colorPicker', // 设置组件类型
|
|
|
field: 'seriesCustom_shadowTopColor', // 字段
|
|
|
optionField: 'seriesCustom.shadowTopColor', // 对应options中的字段
|
|
|
value: '#142f5a',
|
|
|
tabName: 'custom',
|
|
|
groupName: 'graph'
|
|
|
},
|
|
|
{
|
|
|
label: '柱子背景颜色',
|
|
|
type: 'colorPicker', // 设置组件类型
|
|
|
field: 'seriesCustom_shadowColor', // 字段
|
|
|
optionField: 'seriesCustom.shadowColor', // 对应options中的字段
|
|
|
value: '#041133',
|
|
|
tabName: 'custom',
|
|
|
groupName: 'graph'
|
|
|
}
|
|
|
]
|
|
|
|
|
|
// 配置处理脚本
|
|
|
const optionHandler = ''
|
|
|
|
|
|
// 数据处理脚本
|
|
|
const dataHandler = ''
|
|
|
|
|
|
// 图表配置 new Line('domName', option)
|
|
|
const xData = ['本年话务总量', '本年人工话务量', '每万客户呼入量', '每万客户呼入量'
|
|
|
]
|
|
|
const yData1 = [300, 1230, 425, 1200]
|
|
|
const yData2 = [400, 400, 400, 1200]
|
|
|
const maxData1 = [1500, 1500, 1500, 1500]
|
|
|
const maxData2 = [1500, 1500, 1500, 1500]
|
|
|
const option = {
|
|
|
animation: false,
|
|
|
tooltip: {
|
|
|
show: true
|
|
|
},
|
|
|
grid: {
|
|
|
left: '15%',
|
|
|
right: '5%',
|
|
|
bottom: '15%',
|
|
|
z: 100,
|
|
|
containLabel: false,
|
|
|
show: false
|
|
|
},
|
|
|
graphic: {
|
|
|
type: 'group',
|
|
|
bottom: '8%',
|
|
|
left: '10%',
|
|
|
z: 100,
|
|
|
children: [
|
|
|
{
|
|
|
type: 'rect',
|
|
|
left: 0,
|
|
|
bottom: 0,
|
|
|
shape: {
|
|
|
width: 400,
|
|
|
height: 10
|
|
|
},
|
|
|
style: {
|
|
|
fill: '#3f4867'
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
type: 'polygon',
|
|
|
left: 0,
|
|
|
bottom: 10,
|
|
|
shape: {
|
|
|
// 左上、右上、右下、左下
|
|
|
points: [[40, -50], [360, -50], [400, 0], [0, 0]]
|
|
|
},
|
|
|
style: {
|
|
|
fill: '#303256'
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: 'category',
|
|
|
data: xData,
|
|
|
// 坐标轴刻度设置:x轴数据展示
|
|
|
axisTick: {
|
|
|
show: true,
|
|
|
alignWithLabel: true
|
|
|
},
|
|
|
// 横坐标颜色
|
|
|
nameTextStyle: {
|
|
|
color: '#82b0ec'
|
|
|
},
|
|
|
// 是否显示坐标轴的轴线
|
|
|
axisLine: {
|
|
|
show: false
|
|
|
},
|
|
|
// 坐标轴刻度标签
|
|
|
axisLabel: {
|
|
|
textStyle: {
|
|
|
fontSize: 10,
|
|
|
color: 'rgb(40, 129, 170)'
|
|
|
},
|
|
|
margin: 30
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
type: 'category',
|
|
|
axisLine: {
|
|
|
show: false
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: false
|
|
|
},
|
|
|
splitArea: {
|
|
|
show: false
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false
|
|
|
},
|
|
|
data: xData
|
|
|
}
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
show: true, // y轴文本标签显示
|
|
|
type: 'value',
|
|
|
axisLabel: {
|
|
|
textStyle: {
|
|
|
color: 'rgb(40, 129, 170)'
|
|
|
}
|
|
|
},
|
|
|
// 分隔线
|
|
|
splitLine: {
|
|
|
show: false // yAxis.show配置为true时，该配置才有效
|
|
|
},
|
|
|
// y轴轴线是否显示
|
|
|
axisLine: {
|
|
|
show: true
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
seriesCustom: {
|
|
|
barTopColor: '#2DB1EF',
|
|
|
barBottomColor: '#187dcb',
|
|
|
barColor1: '#115ba6',
|
|
|
barColor2: '#1db0dd',
|
|
|
shadowColor: '#041133',
|
|
|
shadowTopColor: '#142f5a'
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: 'y1柱子顶部',
|
|
|
type: 'pictorialBar',
|
|
|
tooltip: { show: false },
|
|
|
symbol: 'diamond',
|
|
|
symbolSize: [30, 10],
|
|
|
symbolOffset: ['-60%', -5],
|
|
|
symbolPosition: 'end',
|
|
|
z: 15,
|
|
|
zlevel: 2,
|
|
|
color: 'rgba(2, 175, 249,1)',
|
|
|
data: yData1
|
|
|
},
|
|
|
{
|
|
|
name: 'y2柱子顶部',
|
|
|
type: 'pictorialBar',
|
|
|
tooltip: { show: false },
|
|
|
symbol: 'diamond',
|
|
|
symbolSize: [30, 10],
|
|
|
symbolOffset: ['60%', -5],
|
|
|
symbolPosition: 'end',
|
|
|
z: 15,
|
|
|
zlevel: 2,
|
|
|
color: 'rgba(45, 206, 177,0.9)',
|
|
|
data: yData2
|
|
|
},
|
|
|
{
|
|
|
name: 'y1',
|
|
|
type: 'bar',
|
|
|
barGap: '20%',
|
|
|
30: 30,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: '#115ba6'
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: '#1db0dd'
|
|
|
}
|
|
|
]),
|
|
|
opacity: 0.8,
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
|
|
|
shadowBlur: 0 // 阴影模糊值
|
|
|
}
|
|
|
},
|
|
|
label: {
|
|
|
show: false
|
|
|
},
|
|
|
zlevel: 2,
|
|
|
z: 12,
|
|
|
data: yData1
|
|
|
},
|
|
|
{
|
|
|
name: 'y2',
|
|
|
type: 'bar',
|
|
|
// barGap: '60%',
|
|
|
30: 30,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: '#73eccd'
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: '#4dd9e5'
|
|
|
}
|
|
|
]),
|
|
|
opacity: 0.8,
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
|
|
|
shadowBlur: 0 // 阴影模糊值
|
|
|
}
|
|
|
},
|
|
|
label: {
|
|
|
show: false
|
|
|
},
|
|
|
zlevel: 2,
|
|
|
z: 12,
|
|
|
data: yData2
|
|
|
},
|
|
|
{
|
|
|
name: 'y1柱子底部',
|
|
|
type: 'pictorialBar',
|
|
|
tooltip: { show: false },
|
|
|
symbol: 'diamond',
|
|
|
symbolSize: [30, 10],
|
|
|
symbolOffset: ['-60%', 5],
|
|
|
zlevel: 2,
|
|
|
z: 15,
|
|
|
color: 'rgb(2, 192, 255)',
|
|
|
data: yData1
|
|
|
},
|
|
|
{
|
|
|
name: 'y2柱子底部',
|
|
|
type: 'pictorialBar',
|
|
|
tooltip: { show: false },
|
|
|
symbol: 'diamond',
|
|
|
symbolSize: [30, 10],
|
|
|
symbolOffset: ['60%', 5],
|
|
|
zlevel: 2,
|
|
|
z: 15,
|
|
|
color: 'rgba(45, 206, 177,0.9)',
|
|
|
data: yData2
|
|
|
},
|
|
|
{
|
|
|
name: '背景柱子1',
|
|
|
type: 'bar',
|
|
|
tooltip: { show: false },
|
|
|
xAxisIndex: 1,
|
|
|
barGap: '20%',
|
|
|
data: maxData1,
|
|
|
zlevel: 1,
|
|
|
30: 30,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: 'rgba(9, 44, 76,.8)'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
name: '背景柱子2',
|
|
|
type: 'bar',
|
|
|
tooltip: { show: false },
|
|
|
xAxisIndex: 1,
|
|
|
barGap: '20%',
|
|
|
data: maxData2,
|
|
|
zlevel: 1,
|
|
|
30: 30,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: 'rgba(16, 56, 70,.8)'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
name: 'y1背景柱子顶部',
|
|
|
type: 'pictorialBar',
|
|
|
tooltip: { show: false },
|
|
|
symbol: 'diamond',
|
|
|
symbolSize: [30, 10],
|
|
|
symbolOffset: ['-60%', -5],
|
|
|
symbolPosition: 'end',
|
|
|
z: 15,
|
|
|
color: 'rgb(15, 69, 133)',
|
|
|
zlevel: 1,
|
|
|
data: maxData1
|
|
|
},
|
|
|
{
|
|
|
name: 'y2背景柱子顶部',
|
|
|
type: 'pictorialBar',
|
|
|
tooltip: { show: false },
|
|
|
symbol: 'diamond',
|
|
|
symbolSize: [30, 10],
|
|
|
symbolOffset: ['60%', -5],
|
|
|
symbolPosition: 'end',
|
|
|
z: 15,
|
|
|
color: 'rgb(30, 100, 112)',
|
|
|
zlevel: 1,
|
|
|
data: maxData2
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
export default {
|
|
|
version,
|
|
|
title,
|
|
|
name,
|
|
|
option,
|
|
|
setting,
|
|
|
optionHandler,
|
|
|
dataHandler
|
|
|
}
|