首页 前端知识 echarts自定义封装js【柱状图,折线图,水球,雷达,仪表盘】以上图表的各种问题,几乎都有,没有的评论区留言

echarts自定义封装js【柱状图,折线图,水球,雷达,仪表盘】以上图表的各种问题,几乎都有,没有的评论区留言

2024-11-10 09:11:12 前端知识 前端哥 401 301 我要收藏

/**
 * 统计图模块
 */
var getCommon = {
    /**
     * 横着立体柱状图模块
     * @param {Object} dom
     * @param {Object} yData y轴刻度标签
     * @param {Object} sData 数据
     * @param {Object} option
     */
    zhu: function(dom, yData, sData, option) {
        var myChart = echarts.init(dom);

        option = {
            // title: {
            //   text: '标题'
            // },
            grid: {
                top: '10%',
                left: '10%',
                right: '4%',
                bottom: '10%',
                containLabel: true //防止标签溢出
            },
            xAxis: {
                show: false,
                axisLabel: {
                    fontSize: 12
                }
            },
            yAxis: {
                type: 'category', //坐标轴类型。
                inverse: true, //是否是反向坐标轴。
                data: [], //x轴刻度标签
                axisLine: {
                    show: false //是否显示坐标轴轴线;不包括数据标签
                },
                axisTick: {
                    show: false //是否显示坐标轴刻度。
                },
                axisLabel: {
                    color: "pink",
                }
            },
            series: [
                //柱体
                {
                    name: '',
                    type: 'bar',
                    // data: [1030, 205, 84, 568, 689],
                    // barGap: '200%',//不同系列的柱间距离,为百分比,(柱子宽度的百分比)
                    // barCategoryGap:'400',//同一系列的柱间距离,默认为类目间距的20%,可设固定值
                    barWidth: 20, // 柱体宽度
                    itemStyle: {
                        "normal": {
                            "color": new echarts.graphic.LinearGradient(0, 0, 1, 0,
                                [{
                                        offset: 0,
                                        color: "rgba(89,211,255,0.1)" //0.1是透明度
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(23,237,194,0.8)" //1是透明度
                                    }
                                ],
                                false
                            ),
                        }
                    },
                    label: { //图形上的文本标签
                        normal: {
                            show: true,
                            color: "pink",
                            position: "right", //
                            formatter: "{c}", //字符串模板,{a}:系列名。{b}:数据名。{c}:数据值。
                            distance: 10 //距离图形元素的距离。
                        },
                        fontSize: 12
                    }
                },
                //柱顶圆片
                {
                    name: "",
                    // data: [1030, 205, 84, 568, 689],
                    type: "pictorialBar", //象形柱图
                    symbolSize: [8, 20], //调整截面形状[宽, 高]
                    symbolOffset: [5, 0], //相对于柱体的截面位置
                    symbolPosition: "end", //图形的定位位置,'end':图形边缘与柱子结束的地方内切。
                    z: 12,
                    "itemStyle": {
                        "normal": {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                                [{
                                        offset: 0,
                                        color: "rgba(89,211,255,1)"
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(23,237,194,1)"
                                    }
                                ],
                                false
                            ),
                        }
                    },
                }
            ]
        };
        console.log(option.yAxis)
        option.yAxis.data = yData //Y轴刻度标签
        console.log(option.yAxis.data)
        option.series[0].data = sData //柱状图数据
        option.series[1].data = sData
        // option.series[0].label.fontSize=updataData.labelFontSize
        // console.log(option.xAxis)
        myChart.setOption(option);
        // 让图表的大小根据浏览器变化
        window.addEventListener('resize', function() {
            myChart.resize();
        });

    },
    /**
     * 纵着显示立体柱状图
     * @param {Object} dom 
     * @param {Object} xData x轴刻度标签
     * @param {Object} sData数据
     * @param {Object} option
     */
    zhuZong: function(dom, xData, sData, option) {
        var myChart = echarts.init(dom);
        option = {
            grid: {
                // top: '10%',
                left: '4%',
                right: '4%',
                bottom: '10%',
                containLabel: true //防止标签溢出
            },
            xAxis: {
                type: 'category',
                // data: [],
                axisTick: {
                    show: false //是否显示坐标轴刻度。
                },
                axisLabel: {
                    color: "pink",
                    fontSize: 12, //x轴刻度标签的字体大小
                },
            },
            yAxis: {
                show: false,
                axisLine: {
                    show: false //是否显示坐标轴轴线;不包括数据标签
                }
            },
            series: [
                //柱体
                {
                    name: '',
                    type: 'bar',
                    data: [1030, 205, 84, 568, 689],
                    barWidth: 20, // 柱体宽度
                    itemStyle: {
                        "normal": {
                            "color": new echarts.graphic.LinearGradient(1, 1, 0, 0,
                                [{
                                        offset: 0,
                                        color: "rgba(89,211,255,0.1)" //0.1是透明度
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(23,237,194,0.8)" //1是透明度
                                    }
                                ],
                                false
                            ),
                        }
                    },
                    label: { //图形上的文本标签
                        normal: {
                            fontSize: 12, //文字大小
                            show: true,
                            color: "pink",
                            position: "top", //
                            formatter: "{c}", //字符串模板,{a}:系列名。{b}:数据名。{c}:数据值。
                            distance: 10 //距离图形元素的距离。
                        }
                    }
                },
                //柱顶圆片
                {
                    name: "",
                    data: [1030, 205, 84, 568, 689],
                    type: "pictorialBar", //象形柱图
                    symbolSize: [20, 8], //调整截面形状[宽, 高]
                    symbolOffset: [0, -5], //相对于柱

转载请注明出处或者链接地址:https://www.qianduange.cn//article/20126.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!