echarts的配置项
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--1.引入echatrs.min.js文件--> <script src="echarts.min.js"></script> </head> <body> <!--2.准备一个装图表的盒子--> <div style="width: 600px;height: 400px"></div> <!--初始化echarts实例对象--> <script> //3.初始化eharts实例对象 var mcharts=echarts.init(document.querySelector('div')); //4.准备配置项 var option={ xAxis:{ type:'category',//类目轴 data:['xiaoming','xiaohong','xiaowang'] }, yAxis:{ type:'value'//数值轴 }, series:[ { name: '语文', type: 'bar', data: [70, 94, 110] } ] } //5.配置项给echarts对象 mcharts.setOption(option); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--1.引入echatrs.min.js文件--> <script src="echarts.min.js"></script> </head> <body> <!--2.准备一个装图表的盒子--> <div style="width: 600px;height: 400px"></div> <!--初始化echarts实例对象--> <script> //3.初始化eharts实例对象 var mcharts=echarts.init(document.querySelector('div')); var xdata=['小明','小强','小孩','三客'] var ydata= [70, 94, 110,55] //4.准备配置项 var option={ title:{ text:'成绩展示', textStyle: { color:'blue', }, borderWidth:5, borderColor:'red', borderRadius:5, left:20, top:10 }, tooltip:{ trigger:'axis', //trigger:'item', triggerOn:'click', //formatter:'{b}的成绩是{c}', formatter:function (arg) { return arg[0].name+' '+arg[0].data } }, toolbox:{ feature: { saveAsImage: {},//导出图片 dataView: {},//数据视图 restore: {},//重置 dataZoom: {},//区域缩放 magicType:{ } } }, xAxis:{ type:'category',//类目轴 data:xdata }, yAxis:{ // type:'value'//数值轴 }, series:[ { name: '语文', type: 'bar', markPoint:{ data:[ { type: 'max', name:'最大值' }, { type: 'min', name:'最小值' }, ] }, markLine:{ data:[ {type:'average',name:'平均值'} ] }, label:{ show:true, }, data: ydata } ] } //5.配置项给echarts对象 mcharts.setOption(option); </script> </body>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="echarts.min.js"></script> </head> <body> <div style="width: 600px;height: 400px"></div> </body> </html> <script> var mcharts=echarts.init(document.querySelector('div')); var xdata=['小明','小强','小孩','三客'] var ydata1= [70, 94, 110,55] var ydata2= [50, 74, 120,88] var option={ title:{ text:'成绩展示', textStyle: { color:'blue', }, borderWidth:5, borderColor:'red', borderRadius:5, left:20, top:10 }, legend:{ data:['数学','语文'] }, tooltip:{ trigger:'axis', //trigger:'item', triggerOn:'click', //formatter:'{b}的成绩是{c}', formatter:function (arg) { return arg[0].name+' '+arg[0].data } }, toolbox:{ feature: { saveAsImage: {},//导出图片 dataView: {},//数据视图 restore: {},//重置 dataZoom: {},//区域缩放 } }, xAxis:{ type:'category',//类目轴 data:xdata }, yAxis:{ type:'value'//数值轴 }, series:[ { name: '语文', type: 'bar', label:{ show:true, }, data: ydata1 }, { name: '数学', type: 'bar', label:{ show:true, }, data: ydata2 }, ] } //5.配置项给echarts对象 mcharts.setOption(option); </script>