|
|
@@ -0,0 +1,378 @@ |
|
|
|
import * as echarts from 'echarts'; |
|
|
|
import elementResizeDetectorMaker from 'element-resize-detector'; |
|
|
|
import fa from "element-ui/src/locale/lang/fa"; |
|
|
|
export default { |
|
|
|
props: { |
|
|
|
id: { |
|
|
|
type: String, |
|
|
|
default: 'bar' |
|
|
|
}, |
|
|
|
data: { |
|
|
|
type: Array, |
|
|
|
default: function () { |
|
|
|
return [ |
|
|
|
{ |
|
|
|
name: '1月', |
|
|
|
value: '10' |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '2月', |
|
|
|
value: '19' |
|
|
|
} |
|
|
|
]; |
|
|
|
} |
|
|
|
}, |
|
|
|
unit: { |
|
|
|
type: String, |
|
|
|
default: '单位:万元' |
|
|
|
}, |
|
|
|
color: { |
|
|
|
type: Array, |
|
|
|
default: function () { |
|
|
|
return ['rgba(15, 252, 252, 1)', 'rgba(53, 197, 124, 1)'] |
|
|
|
} |
|
|
|
}, |
|
|
|
barBorderRadius: { |
|
|
|
type: Array, |
|
|
|
default: function () { |
|
|
|
return [0, 0, 0, 0] |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
data () { |
|
|
|
return { |
|
|
|
chart: null |
|
|
|
}; |
|
|
|
}, |
|
|
|
mounted () { |
|
|
|
this.initChart(); |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 设置监听器 页面尺寸变化重新绘制图表 |
|
|
|
initResizeCallBack () { |
|
|
|
const erd = elementResizeDetectorMaker(); |
|
|
|
erd.listenTo(document.getElementById(this.id), () => { |
|
|
|
this.$nextTick(() => { |
|
|
|
this.chart.resize(); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
initChart () { |
|
|
|
this.chart = echarts.init(document.getElementById(this.id)); |
|
|
|
this.chartSetOption(); |
|
|
|
}, |
|
|
|
chartSetOption () { |
|
|
|
let xAxisData = []; |
|
|
|
let data = []; |
|
|
|
this.data.forEach(item => { |
|
|
|
xAxisData.push(item.name) |
|
|
|
data.push(item.value) |
|
|
|
}); |
|
|
|
const CubeLeft = echarts.graphic.extendShape({ |
|
|
|
shape: { |
|
|
|
x: 0, |
|
|
|
y: 0, |
|
|
|
}, |
|
|
|
buildPath: function (ctx, shape) { |
|
|
|
const xAxisPoint = shape.xAxisPoint; |
|
|
|
const c0 = [shape.x, shape.y]; |
|
|
|
const c1 = [shape.x - 9, shape.y - 9]; |
|
|
|
const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]; |
|
|
|
const c3 = [xAxisPoint[0], xAxisPoint[1]]; |
|
|
|
ctx |
|
|
|
.moveTo(c0[0], c0[1]) |
|
|
|
.lineTo(c1[0], c1[1]) |
|
|
|
.lineTo(c2[0], c2[1]) |
|
|
|
.lineTo(c3[0], c3[1]) |
|
|
|
.closePath(); |
|
|
|
}, |
|
|
|
}); |
|
|
|
const CubeRight = echarts.graphic.extendShape({ |
|
|
|
shape: { |
|
|
|
x: 0, |
|
|
|
y: 0, |
|
|
|
}, |
|
|
|
buildPath: function (ctx, shape) { |
|
|
|
const xAxisPoint = shape.xAxisPoint; |
|
|
|
const c1 = [shape.x, shape.y]; |
|
|
|
const c2 = [xAxisPoint[0], xAxisPoint[1]]; |
|
|
|
const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]; |
|
|
|
const c4 = [shape.x + 18, shape.y - 9]; |
|
|
|
ctx |
|
|
|
.moveTo(c1[0], c1[1]) |
|
|
|
.lineTo(c2[0], c2[1]) |
|
|
|
.lineTo(c3[0], c3[1]) |
|
|
|
.lineTo(c4[0], c4[1]) |
|
|
|
.closePath(); |
|
|
|
}, |
|
|
|
}); |
|
|
|
const CubeTop = echarts.graphic.extendShape({ |
|
|
|
shape: { |
|
|
|
x: 0, |
|
|
|
y: 0, |
|
|
|
}, |
|
|
|
buildPath: function (ctx, shape) { |
|
|
|
const c1 = [shape.x, shape.y]; |
|
|
|
const c2 = [shape.x + 18, shape.y - 9]; |
|
|
|
const c3 = [shape.x + 9, shape.y - 18]; |
|
|
|
const c4 = [shape.x - 9, shape.y - 9]; |
|
|
|
ctx |
|
|
|
.moveTo(c1[0], c1[1]) |
|
|
|
.lineTo(c2[0], c2[1]) |
|
|
|
.lineTo(c3[0], c3[1]) |
|
|
|
.lineTo(c4[0], c4[1]) |
|
|
|
.closePath(); |
|
|
|
}, |
|
|
|
}); |
|
|
|
echarts.graphic.registerShape("CubeLeft", CubeLeft); |
|
|
|
echarts.graphic.registerShape("CubeRight", CubeRight); |
|
|
|
echarts.graphic.registerShape("CubeTop", CubeTop); |
|
|
|
const MAX = [ |
|
|
|
500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, |
|
|
|
]; |
|
|
|
const VALUE = [ |
|
|
|
201, 123, 379, 234, 165, 123, 379, 234, 165, 379, 234, 165, |
|
|
|
]; |
|
|
|
const option = { |
|
|
|
// backgroundColor: "#010d3a", |
|
|
|
title: { |
|
|
|
text: "", |
|
|
|
top: 32, |
|
|
|
left: 18, |
|
|
|
textStyle: { |
|
|
|
color: "#00F6FF", |
|
|
|
fontSize: 24, |
|
|
|
}, |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
left: "0%", |
|
|
|
right: "0%", |
|
|
|
bottom: "5%", |
|
|
|
top: "15%", |
|
|
|
containLabel: true, |
|
|
|
z: 22, |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
splitArea: { |
|
|
|
show: false, |
|
|
|
areaStyle: { |
|
|
|
color: ['RGBA(13, 31, 64, 1)'] |
|
|
|
} |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: false, |
|
|
|
lineStyle: { |
|
|
|
color: ['rgba(18, 40, 83, 1)'], |
|
|
|
width: 100 |
|
|
|
} |
|
|
|
}, |
|
|
|
type: "category", |
|
|
|
gridIndex: 0, |
|
|
|
data: [ |
|
|
|
"A镇", |
|
|
|
"A镇", |
|
|
|
"A镇", |
|
|
|
"A镇", |
|
|
|
"A镇", |
|
|
|
"A镇", |
|
|
|
"A镇" |
|
|
|
], |
|
|
|
axisTick: { |
|
|
|
alignWithLabel: true, |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
lineStyle: { |
|
|
|
color: "#0c3b71", |
|
|
|
}, |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
show: true, |
|
|
|
color: 'rgba(185, 211, 235, 1)' |
|
|
|
} |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
name: this.unit, |
|
|
|
type: "value", |
|
|
|
nameTextStyle: { |
|
|
|
color: 'rgba(185, 211, 235, 1)' |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
formatter: "{value}", |
|
|
|
textStyle: { |
|
|
|
color: "rgba(185, 211, 235, 1)", |
|
|
|
}, |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
lineStyle: { |
|
|
|
color: "#27b4c2", |
|
|
|
}, |
|
|
|
}, |
|
|
|
axisTick: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: "#11366e", |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
type: "custom", |
|
|
|
renderItem: function (params, api) { |
|
|
|
const location = api.coord([api.value(0), api.value(1)]); |
|
|
|
return { |
|
|
|
type: "group", |
|
|
|
children: [ |
|
|
|
{ |
|
|
|
type: "CubeLeft", |
|
|
|
shape: { |
|
|
|
api, |
|
|
|
xValue: api.value(0), |
|
|
|
yValue: api.value(1), |
|
|
|
x: location[0], |
|
|
|
y: location[1], |
|
|
|
xAxisPoint: api.coord([api.value(0), 0]), |
|
|
|
}, |
|
|
|
style: { |
|
|
|
fill: "rgba(7,29,97,.6)", |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "CubeRight", |
|
|
|
shape: { |
|
|
|
api, |
|
|
|
xValue: api.value(0), |
|
|
|
yValue: api.value(1), |
|
|
|
x: location[0], |
|
|
|
y: location[1], |
|
|
|
xAxisPoint: api.coord([api.value(0), 0]), |
|
|
|
}, |
|
|
|
style: { |
|
|
|
fill: "rgba(10,35,108,.7)", |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "CubeTop", |
|
|
|
shape: { |
|
|
|
api, |
|
|
|
xValue: api.value(0), |
|
|
|
yValue: api.value(1), |
|
|
|
x: location[0], |
|
|
|
y: location[1], |
|
|
|
xAxisPoint: api.coord([api.value(0), 0]), |
|
|
|
}, |
|
|
|
style: { |
|
|
|
fill: "rgba(11,42,106,.8)", |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
}, |
|
|
|
data: MAX, |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "custom", |
|
|
|
renderItem: (params, api) => { |
|
|
|
const location = api.coord([api.value(0), api.value(1)]); |
|
|
|
return { |
|
|
|
type: "group", |
|
|
|
children: [ |
|
|
|
{ |
|
|
|
type: "CubeLeft", |
|
|
|
shape: { |
|
|
|
api, |
|
|
|
xValue: api.value(0), |
|
|
|
yValue: api.value(1), |
|
|
|
x: location[0], |
|
|
|
y: location[1], |
|
|
|
xAxisPoint: api.coord([api.value(0), 0]), |
|
|
|
}, |
|
|
|
style: { |
|
|
|
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|
|
|
{ |
|
|
|
offset: 0, |
|
|
|
color: "#10fafa", |
|
|
|
}, |
|
|
|
{ |
|
|
|
offset: 1, |
|
|
|
color: "#0a97a1", |
|
|
|
}, |
|
|
|
]), |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "CubeRight", |
|
|
|
shape: { |
|
|
|
api, |
|
|
|
xValue: api.value(0), |
|
|
|
yValue: api.value(1), |
|
|
|
x: location[0], |
|
|
|
y: location[1], |
|
|
|
xAxisPoint: api.coord([api.value(0), 0]), |
|
|
|
}, |
|
|
|
style: { |
|
|
|
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|
|
|
{ |
|
|
|
offset: 0, |
|
|
|
color: "#0a97a2", |
|
|
|
}, |
|
|
|
{ |
|
|
|
offset: 1, |
|
|
|
color: "#10fafa", |
|
|
|
}, |
|
|
|
]), |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "CubeTop", |
|
|
|
shape: { |
|
|
|
api, |
|
|
|
xValue: api.value(0), |
|
|
|
yValue: api.value(1), |
|
|
|
x: location[0], |
|
|
|
y: location[1], |
|
|
|
xAxisPoint: api.coord([api.value(0), 0]), |
|
|
|
}, |
|
|
|
style: { |
|
|
|
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|
|
|
{ |
|
|
|
offset: 0, |
|
|
|
color: "#10fcfc", |
|
|
|
}, |
|
|
|
{ |
|
|
|
offset: 1, |
|
|
|
color: "#10fcfc", |
|
|
|
}, |
|
|
|
]), |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
}, |
|
|
|
data: VALUE, |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "bar", |
|
|
|
label: { |
|
|
|
normal: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
}, |
|
|
|
itemStyle: { |
|
|
|
color: "transparent", |
|
|
|
}, |
|
|
|
data: MAX, |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
|
|
|
|
this.chart.setOption(option); |
|
|
|
this.initResizeCallBack(); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
}; |