使用Echars鼠标滑过位置是错乱的,怎么解决

第一次使用Echarts,遇到了很多问题,希望哪个大神可以帮忙解决一下。
需要解决的问题是这样的:
一.柱状图
1.去掉y轴平行线
2.左侧y轴文字限制长度超出换行
在这里插入图片描述
二、散点图
1.文字大小和圆形大小随着value值(就是圆中数字)的大小变化
2.鼠标滑过位置错乱了,就是滑过的位置和显示的位置不一样
在这里插入图片描述附上我的代码,希望有人能解决。

// 使用刚指定的配置项和数据显示图表。
//  myChart.setOption(option);
var myChart = echarts.init(document.getElementById('zhuzhuangtu'));

//初始化数据
var category = ['小王', '小李', '小赵', '小马', '小刘', '小张', '小齐'];
var barData = [3100, 2142, 1218, 581, 431, 383, 163];

var option = {
    grid: {
        top: '0.5%',
        left: '3%',
        right: '11%',
        bottom: '2.5%',
        containLabel: true
    },
    yAxis: [{
        type: 'category',
        data: ['去朋友家做客', '不歧视别人', '居家安全小常识1', '到亲戚家串门', '到亲戚家串门02', '生日派对礼仪多04', '生日派对礼仪多03', '居家安全小常识06', '生日派对礼仪多05'],
        inverse: true,
        axisTick: {
            alignWithLabel: true,
        },
        axisLabel: {
            margin: 10,
            textStyle: {
                fontSize: 24,
                color: 'white'
            }
        },
        axisLine: {
            lineStyle: {
                color: '#19B6FF'
            }
        },
        
    }],
    xAxis: [{
    }],
    series: [{
        name: 'Top 10',
        type: 'bar',
        barWidth: 40,
        data: [800, 700, 600, 650, 500, 460, 400, 300, 800, 800],
        label: {
            normal: {
                show: true,
                position: 'right',
                textStyle: {
                    color: 'white', //color of value
                    fontSize: 30
                }
            }
        },
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: 'rgba(25,182,255,0)' ,// 0% 处的颜色
                },{
                    offset: 0.5,
                    color: 'rgba(25,182,255,1)' ,// 0% 处的颜色
                },{
                    offset: 1,
                    color: 'rgba(25,182,255,1)' // 100% 处的颜色
                }], false),
                barBorderRadius: [0, 15, 15, 0],
                shadowColor: 'rgba(0,0,0,0.1)',
                shadowBlur: 3,
                shadowOffsetY: 3
            }
        }
    }]
};
myChart.setOption(option);



/**
 * 热门打卡
 */
var MyScatter = echarts.init(document.getElementById('sandiantu'));

var plantCap = [{
    name: '遵守说好的事情',
    value: '157'
}, {
    name: '养成好记性',
    value: '115'
}, {
    name: '公共场合要安静',
    value: '113'
}, {
    name: '有礼貌的打招呼',
    value: '95'
}, {
    name: '爱惜公共财物',
    value: '92'
}, {
    name: '衣冠整齐得体',
    value: '87'
}, {
    name: '自己收拾房间',
    value: '87'
}, {
    name: '遵守交通规则',
    value: '60'
}];

var datalist = [{
    offset: [20, 85],
    symbolSize: 220,
    color: '#FE4D90'
},  {
    offset: [45, 72],
    symbolSize: 190,
    color: '#00D0B6'
}, {
    offset: [74, 80],
    symbolSize: 210,
    color: '#5397F4'
}, {
    offset: [30, 50],
    symbolSize: 290,
    color: '#5397F4'
}, {
    offset: [60, 35],
    symbolSize: 200,
    color: '#FE4D90'
}, {
    offset: [78, 50],
    symbolSize: 220,
    color: '#F4B304'
}, {
    offset: [30, 10],
    symbolSize: 220,
    color: '#00D0B6'
},{
    offset: [75, 15],
    symbolSize: 190,
    color: '#FE4D90'
}];
var datas = [];
for (var i = 0; i < plantCap.length; i++) {
    var item = plantCap[i];
    var itemToStyle = datalist[i];
    datas.push({
        name: item.value + '\n' + item.name,
        value: itemToStyle.offset,
        symbolSize: itemToStyle.symbolSize,
        label: {
            normal: {
                textStyle: {
                    fontSize:30,
                    color:'#fff'
                }
            }
        },
        itemStyle: {
            normal: {
                color: itemToStyle.color,
            }
        },
    })
}
option1 = {
    grid: {
        show: false,
        top: 10,
        bottom: 10
    },
    xAxis: [{
        gridIndex: 0,
        type: 'value',
        show: false,
        min: 0,
        max: 100,
        nameLocation: 'middle',
        nameGap: 5
    }],
    yAxis: [{
        gridIndex: 0,
        min: 0,
        show: false,
        max: 100,
        nameLocation: 'middle',
        nameGap: 30
    }],
    series: [{
        type: 'scatter',
        symbol: 'circle',
        symbolSize: 120,
        label: {
            normal: {
                show: true,
                formatter: '{b}',
                color: '#fff',
                textStyle: {
                    fontSize: '20'
                }
            },
        },
        itemStyle: {
            normal: {
                borderWidth: '0',
                borderType: 'solid',
                borderColor: '#fff',
                color: '#68b837',
                shadowColor: '#68b837',
                shadowBlur: 10
            }
        },
        data: datas
    }]
};

MyScatter.setOption(option1);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值