zoukankan      html  css  js  c++  java
  • echarts Y轴的刻度 跟数据对应---tooltip-formatter

    var xAxisData = ['2018-01', '2018-02', '2018-03', '2018-04', '2018-05', '2018-06', '2018-07', '2018-08', '2018-09', '2018-10','2018-11','2018-12'];
    var legendData= ['投诉量','解决量','投诉解决率'];
    var title = "多横向折线图";
    var serieData = [];
    var metaDate = [
        [120, 140, 100, 120, 300, 230, 130, 170,140, 120, 300, 230],
        [200, 120, 300, 200, 170, 300, 200, 180,200, 190, 300, 200],
        [100,200, 140, 300, 200, 180, 100, 300, 230, 130, 100 ,300,]
    ]
    for(var v=0; v < legendData.length ; v++){
        var serie = {
            name:legendData[v],
            type: 'line',
            symbol:"circle",
            symbolSize:10,
            data: metaDate[v]
        };
        serieData.push(serie)
    }
    var colors = ["#036BC8","#4A95FF","#5EBEFC","#2EF7F3","#FFFFFF"];
    var option = {
        backgroundColor: '#0f375f',
        title : {text: title,textAlign:'left',textStyle:{color:"#fff",fontSize:"16",fontWeight:"normal"}},
        legend: {
            show:true,left:"right",data:legendData,y:"5%",
            itemWidth:18,itemHeight:12,textStyle:{color:"#fff",fontSize:14},
        },
        color:colors,
        grid: {left: '2%',top:"12%",bottom: "5%",right:"5%",containLabel: true},
        tooltip : { trigger: 'axis',axisPointer : { type : 'shadow'}},
        xAxis: [
            {   
                type: 'category',
                axisLine: { show: true,lineStyle:{ color:'#6173A3' }},
                axisLabel:{interval:0,textStyle:{color:'#9ea7c4',fontSize:14} },
                axisTick : {show: false},
                data:xAxisData,
            },
        ],
        yAxis: [
            {   
                axisTick : {show: false},
                splitLine: {show:false},
                axisLabel:{textStyle:{color:'#9ea7c4',fontSize:14} },
                axisLine: { show: true,lineStyle:{ color:'#6173A3'}},
            },
        ],
        series:serieData
    };
    tooltip: {
                                trigger: 'axis',
                                textStyle:{
                                    fontSize:'12px',
                                    aligin:'center',
                                },
                                formatter:function(params){  //数据单位格式化  
                                   var relVal = params[0].name;  //x轴名称  
                                   for (var i = 0, l = params.length; i < l; i++) {    
                                    if(params[i].value){
    
                                       relVal += '<br/> ' + params[i].seriesName + ' : ' + params[i].value*100+"%";    
                                    }
                                   }  
                                       
                                   return relVal;    
                                }
                            },
  • 相关阅读:
    svn cleanup failed–previous operation has not finished 解决方法
    开源SNS社区系统推荐
    从网络获取图片本地保存
    MS SQL Server 数据库连接字符串
    KeepAlive
    Configure Git in debian
    sqlserver query time
    RPi Text to Speech (Speech Synthesis)
    SQL Joins with C# LINQ
    search or reseed identity columns in sqlserver 2008
  • 原文地址:https://www.cnblogs.com/love314159/p/9016078.html
Copyright © 2011-2022 走看看