一、 组件介绍

1.1 组件技术栈

vue2+webpack+echart

1.2 组件源码

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

<script>
// import elementResize from 'element-resize-detector' // 尺寸监听组件
const echarts = require('echarts/lib/echarts')
export default {
    name: 'StackAndLineChart',
    props: {
        viewData: {
            type: Array,
            default: () => [],
        },
        showUnit: {
            type: String
        },
        chartId: {
            type: String,
            default: ''
        }
    },
    data: function () {
        return {
            series: [],
            xData: []
        }
    },
    mounted() { this.initEcharts() },
    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 differenceArr = [] // 预估值-实际值（最后一条柱状使用）
                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 })
                    differenceArr.push({ name: item.tagName, value: Number(item.predictNum - item.tagNum), ...item })
                    if (i == 0) { // x轴赋值，用第一个就行
                        this.xData.push(item.timeRange)
                    }

                })
                sumArr.push({
                    name: keysArray[i],
                    currentArr: currentArr,
                    preidctArr: preidctArr,
                    differenceArr: differenceArr
                })
            }
            sumArr.forEach(item => {
                this.series.push(
                    {
                        name: item.name,
                        type: "bar",
                        stack: "问诊",
                        barWidth: 24,
                        barGap: "10%",
                        itemStyle: { color: chartColor[item.name][0] },
                        data: item.currentArr,
                    }, {
                        name: item.name,
                        type: "bar",
                        stack: "问诊",
                        tooltip: {
                            show: false
                        },
                        barWidth: 24,
                        itemStyle: { color: chartColor[item.name][0],opacity:0.4},
                        data: item.differenceArr
                    },
                    {
                        name: "",
                        type: "line",
                        tooltip: {
                            show: false
                        },
                        symbolSize: 10,
                        itemStyle: {
                            normal: {
                                color: chartColor[item.name][0],
                                barBorderRadius: 0,
                            }
                        },
                        lineStyle: {
                            normal: {
                                width: 2,
                                color: chartColor[item.name][0],
                                type: 'dashed'
                            },
                            
                        }
                        ,
                        data: item.preidctArr,
                        zlevel:3
                    }
                    )
            })
            this.initEcharts()
        },
        initEcharts() {
            const option = {
                backgroundColor: "transparent",
                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: [{
                    type: 'category',
                    axisLabel: {
                        formatter: '{value}',
                        fontStyle: 'italic',
                        fontSize: 10,
                        textStyle: {
                            color: '#A2B0B8',
                        },
                        interval: 0,//使x轴文字显示全
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#55778E',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,

                    },
                    data: this.xData,
                }],
                yAxis: {
                    name: '',
                    nameTextStyle: {
                        color: '#666',
                        fontSize: 12,
                        lineHeight: 4,
                    },
                    type: 'value',
                    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: '18%',
                    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) {
            // debugger
            let arr = []
            let chartColor = this.viewData[1] // 柱状图颜色

            if (params && params instanceof Array) {
                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:${chartColor[item.seriesName][0]}" > </span>`
                    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>

<style lang="scss" scoped>
.chart-container {
    width: 100%;
    height: 80% !important;
    margin: auto;
    position: absolute;
    bottom: 0;
}
</style>

1.3 组件内容

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

1.4 prop参数

二、 使用方法

2.1 组件的引用

<StackAndLineChart chartId="chartId" :viewData="viewData">
</StackAndLineChart>

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'] }] 

如果本文对你有所帮助，感谢点一颗小心心，您的支持是我继续创作的动力！
最后：写作不易，如要转裁，请标明转载出处。