echarts组件——条形统计图

竖向条形统计图，单柱状，多柱状，悬浮框展示
在这里插入图片描述

组件代码

<template><div :class="classname" :style="{height:height,width:width}" />
</template><script>
// 柱状图
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'const animationDuration = 2000export default {mixins: [resize],props: {classname: {type: String,default: 'chart'},width: {type: String,default: '100%'},height: {type: String,default: '100%'},color: { // 柱状条颜色type: Array,default: () => ['#6493FE', '#58c971', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']},xaxisdata: { // x轴数据type: Array,default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},legenddata: { // 图例type: Array,default: () => ['Direct','Mail Ad','Affiliate Ad','Video Ad','Search Engine']},legendshow: { // 图例显示type: Boolean,default: () => false},bardata: { // 数据type: Array,default: () => [[100, 302, 301, 334, 390, 330, 320],[320, 132, 101, 134, 90, 230, 210],[220, 182, 191, 234, 290, 330, 310],[150, 212, 201, 154, 190, 330, 410],[820, 832, 901, 934, 1290, 1330, 1320]]},totalname: { // tooltip内容 共计的名字type: String,default: '共计'},tooltipxcustom: { // 悬浮框的标题自定义type: Boolean,default: false},xaxisvalue: { // 悬浮框标题自定义要展示的数据type: Array,default: () => []},tooltipunitcustom: { // 悬浮框的数据的单位，比如加%号type: String,default: ''},barwidth: {type: String,default: '20%'}},data() {return {series: [],chart: null}},watch: {bardata: {deep: true,handler(val) {this.$nextTick(() => {this.series = this.legenddata.map((name, sid) => {return {name,type: 'bar',barWidth: this.barwidth,data: this.bardata[sid],animationDuration,barGap: 0 // 相邻柱子的间隔}})this.initChart()})}}},mounted() {},beforeDestroy() {if (!this.chart) {return}this.chart.dispose()this.chart = null},methods: {initChart() {if (this.chart) {this.chart.dispose()}this.chart = echarts.init(this.$el, 'macarons')this.chart.setOption({color: this.color,tooltip: {trigger: 'axis',axisPointer: { // 坐标轴指示器，坐标轴触发有效type: 'line' // 默认为直线，可选为：'line' | 'shadow'},formatter: (params) => {let result = `<div>${this.tooltipxcustom ? this.xaxisvalue[params[0].dataIndex] : params[0].axisValue}</div>`params.map((item, index) => {result += `<div style="display: flex; justify-content: space-between"><span>${item.seriesName}:  </span><span>${item.value}${item.value !== '--' ? this.tooltipunitcustom : ''}</span></div>`})return result}},legend: {icon: 'circle',top: '0',right: '0',show: this.legendshow,data: this.legenddata// bottom: '0'},grid: {top: '8%',left: '2%',right: '2%',bottom: '15',containLabel: true},xAxis: [{type: 'category',data: this.xaxisdata,axisTick: {show: false, // 隐藏x轴的分割点alignWithLabel: true},axisLabel: {interval: 0 // x轴标签全部显示},axisLine: {lineStyle: {color: '#86909C'}}}],yAxis: [{type: 'value',axisTick: {show: false},axisLine: {lineStyle: {color: '#86909C'}},splitLine: {show: true,lineStyle: {color: '#E5E6EB',type: 'dashed'}},splitArea: {show: false}}],series: this.series})}}
}
</script>

使用组件，传值格式可以看组件的默认数据的格式
在这里插入图片描述