在多坐标系中设置特定的tooltip无效

来源:4-13 echarts 多坐标系

慕勒1245117

2020-12-08

option = {
// 当一个echarts绘制多个坐标系网格组件时,值为数组

  grid:[
    //第一个坐标系网格组件
    {
        // 是否显示该坐标网格组件
        show:true,
        // grid id,在option配置和api组件中可以使用
        id:'sin',
        //grid组件宽度
        width:'45%',
        // grid组件高度
        height:'50%',
        // grid组件在echarts实例中的定位,详见参考文档
        left:0,
        top:10,
        // 决定是否包含坐标轴的刻度空间,默认值为false,
        //当值为false时,组件的定位属性(left\right等),宽高属性(width\height)决定的盒子面积仅仅是坐标轴形成的矩形
        // containLabel:false,
        // 当值为true时,组件的定位属性(right\left等),宽高属性(width\height)决定的盒子面积包含了坐标轴上的刻度宽高
        containLabel:true,
        // grid坐标网格组件的背景颜色,默认值为透明'transparet',生效前提是,显示的配置show为true
        backgroundColor:'rgba(34,45,34,0.6)',//只包含坐标轴围起来的矩形面积颜色,哪怕ccontainLable设置true
        //网格的边框颜色
        borderColor:'rgba(0,200, 200, 0.5)',//绘制区域、前提条件同backgroundColor,
        //网格的边框宽度
        borderWidth:10,//绘制区域、前提条件同backgroundColor,
        //grid组件特定的提示框
        **tooltip:{
            show:true,
        }**
        ![特定的tooltip无效](http://img.mukewang.com/szimg/images/unknow-80.png)
    },
    {
        id:'cos',
        width:'45%',
        height:'50%',
        right:0,
        bottom:0,
        containLabel:true,
    },
],
xAxis:[
    {
        gridIndex:0,
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    {
        gridIndex:1,
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
], 
yAxis:[
    {
      gridIndex:0,
      type:'value'  
    },
    {
      gridIndex:1,
      type:'value'  
    },
],
series: [
    {
        name:'上升',
        xAxisIndex: 0,
        yAxisIndex: 0,
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
    },
    {
        name:'波动',
        xAxisIndex: 1,
        yAxisIndex: 1,
        data: [20, 321, 91, 194, 1090, 130, 1210],
        type: 'bar'
    },
]

};

写回答

1回答

扬_灵

2020-12-08

同学你好,在多坐标系中设置特定的tootip可以参考下面这两篇文档

https://blog.csdn.net/qq_42345237/article/details/89247346 

https://blog.csdn.net/github_39532240/article/details/78874996 


0
1
慕勒1245117
已解决问题。 解决方案: 在根grid组件下设置一个tooltip{ showContent :fasle}, 然后在特定的grid组件项中设置tooltip{ showConten:true},然后就可以对各个grid组件的各项属性进行设置了
2020-12-08
共1条回复

数据可视化入门到精通-打造前端差异化竞争力

同级别前端,掌握数据可视化薪资更高

1520 学习 · 1043 问题

查看课程