首页 > 其他 > 详细

echarts Y轴的刻度 跟数据对应

时间:2018-05-09 20:23:16      阅读:440      评论:0      收藏:0      [点我收藏+]
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
};

 

echarts Y轴的刻度 跟数据对应

原文:https://www.cnblogs.com/love314159/p/9016078.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!