ECharts鼠标移动到图标上面如何给数据加单位

可以在ECharts中的------》”tooltip“定义鼠标hover时的样式及添加单位;

例子:    

var option = {
        color:['#F28200','#4ECC73','#976CE5','#3DB4FF','#4ECCC2','#D5D8C6'], 
        title: {
            // text: '未来一周气温变化',
            // subtext: '纯属虚构'
        },
        tooltip: {
            trigger: 'axis',
            backgroundColor: '#0D1B42',  //鼠标移动到图上面时,显示的背景颜色
            padding:15,     //定义内边距
            formatter: function(params) { //自定义函数修改折线图给数据加单位
               console.log(params)
                var str = '';//声明一个变量用来存储数据
                str += '<div>'+ params[0].name +'</div>';   //显示日期的函数
                for(var i=0; i<params.length; i++) {  //图显示的数据较多时需要循环数据,这样才可以成功的给多条数据添加单位
                    str += '<div style="color:'+params[i].color+'"><span>'+ params[i].seriesName +'</span> : <span>'+ (params[i].data ? params[i].data+'%' : '暂无') +'</span></div>';
                }
                return str;
            }

        },
        legend: {
            // show: true,
            data:outName,
            //right: 220,
            //width: 220,
            x : 'right',
            padding: [20,100,0,0],
            itemHeight: 13, 
            icon:'circle',
            textStyle:{    //图例文字的样式
                color:'#fff',
                fontSize:12,
            }
        },
        xAxis: axisArrTime,
        yAxis: {
            name : '单位 %',
            color:['#fff'],
            splitLine:{show: false},//去除网格线
            type: 'value',
            axisLabel: {
                formatter: '%'
            },
            // data: ['0', '20', '40', '60', '80', '100'],
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            axisLine:{
                lineStyle:{
                    color:'#717375',
                    width:2,//这里是为了突出显示加上的,可以去掉
                }
            } 
        },
        series: data
    }

猜你喜欢

转载自blog.csdn.net/sky_lq/article/details/78949229
今日推荐