echarts的基本使用

最新推荐文章于 2024-08-19 19:55:55 发布

Brrby

最新推荐文章于 2024-08-19 19:55:55 发布

阅读量137

点赞数 1

文章标签： echarts 图表

本文链接：https://blog.youkuaiyun.com/qq_30433703/article/details/115227879

版权

echarts的基本使用

引入 echarts.min.js，提取码：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>

在这里插入图片描述