echarts的基本使用-白红宇的个人博客

echarts的基本使用

发布日期：2021-05-08 13:41:26 浏览次数：21 分类：原创文章

本文共 3984 字，大约阅读时间需要 13 分钟。

echarts的基本使用

引入，提取码：4crn
为 ECharts 准备一个具备高宽的 DOM 容器

<!DOCTYPE html><html>	<head>		<meta charset="UTF-8">		<title></title>		<!-- 引入 ECharts 文件 -->		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />    	<script src="js/echarts.min.js"></script>    	<style>    		#main{height: 500px;width:400px;margin: 0 auto;top:100px}    	</style>    	<script>     		var d = document.documentElement;     		var cw = d.clientWidth || 710;     		document.documentElement.style.fontSize = (cw/710 * 10) + 'px';     		var flag=true;		</script>	</head>	<body>		<div id="main"></div>	</body>	<script type="text/javascript">        // 基于准备好的dom，初始化echarts实例                var myChart = echarts.init(document.getElementById('main')); 		var checkName='';//点击柱子的名字 		        // 指定图表的配置项和数据        var option = {            title: {                text: '数据详情'            },            tooltip: {            	trigger:'axis',            	axisPointer: { // Use axis to trigger tooltip        			type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'    			},            	formatter:function(e){            		return e[0].seriesName+"<br/>"+e[0].name+"月产量"+e[0].data+"吨"            	}            },            legend: {            	selectedMode: 'single',                data:['2020年','2021年'],                selected: {				    				}                           },            xAxis: {            	name:'月份',                data: ["1","2","3","4","5","6","7","8","9","10","11","12"],                axisLabel : {                    clickable:true//并给图表添加单击事件  根据返回值判断点击的是哪里                }            },            yAxis: {            	type:'value',            	name:'产量',                min:3400,                max:4100,                interval:100,                axisLabel:{                  formatter: function(value){                  	if (value.length > 8) {      					return value.substring(0, 2) + "...";    				} else {      					return value;    				}                  }                }            },                       series: [{	            			color: ['#3871B4'],            			name: '2020年',                		type: 'bar',                		data: [0,0,0,0,2900,3970,4010,3677,3717,3597,3677,3730],                		itemStyle: {  	                	 normal: {  	                		label:{show:false},  				            color: function (params){  				               //通过判断选中的名字改变柱子的颜色样式  				            	if(checkName === params.name){  				            		return '#8B0003';  				            	}else {  				            		return '#3871B4';  				            	}                         }  	                }  	              }                	 },            		 {            		 	color: ['#0300FC'],            			name: '2021年',                		type: 'bar',                		data: [3970,3970,3970,3970,4090,3970,4010,3677,3717,3597,3677,3730],                		itemStyle: {  	                	 normal: {  	                		label:{show:false},  				            color: function (params){  				               //通过判断选中的名字改变柱子的颜色样式  				            	if(checkName === params.name){  				            		return '#8B0003';  				            	}else {  				            		return '#0300FC';  				            	}                         }  	                }  	              }                	 }],            toolbox:{            	show: true,            	feature:{            		mark:{show:true},            		magicType:{show:true,type:['line','bar']},            		restore:{show:true},            		saveAsImage: {show:true,title:'下载',pixelRatio: 2 }            	}            },            calculable : true        };                        // 使用刚指定的配置项和数据显示图表。        myChart.setOption(option);                //点击事件        myChart.on('click',function(params){             //点击的柱子的名称		    checkName = params.name;		    //console.log(params);				    //柱形图重构		     myChart.setOption(option);		     checkName = '';       });                        </script></html>

在这里插入图片描述