echarts.js简单使用（2）

最新推荐文章于 2024-04-21 23:33:58 发布
hangGe0111
最新推荐文章于 2024-04-21 23:33:58 发布
阅读量419
点赞数
分类专栏： js 文章标签： echarts.js
本文链接：https://blog.csdn.net/hangGe0111/article/details/81357693
版权
js 专栏收录该内容
48 篇文章 0 订阅
订阅专栏
案例代码来自：https://www.cnblogs.com/st-leslie/p/5771241.html
1.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
		<title>echarts表图</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.clearfix:before, .clearfix:after {
			    content: '.';
			    display: block;
			    visibility: hidden;
			    font-size: 0;
			    line-height: 0;
			    width: 0;
			    height: 0;
			}
			.clearfix:after {
			  clear: both;
			}
			.clearfix {
			  zoom: 1;
			}
			/****表格部分****/
			
			/*图1*/
			.chart1{
				width:400px;
				height:400px;
			}
			/*图2*/
			.chart2{
				width:600px;
				height:400px;	
			}
			/*图3*/
			.chart3{
				/*不要设置宽度*/
				/*width:600px;*/
				height:400px;	
			}
		</style>		
		<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="clearfix">
			<div id="chart1" class="chart1"></div>
			<div id="chart2" class="chart2"></div>
		</div>
		
		<div id="chart3" class="chart3"></div>
		
		<script type="text/javascript">
			
			/*
			 * 图1*/
			
			// 初始化图表标签
		    var myChart1 = echarts.init(document.getElementById('chart1'));
		    var options1={
		        //定义一个标题
		        title:{
		            text:'图1'
		        },
		        //图标(里的data里的值和series里的name要相同，如果不同有惊喜哦，你可以试试看)
		        legend:{
		            data:['人数']
		        },
		        //X轴设置
		        xAxis:{
		            data:['60分','70分','80分','90分','100分']
		        },
		        //y周设置
		        yAxis:{
		        },
		        //name=legend.data的时候才能显示图例
		        series:[{
		            name:'人数',
		            //类型
		            type:'bar',
		            data:['12','32','45','21','1']
		        }]
		
		    };
		    //方法调用
		    myChart1.setOption(options1);
		    
		    /*
		     *图2 */
		    // 初始化图表标签
		    var myChart2 = echarts.init(document.getElementById('chart2'));
		    var options2={
		        //定义一个标题
		        title:{
		            text:'图2'
		        },
		        //图标(里的data里的值和series里的name要相同，如果不同有惊喜哦，你可以试试看)
		        legend:{
		            data:['购买金额','销售金额']
		        },
		        //X轴设置
		        xAxis:{
		            data:['周一','周二','周三','周四','周五','周六','周日']
		        },
		        //y周设置
		        yAxis:{
		        },
		        tooltip:{
                    show:true,
                    formatter:'系列名:{a}<br />类目:{b}<br />数值:{c}'
                },
		        //name=legend.data的时候才能显示图例
		        series:[{
	                name:'购买金额',
	                //类型
	                type:'bar',
	                data:[200,312,431,241,175,275,369],
	                markPoint: {
	                    data: [
	                        {type: 'max', name: '最大值'},
	                        {type: 'min', name: '最小值'}
	                    ]
	                },
	                markLine:{
	                    data:[
	                        {type:'average',name:'平均值',itemStyle:{
	                            normal:{
	                                color:'green'
	                            }
	                        }}
	                    ]
	                }
	            },{
	                name:'销售金额',
	                //类型
	                type:'line',
	                data:[321,432,543,376,286,298,400],
	                markPoint: {
	                    data: [
	                        {type: 'max', name: '最大值'},
	                        {type: 'min', name: '最小值'}
	                    ]
	                },
	                markLine:{
	                    data:[
	                        {type:'average',name:'平均值',itemStyle:{
	                            normal:{
	                                color:'blue'
	                            }
	                        }}
	                    ]
	                }
	            }]
		
		    };
		    //方法调用
		    myChart2.setOption(options2);
		    
		    /*
		     * 图3*/
		    var myChart3=echarts.init(document.getElementById('chart3'));
	        var option3={
	            baseOption:{
	                    title:{
	                    text:'图3',
	                    subtext:'虚拟数据'
	                },
	                legend:{
	                    data:['购买金额','销售金额']
	                },
	                xAxis:{
	                    data:['周一','周二','周三','周四','周五','周六','周日']
	                },
	                yAxis:{
	
	                },
	                tooltip:{
	                    show:true,
	                    formatter:'系列名:{a}<br />类目:{b}<br />数值:{c}'
	                },
	                series:[{
	                    name:'购买金额',
	                    //类型
	                    type:'bar',
	                    data:[200,312,431,241,175,275,369],
	                    markPoint: {
	                        data: [
	                            {type: 'max', name: '最大值'},
	                            {type: 'min', name: '最小值'}
	                        ]
	                    },
	                    markLine:{
	                        data:[
	                            {type:'average',name:'平均值',itemStyle:{
	                                normal:{
	                                    color:'green'
	                                }
	                            }}
	                        ]
	                    }
	                },{
	                    name:'销售金额',
	                    //类型
	                    type:'line',
	                    data:[321,432,543,376,286,298,400],
	                    markPoint: {
	                        data: [
	                            {type: 'max', name: '最大值'},
	                            {type: 'min', name: '最小值'}
	                        ]
	                    },
	                    markLine:{
	                        data:[
	                            {type:'average',name:'平均值',itemStyle:{
	                                normal:{
	                                    color:'blue'
	                                }
	                            }}
	                        ]
	                    }
	                }]
	            },
	            media:[
	                {
	                    //当窗口缩放时会执行，自己测试了一下，写0或者写1000好像没区别
	                    query:{maxWidth:0},
	                    option:{
	                        title:{
	                            show:true,
	                            text:'测试一下'
	                        }
	                    }
	                }
	            ]
	        };
	        //每次窗口大小改变的时候都会触发onresize事件，这个时候我们将echarts对象的尺寸赋值给窗口的大小这个属性，从而实现图表对象与窗口对象的尺寸一致的情况
	        window.onresize = myChart3.resize;
	        myChart3.setOption(option3);
		    		    
		</script>
	</body>
</html>
2.效果
（1）pc端