一、 组件介绍

1.1 组件技术栈

vue2+webpack+echart

1.2 组件源码

<template>
    <!-- 多柱状图模型 -->
    <div class="chart-container" ref="chartsContainer" :id="chartId"></div>
</template>

<script>
const echarts = require('echarts/lib/echarts')
const seriesTemplate = { // series相同配置
    type: 'bar',
    color: '#247FFF',
    showBackground: true,
    backgroundStyle: {
        color: 'rgba(255,255,255,0.1)'
    },
}
export default {
    name: 'MultipleBarChart',
    props: {
        viewData: {
            type: Array,
            default: () => [],
        },
        chartId: { // chart id
            type: String,
            default: ''
        },
    },
    data: function () {
        return {
            series:[],
            xData:[]
        }
    },
    mounted() { },
    methods: {
        queryData(){ // 对传过来的数据进行解析
            let sumArr = []
            let chartData = this.viewData[0] // 柱状图数据
            let chartColor = this.viewData[1] // 柱状图颜色
            let keysArray = Object.keys(chartData);
            for (var i = 0; i < keysArray.length; i++) {
                let currentArr = [] // 实际值
                let preidctArr = [] // 预估值
                chartData[keysArray[i]].forEach(item => {
                    currentArr.push({ name: item.tagName, value: item.tagNum ,...item })
                    preidctArr.push({ name: item.tagName, value: item.predictNum, ...item })
                    // preidctArr.push(item.predictNum)
                    // debugger
                    if(i==0){ // x轴赋值，用第一个就行
                        this.xData.push(item.timeRange)
                    }

                })
                sumArr.push({
                    name: keysArray[i],
                    currentArr: currentArr,
                    preidctArr: preidctArr
                })
            }
            let sumArrLength = sumArr.length
            sumArr.forEach(item => {
                this.series.push({
                    name: item.name,
                    ...seriesTemplate,
                    data: item.currentArr,
                    barWidth:sumArrLength>2?10:12,
                    itemStyle: {
                        borderRadius: 2,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: chartColor[item.name][0] },
                            { offset: 1, color: chartColor[item.name][1] },
                        ])
                    },
                }, {
                    name: item.name,
                    ...seriesTemplate,
                    barWidth: sumArrLength > 2 ? 10 : 12,
                    xAxisIndex: 1,
                    data: item.preidctArr,
                    tooltip:{
                        show:false
                    },
                    itemStyle: {
                        borderRadius: 2,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: chartColor[item.name][0] },
                            { offset: 1, color: chartColor[item.name][1] },
                        ]),
                        opacity: 0.4
                    },
                },)
            })
            this.initEcharts()
        },
        initEcharts() {
            const option = {
                //你的代码
                tooltip: {
                    trigger: 'axis',//触发类型 柱状图
                    axisPointer: { type: 'shadow' }, //触发效果 移动上去 背景效果
                    formatter: (params) => {    // 自定义图例
                        return this.getTipFormatter(params);
                    },
                },
                legend: {
                    top: '3%',
                    textStyle: {
                        color: 'white'
                    },
                    type: 'plain',
                    icon: 'rect',
                    itemWidth: 12,
                    itemHeight: 12,
                    left: '10%',
                },
                xAxis: [
                    {
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#55778E',
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                fontFamily: 'Microsoft YaHei',
                                color: '#A2B0B8'
                            },
                            fontStyle: 'italic',
                            interval: 0,//使x轴文字显示全
                        },
                        type: 'category',
                        data: this.xData,

                    },
                    //背景柱体，不显示数据在图表中，只显示背景色
                    {
                        type: 'category',
                        show: false,
                        data: this.xData
                    }
                ],
                yAxis: {
                    name: '',
                    nameTextStyle: {
                        color: '#666',
                        fontSize: 12,
                        lineHeight: 40,
                    },
                    type: 'value',
                    min: 0,
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: '#A2B0B8',
                        fontSize: 12
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#556175',
                            type: 'dashed',
                        }
                    },
                    axisTick: {
                        show: false
                    },
                },
                grid: {
                    left: '10%',
                    right: '10%',
                    bottom: '4%',
                    top: '10%',
                    containLabel: true
                },
                series: this.series
            };
            const myCharts = echarts.init(document.getElementById(this.chartId));

            myCharts.showLoading({
                text: '',
                color: '#17A7F9',
                textColor: '#17A7F9 ',
                maskColor: '#0D1123',
                zlevel: 0,
            })
            setTimeout(() => {
                myCharts.hideLoading();
                myCharts.setOption(option)
            }, 1000);
            const chartObserver = new ResizeObserver(() => {
                myCharts.resize();
            });
            chartObserver.observe(document.getElementById(this.chartId));
        },
        getTipFormatter(params) { // 自定义tooltip
            // debugger
            let arr = []
            let chartColor = this.viewData[1] // 柱状图颜色
           
            if (params && params instanceof Array){
            // tooltip自定义
                params.forEach(item=>{
                    const obj = item.data
                    let marker = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background:linear-gradient(180deg,${chartColor[item.seriesName][0]} 0%, ${chartColor[item.seriesName][1]} 100%)" > </span>` 
                    if (this.tooltip == 'jcjy_business') { // 检查检验业务类型
                        arr.push(`${marker}${item.seriesName}<br/>服务人次 ${obj.tagNum}<br/>服务占比 ${obj.tagNumPercent}<br/>`)
                    }
                    if (this.tooltip == 'dzcf_pay'){ // 电子处方支付类型
                        arr.push(`${marker}${item.seriesName}<br/>处方量 ${obj.tagNum}<br/>处方占比 ${obj.tagNumPercent}<br/>处方金额 ${obj.tagPrice}<br/>处方占比 ${obj.tagPricePercent}<br/>`)
                    }
                    if (this.tooltip == ''){ // 默认
                        arr.push(`${marker}${item.seriesName}<br/>服务人次 ${obj.tagNum}<br/>服务占比 ${obj.tagNumPercent}<br/>服务金额 ${obj.tagPrice}<br/>`)
                    }
                   
                })
                return arr.join("");
            }
        },
    },
    watch: {
        viewData: {
            handler: function (val, valOld) {
                if (val && val.length > 0) {
                  this.xData = []
                  this.series = []
                    this.queryData()
                }
            },
            deep: true,
            immediate: true,
        }
    }
}
</script>

1.3 组件内容

多柱状图echart， 支持含有预估值、每条柱动态配色

1.4 prop参数

二、 使用方法

2.1 组件的引用

 <MultipleBarChart  chartId="dzcfSendChart" :viewData="viewData"></MultipleBarChart>

2.2 组件初始化

let Array1 = [{tagName:'自提',tagNum:13,predictNum:12,timeRange:'2011'}]
let Array2 = [{tagName:'配送',tagNum:13,predictNum:12,timeRange:'2011'}]
this.viewData = [{ '自提':Array1, '配送': Array2}, { '自提': ['#58DFD1', '#3179D6'], '配送': ['#F3AB3C', '#EC7100'] }]