利用Echarts写的柱状图

最新推荐文章于 2023-05-07 15:19:26 发布
jav0a0
最新推荐文章于 2023-05-07 15:19:26 发布
阅读量306
点赞数
分类专栏： H5前段利用echarts写柱状图
本文链接：https://blog.csdn.net/jav0a0/article/details/90714891
版权
H5前段利用echarts写柱状图专栏收录该内容
1 篇文章
订阅专栏
本文介绍了如何使用Echarts库来绘制柱状图，包括展示效果图和具体的HTML代码实现。推荐从开源网站bootcdn下载所需的echarts.min.js和jquery.min.js资源。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
利用Echarts写的柱状图

效果图如下

利用Echarts写的柱状图
html 代码如下

<!DOCTYPE html>
<html style="height: 100%">
<head>
   <meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
		<meta name="format-detection" content="telephone=no" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<title>柱状图</title>
		<script type="text/javascript" src="jquery.min.js" ></script>//在网上现在一个jquery.min.js文件
		<style>
		html,body{
		    height: 100%;
		}
		body{
		    font-family: PingFangSC-Regular, sans-serif;
		    font-size: 16px;
		    background: #ffffff;
		}
		body,html,div,p,input,img,span,h1,h2,h3,h4,ul,li,section,footer,header,label,select,button,a,i,e,b,dl,dd{
		    margin: 0;
		    padding: 0;
		}
		a{
		    text-decoration: none;
		}
		b{
		    font-weight: normal;
		}
		a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}
		li{
		    list-style: none;
		}
		em,i{
		    font-style: normal;
		}

		</style>
	</head>	
   <body style="height: 100%; margin: 0">
       <div id="container" style="width:80%;height: 300px;margin:0 auto;"></div>
       <script type="text/javascript" src="echarts.min.js"></script>//要用Echarts需要引入一个echarts.min.js文件 在网上下载即可我下载的是版本3
       //下面是用js来设置echarts呈现的
       <script>
        
      var dom = document.getElementById("container");
      var myChart = echarts.init(dom);
      var app = {};
      option = null;
      option = {
          title : {
              text: '销售团队业绩数据的呈现',
              textStyle:{
                  fontSize:12,
                  color: '#666666',
                  fontWeight:'normal',
              },
//            subtext: '纯属虚构'
          },
          tooltip : {
              triggerOn:"click",
              backgroundColor:'#ffffff',
              padding: 5,
              textStyle:{
                  color:'#508cee',
                  fontSize:12,
                  lineHeight:16,
                  textShadowColor:'rgba(0, 0, 0, 0.1)',
                  textShadowBlur:2,
                  textShadowOffsetX:0,
                  textShadowOffsetY:0,
              },
              extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',

              trigger: 'axis',
              show: true,
              formatter:function(params)
              {//自定义提示框样式
                  var relVal = "";
                    for (var i = 0, l = params.length; i < l; i++) {//有多种柱子时，用循环获取相关的数据
                          relVal += `<span style="padding:.05rem .1rem;">${params[i].data}</span>`;
                     }
                  return `<div style="display: flex;align-items: center;position: relative;">${relVal}</div>`;
              },
              position: function(point, params, dom, rect, size){//控制提示框的位置
                  //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
//                console.log(point, params, dom, rect, size)
//以下代码是让提示框跟着鼠标位置出现的代码
//                var x = point[0];//
//                var y = point[1];
//                var viewWidth = size.viewSize[0];
//                var viewHeight = size.viewSize[1];
//				  console.log(params)
//				  console.log(viewWidth,viewHeight)
//                var boxWidth = size.contentSize[0];
//                var boxHeight = size.contentSize[1];
//                var posX = 0;//x坐标位置
//                var posY = 0;//y坐标位置
//
//                if(x<boxWidth){//左边放不开
//                    posX = 5;
//                }else{//左边放的下
//                    posX = x-boxWidth;
//                }
//
//                if(y<boxHeight){//上边放不开
//                    posY = 5;
//                }else{//上边放得下
//                    posY = y-boxHeight;
//                }
//
//                return [posX,posY];//提示框跟着鼠标点击的位置走
				
//以下代码是自定义控制提示框位置的代码
				var arr = [];
				var contentHeight = size.contentSize[1];//提示框的高度
				console.log(contentHeight);
                for(var i = 0, l = params.length; i < l; i++){
                    arr.push(params[i].data)
                }
                var max = Math.max.apply(null, arr);
                var min = Math.min.apply(null, arr);
//              console.log(1-max/100,1-min/100)//这里的100是y轴的最大值 这里是求比例
				var yy=(1-max/100)*180+70-contentHeight-10 //这里180是直角坐标系的高度 70是直角坐标系距离外层容器顶部的距离 单位都是px 10是自己设置的一个随意数值 是为了提示框和柱状图有一个距离
//				console.log(point[0],(1-max/100)+'%')
				return [point[0], yy];
				//以下代码是让提示框固定在顶部的代码
//				return [point[0], '10%'];//
				
              }
          },
          legend: {
              data:[{
                  name: '个人',
                  textStyle: {
                      color: '#5df255'
                  }
              },{
                  name: '团队',
                  textStyle: {
                      color: '#7bbeec'
                  }
              }],
              left:"right",
              top:"top",
          },

          calculable : true,
          xAxis :
              {
                  type : 'category',
                  data : ['日','周','月',"季"],
                  axisLine: {
                      lineStyle: {
                          color: '#eeeeee'
                      }
                  },
                  axisPointer: {
                      type: 'none'
                  },
                  axisLabel: {
                      textStyle: {
                          color: '#cccccc',//坐标值得具体的颜色
                      }
                  },
              },
          yAxis :
              {
                  type: 'value',
                  name: '万',
                  min: 0,
                  max: 100,
                  interval: 20,
                  nameTextStyle:{
                      color: '#999999',
                  },
                  axisLine: {
                      lineStyle: {
                          color: '#eeeeee'
                      }
                  },
                  axisLabel: {
                      textStyle: {
                          color: '#cccccc',//坐标值得具体的颜色
                      }
                  },
                  splitLine:{
                      lineStyle:{
                          color:"#eeeeee",
                          type:'solid'
                      }
                  }
              },
          series : [
              {
                  name: '个人',
                  type: 'bar',
                  barGap:'60%',
                  barWidth:8,
                  barMaxWidth: 10, //最大宽度
                  data: [10,20,30,40],
                  itemStyle: {
                  	emphasis:{
	                  	color: '#10acff',
	                    
	                  },
                  // 阴影的大小
                    shadowBlur: 10,
                    // 阴影水平方向上的偏移
                    shadowOffsetX: 0,
                    // 阴影垂直方向上的偏移
                    shadowOffsetY: 0,
                    // 阴影颜色
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    barBorderRadius: [5, 5, 0, 0]
                  }
                 
              },
              {
                  name:'团队',
                  type: 'bar',
                  barWidth:8,
                  barGap:'60%',
                  barMaxWidth: 10, //最大宽度
                  data:[8, 16, 32,60],
                  itemStyle: {
                  	emphasis:{
	                  	color: '#fe5610',
	                    
	                  },
                      // 阴影的大小
                      shadowBlur: 10,
                      // 阴影水平方向上的偏移
                      shadowOffsetX: 0,
                      // 阴影垂直方向上的偏移
                      shadowOffsetY: 0,
                      // 阴影颜色
                      shadowColor: 'rgba(0, 0, 0, 0.3)',
                      barBorderRadius: [5, 5, 0, 0]
                  }

              },
          ],
		  grid:{
				height: 180,//设置直角坐标系的高度 为了控制提示出现的位置所设置 默认情况是自适应
				y:70,//设置直角坐标系距离外层容器顶部的高度 为了控制提示出现的位置所设置 默认情况是自适应
			},
          color:["rgba(158, 224, 255, .9)", "rgba(255, 186, 163, .9)"],
		  
      };
      ;
      if (option && typeof option === "object") {
          myChart.setOption(option, true);
      }
</script>
   </body>
</html>
echarts.min.js和jquery.min.js 资源下载可到开源的bootcdn网站下载下载一些资源的开源网址https://www.bootcdn.cn/