Vue 封装echarts柱状图（Bar）组件

目的：减少重复代码，便于维护

显示效果

组件代码

<template><div class="ldw-data-content-box"><div class="ldw-chilren-box"><div class="title" v-if="title">{{ title }}</div><div style="width:100%;flex:1;"><div :id="'canvas-box'+number" style="width: 100%;height:100%;"></div></div></div></div>
</template><script>
var echarts = require("echarts");
const total = function(data){return data.reduce((prev,cur)=>{return prev+cur.value},0)
}
export default {props:{title:"",data:{require:true,type:Array,default:()=>[]},w:{type:String,default:"auto"},column:{type:Boolean,default:true}},data(){return{bg:["#0090FF","#31CFB8","#E55240"],number:null,top:0,h:100,myChart:null}},watch: {data: {//深度监听，可监听到对象、数组的变化handler(val, oldVal) {this.initData();},deep: true, //true 深度监听}},created(){this.number = Math.random(1000)+1;},mounted(){this.initData()},methods:{initData(){let that = thislet canvas = document.getElementById(`canvas-box${this.number}`)this.myChart = echarts.init(canvas);this.myChart.on("click", function(params) {that.$emit('eClick',params)});let option = {title: {},grid: {top: "8%",left: "3%",right: "4%",bottom: "8%",containLabel: true},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {show:false},xAxis: [{type: 'category',axisTick: {show: false},axisLine:{show:false},axisLabel: {interval:0,rotate:40  //倾斜的程度},splitLine:{show:false},data:this.data.map((res)=>{return res.type})}],yAxis: [{type: 'value',axisTick: {show: false},axisLine:{show:false},splitLine:{show:false},}],series: [{name: '总计',type: 'bar',barWidth:35,colorBy:"series",label: {// 柱图头部显示值show: true,textStyle:{fontSize:14,fontWeight:600},position: "top",color:"#E55240",fontSize: "14px",},emphasis:{itemStyle:{color:"#F89387"},},itemStyle:{color:{type: 'linear',colorStops: [{offset: 0,color:"#F89387" // 0% 处的颜色}, {offset: 1,color:"#E55240" // 100% 处的颜色}],global: false // 缺省为 false},},data: this.data.map((res)=>{return res.value})},]};this.myChart.setOption(option)},resize(){this.myChart.resize()},colorFormat(arr){arr.forEach((item)=>{if(item.ldwColor){item.itemStyle = {color:{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: item.ldwColor[0] // 0% 处的颜色}, {offset: 1, color: item.ldwColor[1] // 100% 处的颜色}],global: false // 缺省为 false}}}})return arr}}
}
</script><style scoped>
.ldw-data-content-box{width:100%;height:100%;display: flex;
}.ldw-data-content-box>.ldw-chilren-box{width:100%;height:100%;display: flex;justify-content: center;align-items: center;flex-flow: column;overflow: hidden;
}
.ldw-data-content-box>.ldw-chilren-box>.title{font-size: 18px;color:#000;text-align: center;padding:24px 0;
}.ldw-bg-box{background: rgba(255,255,255,0.5);border: 1px solid #F4FDFE;border-radius: 20px;
}.ldw-text-text{display: inline-block;text-align: justify;line-height: 0;margin-left: 20px;
}.ldw-text-text::after{content:"";display: inline-block;width:100%;overflow:hidden;height:0;
}.ldw-quan-quan{display: flex;align-items: center;
}.ldw-w{margin-top:6px;position: relative;
}.ldw-quan-box{width: 13px;height: 13px;border-radius: 2px;margin-right: 20px;
}.flex-column{width:100%;display: flex;justify-content: space-around;
}.flex-column .ldw-w{width: auto;
}.flex-column .ldw-quan-box{margin-right: 10px;
}
</style>

调用代码

<template><div class="root flex flex-col border-box"><div  style="width: 400px; height: 400px;"  ><Bar  :title="'统计'" :barType="'x'" :data="chartData" ></Bar></div></div>
</template><script>import Bar from '@/components/echarts/barTwoInfo.vue'export default{name:'',created() {},components: {Bar},data() {return {chartData:[{value:100, type:'一季度'},{value:105, type:'二季度'},{value:201, type:'三季度'},{value:167, type:'四季度'},]}},methods:{}}
</script>