rankChart.vue 9.27 KB
<template>
	<view class="rankchart">
		<div :id='bindId' class="chart"></div>
	</view>
</template>

<script>
	export default {
	  data () {
		return {
		}
	  },
	  mounted() {
	  },
	  watch:{
		  bindId:function(newValue,oldValue){
		  },
		  chartData:{
			handler(newValue,oldValue){
				this.drawRank();
			},
			deep:true
		  },
	  },
	  props:{
			bindId:{
				type:String,
				default:''
			},
		   chartData: {
                type: Object,
                default: function(){
					return {}
				}
            }
	  },
	  methods: {
	  	 drawRank() {
			let myChart = {};
            let chartDom = document.getElementById(this.bindId);
            myChart = this.echarts.init(chartDom);
            myChart.showLoading('default', {
                text: '',
                color: '#409eff'
            });
            var option = {
				title:{
					show:true,
					 text:this.chartData.title,
					 left: uni.upx2px(21.74),
					 top: uni.upx2px(10.86),
					 textStyle: {
						 fontWeight: "normal",
						 fontSize: uni.upx2px(25.4),
						 color: '#4A4A4A'
					 }
				},
                tooltip: {
					show:false
				},
				grid:{
				    left: uni.upx2px(30.79),
				    right: uni.upx2px(101.14),
				    top: uni.upx2px(63.33),
				    bottom: uni.upx2px(36.23)
				},
                yAxis: JSON.parse(JSON.stringify(this.chartData.yaxis)),
                xAxis: {
                    axisLabel: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    }
                },
				series:JSON.parse(JSON.stringify(this.chartData.series))
            }
            try {
                this.autoComplete(option.yAxis.data.length, option.yAxis.data, 'string');
            } catch (error) { }
            let dataArr = [], valArr = [];
            try {
                option.yAxis.axisTick = {};
                option.yAxis.axisTick.show = false;
                option.yAxis.inverse = true;
                option.yAxis.axisLine = {
                    show: false
                }
                option.yAxis.splitLine = {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                }
                var rankWidths = '';
				uni.getSystemInfo({
					success:(res)=>{
						rankWidths=res.windowWidth-uni.upx2px(160.92);
					}
				})
                var rankTop = -1;
                var barWidth = uni.upx2px(10.86);
                let labelPos = 0;
				if(option.yAxis.data.length > labelPos) {
				    labelPos = option.yAxis.data.length;
				}
                option.yAxis.axisLabel = {
                    margin: 40,
                    interval: 0,
                    padding: [0, 0, uni.upx2px(10.86), 0],
                    verticalAlign: 'bottom',
                    textStyle: {
                        align: 'left',
                        color: '#666666'
                    },
                    formatter: function(value, index) {
                        var key = index + 1;
                        var htmls = '';
//                         if(key == 1) {
//                             htmls = '{firstLabel|' + key + '}' + " " + '{valueLabel|' + value + '}'
//                         } else if(key == 2) {
//                             htmls = '{secondLabel|' + key + '}' + " " + '{valueLabel|' + value + '}'
//                         } else if(key == 3) {
//                             htmls = '{thirdLabel|' + key + '}' + " " + '{valueLabel|' + value + '}'
//                         } else {
//                             htmls = '{normalLabel|' + key + '}' + " " + '{valueLabel|' + value + '}'
//                         }
						htmls = " " + '{valueLabel|' + value + '}'
                        return htmls;
                    },
                    rich: {
                        firstLabel: {
                            width: 18,
                            height: 18,
                            align: 'center',
                            color: '#fff',
                            fontSize: 12,
                            backgroundColor: '#EB6100'
                        },
                        secondLabel: {
                            width: 18,
                            height: 18,
                            align: 'center',
                            color: '#fff',
                            fontSize: 12,
                            backgroundColor: '#FF9631'
                        }, 
                        thirdLabel:{
                            width: 18,
                            height: 18,
                            align: 'center',
                            color: '#fff',
                            fontSize: 12,
                            backgroundColor: '#FFC62E'
                        },
                        normalLabel: {
                            width: 18,
                            height: 18,
                            fontSize: 12,
                            align: 'center',
                            color: '#666666'
                        },
                        valueLabel: {
                            height: 6,
                            padding: [0, 0, 0, 40],
                            align: 'left',
                            color: '#666',
                            fontSize: uni.upx2px(21.74),
                        }
                    }
                };
            } catch (error) { }
            // var colorsArr = ['#ffc62f', '#6c6fc0', '#00b9e2', '#aae3f6', '#aae3f6', '#aae3f6', '#aae3f6', '#aae3f6', '#aae3f6', '#aae3f6', '#aae3f6', '#aae3f6']
            var colorsArr = ['#3BB8FF', '#3BB8FF', '#3BB8FF', '#3BB8FF', '#3BB8FF', '#3BB8FF', '#3BB8FF', '#3BB8FF', '#3BB8FF', '#3BB8FF', '#3BB8FF', '#3BB8FF']
            if(!option.series) return;
            let dataLen = 0;
            for (var i = 0; i < option.series.length; i++) {
                this.autoComplete(option.series[i].data.length, option.series[i].data);
                option.series[i].label = {
                    normal: {
                        show: true,
                        position: [rankWidths, -2],
                        fontSize: uni.upx2px(21.74),
                        textStyle: {
                            color: '#666666'
                        }
                    },
                    emphasis: {
                        show: true,
                        position: [rankWidths, -2],
                        fontSize:uni.upx2px(21.74),
                        textStyle: {
                            color: '#666666'
                        }
                    }
                }
                option.series[i].itemStyle = {
                    normal: {
                        // barBorderRadius: [18, 18, 18, 18],
                        barBorderRadius: 18,
                        color: '#3BB8FF'
                        // color: function(params) {
                        //     return colorsArr[params.dataIndex];
                        // }
                    },
                    emphasis: {
                        barBorderRadius: 18,
                        color: '#0069FF'
                    }
                }
                option.series[i].barWidth = barWidth;
            }
            var maxData = 0, defaultData = 100;
            for (var i = 0; i < option.series[0].data.length; i++) {
                if(typeof option.series[0].data[i] === 'string' && !maxData) {
                    maxData = defaultData;
                } else if (maxData < option.series[0].data[i]){
                    maxData = option.series[0].data[i];
                }
            }
            for (var i = 0; i < option.series[0].data.length; i++) {
                dataArr[i] = maxData;
            }

            var shadowSeries = {
                type: 'bar',
                // legendHoverLink: false,
                z: 0,
                itemStyle: {
                    normal: {
                        color: '#f5f5f5',
                        barBorderRadius: 18
                    },
                    emphasis: {
                        color: '#f5f5f5',
                        barBorderRadius: 18
                    }
                },
                label: {
                    show: false
                },
                barWidth: barWidth,
                barGap: '-100%',
                barCategoryGap: '40%',
                data: dataArr,
                animation: false
            } 
            option.series.push(shadowSeries)
            option.xAxis.max = 'dataMax';
            // myChart.clear();
            setTimeout(() => {
                myChart.hideLoading();
            }, 500);
            myChart.setOption(option);
        },
		autoComplete(dataLen, data, type) {
			if(dataLen < 10) {
				for(let i = 0; i < 10; i++) {
					if(!data[i] && data[i] != 0) {
						data[i] = '';
					}
				}
			}
            return data;
        }
	  }
	}
</script>

<style>
	.chart{
		height:750.4upx;
		width:706.52upx;
		margin: 0 auto;
		background: #FFFFFF;
		margin-bottom: 18.2upx;
		border-radius:7.24upx;
		overflow: hidden;
	}
</style>