页面树结构
转至元数据结尾
转至元数据起始

(本文档仅供参考)

问题1

我想实现折线图不从Y轴做起点,然后鼠标提示前面加圆点,如下的效果:


解决方案

可以使用扩展属性实现,如下:

{
    "xAxis": {
        "boundaryGap": true
    },
    tooltip: {
        trigger: 'axis',
        formatter: function(param) {
            var tip = param[0].name + "<br>";
            for (var i = 0; i < param.length; i++) {
                tip += param[i].marker + " " + param[i].seriesName + ":" + param[i].value[1] + "个" + "<br>";
            }
            return tip;
        }
    }
}

问题2

柱图鼠标提示加有颜色的圆点,同时最后一个占比值显示和电子表格一致,如下图的需求:

解决方案

可以使用扩展属性实现,如下:

{
    "tooltip": {
        "trigger": "axis", // 坐标轴指示器
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        },
        formatter: function(param) {
                var tip = param[0].name + "<br>";
                for (var i = 0; i < param.length; i++) {
                    if (i <= 1) {
                        tip += param[i].marker + " " + param[i].seriesName + ":" + param[i].value[1] + "" + "<br>";
                    } else {
						//第三个的占比使用显示值做鼠标提示
                        tip += param[i].marker + " " + param[i].seriesName + ":" + param[i].data.displayValue + "" + "<br>";
                    }
                }
                return tip;
            } //formate 结束
    },
    "legend": {
        "top": 1,
        "left": 70,
        "itemWidth": 12,
        "itemHeight": 12
    },
    "title": {
        "top": 1,
    }
}
  • 无标签