npm install echarts@5.3.3 -S
公司需求：柱状图可以堆叠，最上面显示合计
看了半天官方文档，也只能看文档
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
// import echarts from 'echarts'
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '350px'
},
autoResize: {
type: Boolean,
default: true
},
chartData: {
type: Object,
required: true
}
},
data() {
return {
chart: null,
lineName1: '收入',
lineName2: '支出',
lineName3: '收入运费',
lineName4: '支出运费',
}
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
// this.chart = echarts.init(this.$el, 'macarons')
this.chart = echarts.init(this.$el)
this.setOptions(this.chartData)
},
setOptions({ incomeTotalList, expenditureTotalList, incomeList, expenditureList, incomeFreightList, expenditFreightureList, dateList } = {}) {
var options = {
xAxis: {
data: dateList, //['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
boundaryGap: true,//跳转图为false
axisTick: {
show: false
}
},
grid: {
left: 0,
right: 10,
bottom: 20,
top: 30,
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
padding: [5, 10],
formatter: (params, ticket, callback) => {
let str = '';
params.forEach((item, idx) => {
if (idx < 4) {
str += `${item.marker}${item.seriesName}: ${item.data}` + '</br>'
} else if (idx == 4) {
str += `${item.marker}${item.seriesName}: ` + incomeTotalList[item.dataIndex] + '</br>'
} else {
str += `${item.marker}${item.seriesName}: ` + expenditureTotalList[item.dataIndex] + '</br>'
}
})
return str
},
},
yAxis: {
axisTick: {
show: false
}
},
legend: {
data: [this.lineName1, this.lineName2, this.lineName3, this.lineName4]
},
series: [{
name: this.lineName1,
stack: 'income',
type: 'bar',
emphasis: {
focus: 'series'
},
data: incomeList,
animationDuration: 800,
},
{
name: this.lineName2,
stack: 'expend',
type: 'bar',
emphasis: {
focus: 'series'
},
data: expenditureList,
animationDuration: 800,
},
{
name: this.lineName3,
stack: 'income',
type: 'bar',
emphasis: {
focus: 'series'
},
data: incomeFreightList,
}, {
name: this.lineName4,
stack: 'expend',
type: 'bar',
emphasis: {
focus: 'series'
},
data: expenditFreightureList,
// }, {
// name: '合计收入',
// type: 'line',
// symbolSize: 0,
// lineStyle: {
// width: 0, // 线宽是0不显示线
// color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
// },
// emphasis: {
// focus: 'series'
// },
// data: incomeTotalList,
// }, {
// name: '合计支出',
// type: 'line',
// symbolSize: 0,
// lineStyle: {
// width: 0, // 线宽是0不显示线
// color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
// },
// emphasis: {
// focus: 'series'
// },
// data: expenditureTotalList,
}, {
name: '合计收入',
stack: 'income',
type: 'bar',
emphasis: {
focus: 'series'
},
label: {
position: 'top',
show: true,
formatter: params => {
return incomeTotalList[params.dataIndex]
},
},
data: [0, 0, 0, 0, 0, 0, 0],
}, {
name: '合计支出',
stack: 'expend',
type: 'bar',
emphasis: {
focus: 'series'
},
label: {
position: 'top',
show: true,
formatter: params => {
return expenditureTotalList[params.dataIndex]
},
},
data: [0, 0, 0, 0, 0, 0, 0],
},
]
}
this.chart.setOption(options)
}
}
}
</script>
网友评论