<!--********************************************************
|
|
*FileName: barChart.vue
|
*Description: 柱状，折线，横向柱状 图表
|
*<EcharsBarLine :param="param" :width="width" :height="height"></EcharsBarLine>
|
*
|
|
********************************************************-->
|
<template>
|
<div :style="{width:width, height:height}" :class="barEcharts"></div>
|
</template>
|
|
<script>
|
// 引入echarts
|
import * as echarts from 'echarts'
|
export default {
|
name: 'EcharsBar',
|
props: {
|
barEcharts: {
|
type: String,
|
default: 'chart'
|
},
|
width: {
|
type: String,
|
default: ''
|
},
|
height: {
|
type: String,
|
default: ''
|
},
|
param: {
|
type: Object,
|
default: () => {}
|
}
|
},
|
data() {
|
return {
|
data: {
|
title: {
|
right: 'right',
|
textStyle: {
|
fontSize: 15
|
},
|
text: '图表组件'
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
grid: {
|
left: '5%',
|
top: '10%',
|
right: '10%',
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis: {
|
position: 'top',
|
type: 'value',
|
axisLine: { // x轴坐标轴，false为隐藏，true为显示
|
show: false
|
}
|
},
|
yAxis: {
|
type: 'category',
|
data: [0, 1, 2]
|
},
|
series: [
|
{
|
stack: 'a',
|
name: 'a',
|
type: 'bar',
|
data: [0, 1, 2],
|
color: 'red',
|
label: {
|
show: true,
|
position: 'right'
|
},
|
showBackground: true
|
}
|
]
|
},
|
chart: null
|
}
|
},
|
created() {
|
if (this.param.chartType === 'transverse') {
|
this.transverse()
|
} else if (this.param.chartType === 'portrait') {
|
this.portrait()
|
for (let i = 1; i < this.param.seriesCount; i++) {
|
this.data.series[i] = {
|
stack: this.param.seriesStack[i],
|
name: this.param.seriesName[i],
|
type: this.param.seriesType[i],
|
data: this.param.seriesData[i],
|
color: this.param.seriesColorData[i],
|
yAxisIndex: this.param.yAxisIndexData[i]
|
}
|
}
|
}
|
},
|
watch: {
|
param: {
|
immediate: true,
|
deep: true,
|
handler(newVal, oldVal) {
|
if (this.chart) {
|
if (newVal) {
|
if (newVal.chartType === 'transverse') {
|
this.transverse()
|
} else if (newVal.chartType === 'portrait') {
|
this.portrait()
|
for (let i = 1; i < newVal.seriesCount; i++) {
|
this.data.series[i] = {
|
barMaxWidth: newVal.barMaxWidth || '50',
|
stack: newVal.seriesStack[i],
|
name: newVal.seriesName[i],
|
type: newVal.seriesType[i],
|
data: newVal.seriesData[i],
|
color: newVal.seriesColorData[i],
|
yAxisIndex: newVal.yAxisIndexData[i]
|
}
|
}
|
}
|
this.initChart()
|
} else {
|
if (oldVal.chartType === 'transverse') {
|
this.transverse()
|
} else if (oldVal.chartType === 'portrait') {
|
this.portrait()
|
for (let i = 1; i < oldVal.seriesCount; i++) {
|
this.data.series[i] = {
|
barMaxWidth: newVal.barMaxWidth || '50',
|
stack: oldVal.seriesStack[i],
|
name: oldVal.seriesName[i],
|
type: oldVal.seriesType[i],
|
data: oldVal.seriesData[i],
|
color: oldVal.seriesColorData[i],
|
yAxisIndex: oldVal.yAxisIndexData[i]
|
}
|
}
|
}
|
this.initChart()
|
}
|
}
|
}
|
}
|
},
|
mounted() {
|
this.initChart()
|
if (this.chart) {
|
window.addEventListener('resize', this.$_handleResizeChart)
|
}
|
},
|
beforeDestroy() {
|
if (!this.chart) {
|
return false
|
}
|
this.chart.dispose()
|
this.chart = null
|
window.removeEventListener('resize', this.$_handleResizeChart)
|
},
|
methods: {
|
// 横向
|
transverse() {
|
this.data = {
|
title: {
|
right: 'right',
|
textStyle: {
|
fontSize: 15
|
},
|
text: this.param.textTitle // 图表名称，如果为横向图，也充当总结
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
},
|
formatter: '{a}<br/>{b}:{c}' + this.param.tooltipUnit // 每条柱状图的详情框单位
|
},
|
grid: {
|
top: this.param.gridData[0], // 图表位置
|
bottom: this.param.gridData[1],
|
left: this.param.gridData[2],
|
right: this.param.gridData[3],
|
containLabel: true
|
},
|
xAxis: {
|
position: 'top',
|
type: 'value',
|
axisLine: { // x轴坐标轴，false为隐藏，true为显示
|
show: false
|
},
|
axisLabel: {
|
show: this.param.XaxisLabelDisplay
|
},
|
splitLine: {
|
show: this.param.XsplitLinedisplay
|
},
|
axisTick: {
|
show: this.param.XaxisTickdisplay
|
}
|
},
|
yAxis: {
|
axisLine: { // x轴坐标轴，false为隐藏，true为显示
|
show: this.param.YXdisplay
|
},
|
splitLine: {
|
show: this.param.YXdisplay
|
},
|
axisTick: {
|
show: this.param.YXdisplay
|
},
|
type: 'category',
|
data: this.param.yAxisData,
|
axisLabel: {
|
show: true,
|
fontSize: this.param.axisLabelSize// 字体大小
|
}
|
},
|
series: [
|
{
|
stack: this.param.seriesStack[0],
|
name: this.param.seriesName[0],
|
type: this.param.seriesType[0],
|
data: this.param.yAxisSeriesData,
|
yAxisIndex: this.param.yAxisIndexData[0],
|
itemStyle: {
|
borderRadius: [0, 10, 10, 0],
|
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
{ offset: 0, color: this.param.itemStyleColora },
|
{ offset: 1, color: this.param.itemStyleColorb }
|
]),
|
borderWidth: 1,
|
borderColor: 'black'
|
},
|
barWidth: this.param.barWidth,
|
label: {
|
normal: {
|
show: true, // 是否显示
|
position: 'right', // 文字位置
|
formatter: '{c}' + this.param.labelUnit// c后面加单位
|
|
}
|
},
|
showBackground: true
|
}
|
]
|
}
|
},
|
// 纵向图
|
portrait() {
|
this.data = {
|
title: {
|
text: this.param.textTitle
|
},
|
grid: {
|
containLabel: true,
|
left: '1%',
|
top: '8%',
|
right: '5%',
|
bottom: '10%'
|
},
|
legend: {
|
Data: this.param.seriesName,
|
top: 'bottom',
|
textStyle: {
|
color: 'black', // 坐标值得具体的颜色
|
fontSize: this.param.legendLabelSize
|
}
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
},
|
formatter: this.param.tooltipUnit
|
},
|
xAxis: {
|
data: this.param.xAxisData,
|
axisLabel: {
|
rotate: this.param.xAxisLabelrotate,
|
textStyle: {
|
color: 'black', // 坐标值得具体的颜色
|
fontSize: this.param.xAxisLabelSize
|
}
|
},
|
splitLine: { // 显示分割线
|
show: this.param.xAxisSplitLine || false
|
},
|
axisLine: { // x轴坐标轴，false为隐藏，true为显示
|
show: this.param.xAxisAxisLine || false
|
},
|
axisTick: {
|
show: this.param.xAxisAxisTick || false
|
}
|
},
|
yAxis: [
|
{
|
type: 'value',
|
position: 'left',
|
splitLine: { // 显示分割线
|
show: this.param.yAxisSplitLine || false
|
},
|
axisLine: { // x轴坐标轴，false为隐藏，true为显示
|
show: this.param.yAxisAxisLine || false
|
},
|
axisTick: {
|
show: this.param.yAxisAxisTick || false
|
},
|
axisLabel: {
|
formatter: '{value}' + this.param.yAxisLeftUnit
|
}
|
},
|
{
|
type: 'value',
|
position: 'right',
|
splitLine: { // 显示分割线
|
show: this.param.yAxisRightSplitLine || false
|
},
|
axisLine: {
|
show: this.param.yAxisRightDisplay || false,
|
lineStyle: {
|
color: 'black'
|
}
|
},
|
axisTick: {
|
show: this.param.yAxisRightAxisTick || false
|
},
|
axisLabel: {
|
formatter: '{value}' + this.param.yAxisRightUnit
|
}
|
}
|
],
|
series: [
|
{
|
barGap: this.param.barGap,
|
barMaxWidth: this.param.barMaxWidth || '50',
|
stack: this.param.seriesStack[0],
|
name: this.param.seriesName[0],
|
type: this.param.seriesType[0],
|
data: this.param.seriesData[0],
|
color: this.param.seriesColorData[0],
|
yAxisIndex: this.param.yAxisIndexData[0]
|
}
|
]
|
}
|
// if (this.param.seriesCount == this.val) {
|
// this.data.series = this.data.series.slice(0, this.val)
|
// }
|
},
|
$_handleResizeChart() {
|
this.chart.resize()
|
},
|
setOptions() {
|
this.chart.setOption(this.data)
|
},
|
initChart() {
|
this.chart = echarts.init(this.$el)
|
this.chart.clear()
|
this.setOptions(this.data)
|
}
|
}
|
}
|
</script>
|
