echarts 折线图——双折线图(多条折线也可以)

       option = {
            tooltip : {
                trigger : 'axis',
                formatter: '{b0}
{a0}: {c0}万元
{a1}: {c1}万元', //指示器 axisPointer : { type : 'line', lineStyle : { color:'#7171C6' } } }, //图形位置 grid : { left : '4%', right : '6%', bottom : '4%', top : 50, containLabel : true }, xAxis : [ { type : 'category', //x轴坐标点开始与结束点位置都在最边缘,true为不在 boundaryGap : false, axisLine : { show : true, //x轴线样式 lineStyle : { color : '#17273B', width : 1, type : 'solid' } }, //x轴字体设置 axisLabel : { show : true, fontSize : 12, color : 'black', interval:0, rotate:15 }, data : [ '01', '02', '03', '04' ,'05','06','07','08','09','10','11','12'] } ], yAxis : [ { type : 'value', name:'金额(万元)', //y轴字体设置 axisLabel : { show : true, color : 'black', fontSize : 12, }, //y轴线设置显示 axisLine : { show : true }, //与x轴平行的线样式 splitLine : { show : true, lineStyle : { color : '#000', width : 1, type : 'solid', } } } ], series : [ { name : '去年销售额', type : 'line', smooth: true, lineStyle : { color : '#4d8bfc', width : 2, type : 'solid', }, //折线连接点样式 itemStyle : { color : '#3084ff' }, //折线堆积区域样式 areaStyle : { color : '#c3e7ff' }, data : [ 0, 23, 38, 0,15 ] }, { name : '今年销售额', type : 'line', smooth: true, lineStyle : { color : '#d256b6', width : 2, type : 'solid', }, //折线连接点样式 itemStyle : { color : '#d256b6' }, //折线堆积区域样式 areaStyle : { color : '#efcdff' }, data : [ 0, 0, 56, 0 ] } ] };

echarts 折线图——双折线图(多条折线也可以)_第1张图片

你可能感兴趣的:(vue,echarts,js,vue.js)