<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../bootstrapJ/global/plugins/echarts-2.2.7/build/dist/echarts-all.js"></script> <!-- <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>--> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="box" style="height:400px;width:600px;padding: 20px"></div> </body> <script> // 获取到这个DOM节点,然后初始化 var myChart = echarts.init(document.getElementById("box")); var option = { tooltip : { show:true, trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' //实现折线图鼠标移入显示的颜色 } } }, //调整折线图的位置 grid: { top:"20px", left: '2%', right: '9%', bottom: '5%', containLabel: true }, legend: { orient: 'vertical', // data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'] data:[''],//echarts 不显示 }, toolbox: { show : true, feature : { // mark : {show: true}, //dataView : {show: true, readOnly: false}, //magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']}, // restore : {show: true}, // saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category', axisLine: { symbol: ['none', 'arrow'], //设置x轴或y轴箭头 lineStyle: { color: '#B5B5B5', width: 2, //这里是为了突出显示加上的 } }, //刻度是向内还是向外 axisTick:{ inside:true, length:1, }, splitLine: { show: true, lineStyle: { type: 'solid', color:'#FCFCFC',//网格颜色 } }, axisLabel:{ //调整x轴的lable //interval:0, //按x轴的长度显示的刻度的个数 例如:本来显示20个刻度,因为x轴端只显示了10个, rotate:0, //实现x轴的刻度的标识实现旋转, textStyle:{ fontSize:10,// 让字体变大 color:"#B5B5B5" } }, name: "(日期)", nameTextStyle: { color: "#B5B5B5", verticalAlign: "bottom", fontSize:'10', padding:[35,50,10,-2] //设置x轴的标题的位置 }, boundaryGap : false, data:['2016-01','2016-07','2016-08','2016-09'] // data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'VALUE', splitNumber:2,//所以将 splitNumber设成3 axisLine: { symbol: ['none', 'arrow'], lineStyle: { color: '#B5B5B5', width: 2, //这里是为了突出显示加上的 } }, splitLine: { show: true, lineStyle: { type: 'solid',// color:'#FCFCFC'///网格颜色 } }, //刻度是向内还是向外 axisTick:{ inside:true, length:1, }, axisLabel:{ //调整x轴的lable textStyle:{ fontSize:10,// 让字体变大 color:"#B5B5B5" } }, name: "(人数)", nameLocation:"end", //实现标题显示的位置 nameTextStyle:{ color: "#B5B5B5", fontSize:10, // verticalAlign: 'top', // align:"left", padding:[50,0,-6,0] }, //axisLine : {onZero: false}, /* boundaryGap : false, axisLabel : { formatter: '{value} ' }, data:['AA-','AA','AA+']*/ } ], series : [ { name:'搜索引擎', type:'line', stack: '总量', smooth:true, itemStyle : { normal : { color:'#5787EB',//设置折线折点颜色 lineStyle:{ color:'#5787EB'//设置折线线条颜色 } } }, data:[5820, 832, 801, 834] //data:['aa','AA'] } ] }; myChart.setOption(option); </script> </html>
Echarts各种属性的设置
最新推荐文章于 2024-05-11 12:50:23 发布