封装类(echarts柱线图)

封装类(echarts柱形图)_~半句晚安。的博客-CSDN博客

效果图:

polylineColumns.js

 

export default class {

    /**
     * @description: 折线柱形图
     * @param {*} echarts(echarts原型对象)
     * @param {*} id(DOM的id)
     * @param {*} data(数据结构)
     * @param {*} colors(图标颜色(渐变处理,数组两个颜色相同为非渐变))
     * @param {*} myLegend(图例)
     * @return {*}
     * 
     * @调用方法:  new RiskTree(this.$echarts , "DOM的id" , [["沙河", 5, 7, 9, 12.5],......] , [['柱形颜色','柱形颜色']],['product','农机数量','作业面积'])
    */

    constructor(echarts, id, data, colors, myLegend) {
        this.echarts = echarts;
        let option = this.getOption(data, colors, myLegend)
        var myChart = echarts.init(document.getElementById(id));
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    getOption(data, colors, myLegend) {
        let seriesArr = []
        seriesArr.push(
            {
                // yAxisIndex :0 代表绑定第一个y轴 1代表第二个....
                type: 'bar', name: myLegend[1], yAxisIndex: 0, barWidth: 30, itemStyle: {
                    //柱条渐变色
                    color: new this.echarts.graphic.LinearGradient(
                        1, 0, 0, 1,
                        [
                            { offset: 0, color: colors[0][0] },
                            { offset: 1, color: colors[0][1] }
                        ]
                    ),
                    barBorderRadius: [25, 25, 0, 0]
                },
            },
            {
                type: 'line', name: myLegend[2], yAxisIndex: 1, itemStyle: {
                    //柱条渐变色
                    color: new this.echarts.graphic.LinearGradient(
                        1, 0, 0, 1,
                        [
                            { offset: 0, color: colors[1][0] },
                            { offset: 1, color: colors[1][1] }
                        ]
                    )
                },
            }
        )

        let option = {
            legend: {
                bottom: 35,
                textStyle: {
                    color: "#fff"
                },
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                },

            },
            grid: {
                x: 40,
                y: 10,
                x2: 40,
                y2: 80,
                borderWidth: 10
            },
            dataset: {
                dimensions: myLegend,
                source: data
            },
            xAxis: {
                type: 'category',
                splitArea: {//背景
                    show: true,
                    areaStyle: {
                        color: ["rgb(255,255,255,0)", "rgb(255,255,255,0)"]
                    }
                },
                axisLine: {   //横轴样式
                    lineStyle: {
                        color: '#ccc'
                    },
                },
                axisTick: {
                    show: false,
                    borderColor: '#051f32'

                },
                axisLabel: {
                    show:true,
                    interval:0,
                    textStyle: {
                        color: "#fff"
                    }
                },
                coordinateSystem: 'cartesian2d', xAxisIndex: 1,


            },
            yAxis: [
                {
                    //如果要自己定义刻度线可以在这个地方定义
                    min: 0,
                    //比最大值多一点
                    max: function (value) {
                        console.log(value)
                        return value.max + (value.max * 0.3)
                    },
                    axisTick: {
                        show: false,
                    },

                    axisLabel: {
                        show:true,
                        interval:0,
                        textStyle: {
                            color: "#fff"
                        },
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: ['#0f5071'],
                            width: 1,
                            type: 'solid',
                        },
                    },
                },
                {
                    type: 'value',
                    min: 0,
                    max: function (value) {
                        console.log(value)
                        return value.max + (value.max * 0.3)
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#fff"
                        },
                        formatter: '{value}'
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: ['#0f5071'],
                            width: 1,
                            type: 'solid',
                        },
                    },
                },
            ],
            series: seriesArr
        };

        return option;
    }
}

html

          <div class="RiskTree" id="RiskTree"></div>

 vue

import RiskTree from "./components/polylineColumns.js";

        new RiskTree(
          this.$echarts,
          "RiskTree",
          arr,
          [
            ["#00C4E3", "#0090f66f"],
            ["#FBBD28", "#FBBD28"],
          ],
          ["product", "农机数量", "作业面积"]
        );