使用echarts创建柱状图并添加tooltip链接-优快云博客

本文链接：https://blog.youkuaiyun.com/u013147600/article/details/48518381

该博客介绍了如何使用echarts库来创建柱状图，并详细讲解了如何从json数据中提取信息，根据年度展示不同数据。重点在于在tooltip提示框中添加链接，需要设置enterable属性为true以确保链接可用，同时配置提示框的相关参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能：

1.从json中提取数据

2.按年度显示不同数据

2.1 每次只显示一个图例的图表设置： selectedMode:'single',

legend: {

x: 'right',

selectedMode:'single',

data:['2011','2012','2013','2014','2015','total']

2.2 默认（不）选中指定的图例数据，设置selected属性

legend: {

x: 'right',

selected{

2011:true,

2012:false

data:['2011','2012','2013','2014','2015','total']

3.tooltip标签栏中添加链接

3.1.当提示框中有链接时要设置 enterable:true, 属性，（当鼠标移开后提示框才消失）

3.2.提示框参数设置

tooltip : {

trigger: 'item',

//设置当鼠标移除时提示框才消失

enterable:true,

formatter: function(params) {

var res = '<div> <strong>' + params.name + '</strong><br/>' + params.seriesName + '年: ' + params.value+'（份）<br/> <a target=mainFrame href=list_company_pie.html>查看具体数据<a></div>' ;

return res;

}

formatter: "{a}年乙方合同占比 <br/>{b} : {c}(元) ({d}%) "

4 通过grid属性可以控制图表（大小）分布

grid: {

y: 80,

y2:90,

x2:50

效果图：

实例代码：

<!DOCTYPE html>
<html style="overflow-x:hidden;overflow-y:auto;">
	<head>
		<title>柱状图</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-store" />
<meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Expires" content="0" />
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9,IE=10" />
<script src="static/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
  <script type="text/javascript" src="static/js/echarts.js"></script>		
	
	<script type="text/javascript"> 
		$(document).ready(function() {

	var contextall=eval([{"category_name":"工程建设类","categoty_num":9110},{"category_name":"买卖类","categoty_num":2247},{"category_name":"技术服务类","categoty_num":736},{"category_name":"其他类","categoty_num":703},{"category_name":"咨询委托类","categoty_num":403},{"category_name":"运维检修类","categoty_num":250},{"category_name":"财务资产金融类","categoty_num":201},{"category_name":"后勤服务类","categoty_num":163},{"category_name":"购售电输电类","categoty_num":72},{"category_name":"宣传与公共关系类","categoty_num":45},{"category_name":"融资租赁","categoty_num":21},{"category_name":"信息化建设类","categoty_num":15},{"category_name":"劳务服务类","categoty_num":10},{"category_name":"供用电类","categoty_num":7},{"category_name":"运输仓储类","categoty_num":5}]);

	var context2011=eval([{"category_name":"工程建设类","categoty_num":2751},{"category_name":"其他类","categoty_num":227},{"category_name":"技术服务类","categoty_num":144},{"category_name":"买卖类","categoty_num":118},{"category_name":"咨询委托类","categoty_num":83},{"category_name":"财务资产金融类","categoty_num":18},{"category_name":"购售电输电类","categoty_num":15},{"category_name":"运维检修类","categoty_num":10},{"category_name":"融资租赁","categoty_num":2},{"category_name":"后勤服务类","categoty_num":2},{"category_name":"宣传与公共关系类","categoty_num":0},{"category_name":"信息化建设类","categoty_num":0},{"category_name":"劳务服务类","categoty_num":0},{"category_name":"供用电类","categoty_num":0},{"category_name":"运输仓储类","categoty_num":0}]
);
	
	var context2012=eval([{"category_name":"工程建设类","categoty_num":2958},{"category_name":"买卖类","categoty_num":906},{"category_name":"其他类","categoty_num":309},{"category_name":"技术服务类","categoty_num":183},{"category_name":"咨询委托类","categoty_num":153},{"category_name":"财务资产金融类","categoty_num":52},{"category_name":"购售电输电类","categoty_num":22},{"category_name":"运维检修类","categoty_num":5},{"category_name":"融资租赁","categoty_num":4},{"category_name":"供用电类","categoty_num":1},{"category_name":"后勤服务类","categoty_num":0},{"category_name":"宣传与公共关系类","categoty_num":0},{"category_name":"信息化建设类","categoty_num":0},{"category_name":"劳务服务类","categoty_num":0},{"category_name":"运输仓储类","categoty_num":0}]);


	var context2013=eval([{"category_name":"工程建设类","categoty_num":1614},{"category_name":"买卖类","categoty_num":783},{"category_name":"技术服务类","categoty_num":220},{"category_name":"其他类","categoty_num":149},{"category_name":"财务资产金融类","categoty_num":131},{"category_name":"咨询委托类","categoty_num":78},{"category_name":"运维检修类","categoty_num":63},{"category_name":"后勤服务类","categoty_num":17},{"category_name":"宣传与公共关系类","categoty_num":12},{"category_name":"购售电输电类","categoty_num":11},{"category_name":"供用电类","categoty_num":4},{"category_name":"信息化建设类","categoty_num":4},{"category_name":"运输仓储类","categoty_num":3},{"category_name":"融资租赁","categoty_num":0},{"category_name":"劳务服务类","categoty_num":0}]);

	var context2014=eval([{"category_name":"工程建设类","categoty_num":1725},{"category_name":"买卖类","categoty_num":429},{"category_name":"技术服务类","categoty_num":188},{"category_name":"运维检修类","categoty_num":170},{"category_name":"后勤服务类","categoty_num":132},{"category_name":"咨询委托类","categoty_num":89},{"category_name":"宣传与公共关系类","categoty_num":33},{"category_name":"购售电输电类","categoty_num":23},{"category_name":"其他类","categoty_num":18},{"category_name":"融资租赁","categoty_num":15},{"category_name":"信息化建设类","categoty_num":11},{"category_name":"劳务服务类","categoty_num":9},{"category_name":"运输仓储类","categoty_num":2},{"category_name":"供用电类","categoty_num":2},{"category_name":"财务资产金融类","categoty_num":0}]);

	var context2015=eval([{"category_name":"工程建设类","categoty_num":62},{"category_name":"后勤服务类","categoty_num":12},{"category_name":"买卖类","categoty_num":11},{"category_name":"运维检修类","categoty_num":2},{"category_name":"劳务服务类","categoty_num":1},{"category_name":"技术服务类","categoty_num":1},{"category_name":"购售电输电类","categoty_num":1},{"category_name":"其他类","categoty_num":0},{"category_name":"咨询委托类","categoty_num":0},{"category_name":"财务资产金融类","categoty_num":0},{"category_name":"宣传与公共关系类","categoty_num":0},{"category_name":"融资租赁","categoty_num":0},{"category_name":"信息化建设类","categoty_num":0},{"category_name":"供用电类","categoty_num":0},{"category_name":"运输仓储类","categoty_num":0}]);
	

	var category=[];
	var data2011=[];
	var data2012=[];
	var data2013=[];
	var data2014=[];
	var data2015=[];
	var dataAll=[];


	for(var i=0 ;i<contextall.length;i++)
		{
		//图例名称数组
		category.push(contextall[i].category_name);

		data2011.push(context2011[i].categoty_num);
		data2012.push(context2012[i].categoty_num);
		data2013.push(context2013[i].categoty_num);
		data2014.push(context2014[i].categoty_num);
		data2015.push(context2015[i].categoty_num);
		dataAll.push(contextall[i].categoty_num);
		}


			require.config(
				{
					paths:{
					echarts:'static/js'
					}
				});
				require(
					[
					'echarts',
					'echarts/chart/bar',
					'echarts/chart/line'
					]
					, function(ec)
					{
					
					//color
					var zrColor = require('zrender/tool/color');
					var colorList = [
					  '#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
					  '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0'
					];
				
				
				 var itemStyle = {
					normal: {
						color: function(params) {
						  if (params.dataIndex < 0) {
							// for legend
							return zrColor.lift(
							  colorList[colorList.length - 1], params.seriesIndex * 0.1
							);
						  }
						  else {
							// for bar
							return zrColor.lift(
							  colorList[params.dataIndex], params.seriesIndex * 0.1
							);
						  }
						}
					}
				};  
				option = {
					title: {
						text: '2011-2015年度合同类型图'    
					},
					tooltip: {
						trigger: 'axis',
					     //backgroundColor:'#FF7F00',// 'rgba(255,255,255,0.7)', 
						 axisPointer: {
							type: 'shadow'
						}, 
						//设置当鼠标移除时提示框才消失
						enterable:true,
						formatter: function(params) {
							// for text color
							var color = colorList[params[0].dataIndex];
							var res = '<div style="color:' + color + '"> ';
							res += '<strong>' + params[0].name + '合同</strong>'
							for (var i = 0, l = params.length; i < l; i++) {

									parent.whole_year= params[i].seriesName;

								res += '<br/>' + params[i].seriesName + '年: ' + params[i].value+'（份）<br/><a  target=mainFrame href=list_category_bar.html?parent.whole_year='+params[i].seriesName +'&parent.whole_type='+params[0].name+'>查看具体数据<a>' ;
							}
							res += '</div>';
							return res;
						} 
					},
					legend: {
						x: 'right',
						selectedMode:'single',
						data:['2011','2012','2013','2014','2015','2011-2015']
					   
					},
					toolbox: {
						show: true,
						orient: 'vertical',
						y: 'center',
						feature: {
							 mark: {show: true}, 
							dataView: {show: true, readOnly: false},
							restore: {show: true},
							 saveAsImage: {show: true}, 
							'magicType':{'show':true,'type':['line','bar','stack','tiled']}
						}
					},
					calculable: true,
					grid: {
						y: 80,
						y2:90,
						x2:50
					},
					
					  /*  grid : {'y':80,'y2':100}, */
					xAxis: [
						{
							name:'类型(份)',
							type: 'category',
							  'axisLabel':{
							//刻度间隔
							'interval':0,
							//文字倾斜60度
							 rotate: 30
							 },
							
							 
							data: category
							
						}
					],
					yAxis: [
						{
							type: 'value',
							'name':'数量(份)'
						}
					],
					series: [
						{
							name: '2011',
							type: 'bar',
							//itemStyle: itemStyle,
							data: data2011
							
						},
						{
							name: '2012',
							type: 'bar',
							//itemStyle: itemStyle,
							data: data2012
							
						},
						{
							name: '2013',
							type: 'bar',
							//itemStyle: itemStyle,
							data: data2013
							
						},
						{
							name: '2014',
							type: 'bar',
						   //itemStyle: itemStyle,
							data: data2014
							
						},
						{
							name: '2015',
							type: 'bar',
						   // itemStyle: itemStyle,
							data: data2015
							
						} ,
						{
							name: '2011-2015',
							type: 'bar',
						   // itemStyle: itemStyle,
							data: dataAll
							
						} 
					]
				};

				var myChart =ec.init(document.getElementById("myChart"));
							myChart.setOption(option);      
					}
				
				);
	
		});
  	
	</script>
 
	</head>
  
  <body>
	
  	<ul class="nav nav-tabs">
		<li class="active"><a href="${ctx}/sys/user/">柱状图</a></li>
	</ul>

	<div id="myChart"  style="height:500px"></div>
  </body>
</html>