(本文档仅供参考)
...
问题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,
}
} |