echarts 折线图和柱状图的通用方法封装

echarts 折线图和柱状图的通用方法封装

以下方法可以支持折线图 折线区域图 柱状图 最多支持两个y轴的显示
只需要传简单的参数即可，不需要重复设置大量的option参数
未提取的参数是一些通用的，比如背景，线条等
可以自由发挥，以下是我个人封装的，做个记录

function drawLineMap(_data, _obj) {
    let _series = []
    for (let i = 0; i < _data.ydata.length; i++) {
        let obj = {
            name: _data.ydata[i].name,
            type: _data.ydata[i].type,
            barWidth: _data.ydata[i].barWidth ? _data.ydata[i].barWidth : 'auto',
            smooth: _data.ydata[i].smooth !== false,
            yAxisIndex: _data.ydata[i].yAxisIndex ? 1 : 0,
            stack:_data.ydata[i].stack||'',
            symbol:'circle',//拐点样式
            symbolSize: 8,//拐点大小
            // y轴的实时数据是否显示
            label: _obj.ylabel?{
                show: true,
                fontSize:_obj.yfont||12,
                position: _data.ydata[i].labelPosition||'top',
            }:{show:false},
            itemStyle: {
                // opacity: _data.ydata[i].type === 'line' ? 0 : 1, // 折线图不显示拐点
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: _data.ydata[i].color[0] // 0% 处的颜色
                        }, {
                        offset: 1, color: _data.ydata[i].color[1] // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },
            // 柱状图的边框
                borderWidth: _data.ydata[i].barBorder ? _data.ydata[i].barBorder.width : 0,
                borderColor: _data.ydata[i].barBorder ? _data.ydata[i].barBorder.color : 'transparent'
            },
            data: _data.ydata[i].data
        }
        if (_data.ydata[i].colorStyle === 'area') {
            obj.areaStyle = {
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                offset: 0, color: _data.ydata[i].color[0] // 0% 处的颜色
                }, {
                offset: 1, color: _data.ydata[i].color[1] // 100% 处的颜色
                }],
                global: false // 缺省为 false
            }
        }
        if (_data.ydata[i].itemColor) {
            obj.itemStyle.color = _data.ydata[i].itemColor
        }
    }
    _series.push(obj)
}
let option = {
    tooltip: {
        trigger: "axis",
        backgroundColor:"rgba(50,50,50,0.9)",
        axisPointer: {
            type: "none",
        },
        textStyle:{
            fontSize:_obj.xfont||12
        },
        formatter: function (params) {
            // console.log('params:',params)
            let str = "<div style='width:100%;text-align:center;'>"+params[0].name+"</div>"
            for(let i=0;i<params.length;i++){
                str  += "<div style='width:100%;text-align:left;'>" 
                str += "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:"+_data.ydata[i].color[0]+"'></span>"
                str +=  params[i].seriesName + (_obj.xunit?(' '+_obj.xunit):'') + ' : ' +params[i].value + (_obj.unit?(' '+_obj.unit):_data.ydata[i].unit?(' '+_data.ydata[i].unit):'')
                str += '</div>'
            }
            return str
        },
    },
    grid: {
        left: _obj.left||40,
        right: _obj.right||10,
        top: _obj.top||40,
        bottom: _obj.bottom||20
    },
    title:{
        show:_obj.title?true:false,
        bottom:0,
        left:'15%',
        // textAlign:'center',
        text:_obj.title&&_obj.title.text?_obj.title.text:'',
        textStyle:{
            color:_obj.title&&_obj.title.color?_obj.title.color:'#ffffff',
            fontSize:_obj.title&&_obj.title.font?_obj.title.font:12,
        }
    },
    legend: {
        show: !!_obj.legend,
        icon: _obj.legendIcon||'rect',
        itemWidth: _obj.legendFont?25:8,
        itemHeight: _obj.legendFont?15:8,
        itemGap:_obj.legendAlign=='top'?8:4,
        left:_obj.legendAlign=='top'?20:'25%',
        top:_obj.legendAlign=='top'?-5:0,
        align:_obj.legendAlign||'auto',
        textStyle: {
            color: '#ffffff',
            fontSize: _obj.legendFont||11,
            padding:_obj.legendAlign=='top'?[30,0,0,-10]:5
        },
    },
    textStyle: {
        color: '#ffffff',
        fontSize: _obj.font||10
    },
    xAxis: {
        type: 'category',
        data: _data.xdata,
        axisPointer: {
            type: 'shadow'
        },
        axisTick: { show: false },
        axisLine: { show: false },
        axisLabel:{
            hideOverlap:false,
            fontSize:_obj.xfont||12,
            interval: _obj.interval||0,
            rotate:_obj.rotate||0,
            color:_obj.xcolor||'#ffffff',
            formatter: function(value) {
                // 竖排显示还是横排显示 默认横排
                let str = value
                if(_obj.xfontV){
                    str = value.split('').join('\n')
                }else if(_obj.xlabelLength&&str.length>_obj.xlabelLength){
                    str = str.slice(0,_obj.xlabelLength)+'\n'+str.slice(_obj.xlabelLength,str.length)
                }
                return str
            }
        }
    },
    yAxis:[
        {
            type: 'value',
            name: _data.title,
            show:_obj.yaxis===false?false:true,
            axisLabel: {
                show:_obj.yaxisLabel==false?false:true,
                formatter: '{value}',
                fontSize:_obj.yfont||12,
                color:_obj.ycolor||'#ffffff',
            },
            nameTextStyle:{
                fontSize:_obj.yfont||12,
                color:_obj.ycolor||'#ffffff',
            },
            itemStyle:{
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                shadowBlur: 10
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(99, 99, 99, 0.5)'
                }
            },
            axisTick: { show: false },
            axisLine: { show: false }
        },
        {
            type: 'value',
            show:_data.title2?true:false,
            name: _data.title2||"",
            axisLabel: {
                show:_obj.yaxisLabel2?true:false,
                formatter: '{value}',
                fontSize:_obj.yfont||12,
                color:_obj.ycolor||'#ffffff',
            },
            nameTextStyle:{
                fontSize:_obj.yfont||12,
                color:_obj.ycolor||'#ffffff',
            },
            itemStyle:{
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                shadowBlur: 10,
            },
            splitLine: {
                show:false,
                lineStyle: {
                    color: 'rgba(99, 99, 99, 0.5)'
                }
            },
            axisTick: { show: false },
            axisLine: { show: false }
        }],
        series: _series
    }
    return option
}

如果是柱状图可以这么调用

const _data = { title: 'XX',
                            xdata: ['2020','2021','2022'],
                            ydata: [{ name: 'XX', data: [], color: ['rgba(0, 108, 255, 1)', 'rgba(55, 155, 255, 1)'], type: 'bar',unit:"单位"},
                            { name: 'YY', data: [], color: ['rgba(215, 49, 71, 1)', 'rgba(250, 55, 55, 1)'], type: 'bar',unit:单位"}
                            ]
                        }
let option = this.drawLineMap(_data,{legend:true,left:20,ylabel:true,yaxisLabel:false})
console.log('optionoptionoptionoption:',option)
this.leftChart1 = echarts.init(this.$refs.leftChart1)
this.leftChart1.setOption(option)

如果是折线图 只需要把上面的type:bar 改成type:line即可

其他的参数可以根据需要自由设置，不设置就是默认值

【PS：本文纯属原创，属个人理解，不合理不正确的地方 欢迎指正，共勉 谢谢！】