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;    
                                }
                            },
  • 相关阅读:
    mysql忘记root密码解决办法
    laravel 获取所有表名
    跳转/传值(从页面到php文件)
    smarty foreach
    radio单选框
    dedecms实例化对象
    file_get_contents()
    if($a)
    bug解决思路
    git查看远程仓库地址
  • 原文地址:https://www.cnblogs.com/love314159/p/9016078.html
Copyright © 2011-2022 走看看