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

/**
 * 统计图模块
 */
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], //相对于柱

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts 中,创建柱状图可以使用柱状图系列(bar)来实现。以下是一个简单的示例代码,演示了如何封装柱状图: ```javascript // 导入 ECharts import * as echarts from 'echarts'; // 创建柱状图实例 const barChart = echarts.init(document.getElementById('chart')); // 定义数据 const data = [ { name: 'A', value: 100 }, { name: 'B', value: 200 }, { name: 'C', value: 150 }, ]; // 封装柱状图配置 const option = { xAxis: { type: 'category', data: data.map(item => item.name), // x 轴数据 }, yAxis: { type: 'value', }, series: [{ type: 'bar', data: data.map(item => item.value), // y 轴数据 }], }; // 使用配置项显示图表 barChart.setOption(option); ``` 以上代码中,首先导入了 ECharts 库,然后创建了一个柱状图实例 `barChart`,通过传入一个 DOM 元素的 ID 来指定图表容器。接下来定义了一个数据数组 `data`,其中每个对象包含了柱状图的名称和值。 最后封装柱状图的配置项 `option`,其中 `xAxis` 定义了 x 轴的类型为类目轴,`data` 属性使用了 `map` 方法将数据数组中的名称提取出来作为 x 轴的数据。`yAxis` 定义了 y 轴的类型为数值轴。`series` 定义了柱状图系列的类型为 bar,`data` 属性使用了 `map` 方法将数据数组中的值提取出来作为 y 轴的数据。 最后使用 `setOption` 方法将配置项应用到图表中,显示出柱状图。 你可以根据自己的需求自定义柱状图的样式和数据。希望对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值