Echarts图表 相关技术点

1、调整图表大小

        grid: {
            // 间距是 根据x、y轴计算的;假如都是0,x、y轴的label汉字就隐藏掉了。
            // left: 5, // 默认10%,给24就挺合适的。
            // containLabel: true, // grid 区域是否包含坐标轴的刻度标签。(如果true的时候,上下左右可以为0了)
            x: 50,
            y: 50,
            x2: 50,
            y2: 50,
        },

2、tooltip样式格式化

        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                var res = params[0].name;
                for (var i = 0; i < params.length; i++) {
                    res += "<br>" + params[i].marker + params[i].seriesName + ":" + formatSeconds(params[i].data);
                }
                return res;
            }
        },

3、series数据格式化

        series: [{
            name: '开窗时长',
            type: 'bar',
            data: obj.listOpenDuration,
            barWidth: obj.colw,//柱图宽度
            itemStyle: {
                normal: {
                    label: {
                        show: true, //开启显示
                        position: 'top', //在上方显示
                        textStyle: { //数值样式
                            color: 'white',
                            fontSize: 15
                        },
                        formatter: function (params) {
                            if (params.value > 0) {
                                return formatSeconds(params.value);
                            } else {
                                return "";
                            }
                        },
                    }
                }
            },
posted @ 2020-12-02 23:09  一只桔子2233  阅读(181)  评论(0编辑  收藏  举报