echarts柱状图自定义显示内容

最新推荐文章于 2024-06-25 15:34:07 发布

v言己

最新推荐文章于 2024-06-25 15:34:07 发布

阅读量7.5k

点赞数

文章标签： echarts 柱状图

本文链接：https://blog.csdn.net/weixin_43261835/article/details/99345268

版权

本文介绍了如何在ECharts柱状图中自定义tooltip显示内容。首先展示了基础的柱状图搭建步骤，然后通过修改option的tooltip属性来实现鼠标移动时显示自定义信息。特别是通过设置params和trigger属性，可以实现在每个柱状条上触发并显示个性化的内容。

摘要由CSDN通过智能技术生成

echarts柱状图自定义显示内容

基础搭建

基础搭建

1、引入js
<script src="js/echarts.min.js"></script>
2、基础代码如下:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/echarts.min.js"></script>
		<style>
			#map {
				width: 400px;
				height: 200px;
				border: 1px solid red;
			}
		</style>
	</head>

	<body>

		<div id="map"></div>

	</body>
	<script>
		/*创建echarts实例*/
		var myChart = echarts.init(document.getElementById('map'));
		/*创建数据对象*/
		var option = {
			legend: {},
			tooltip: {},
			dataset: {
				source: [
					['product', '2015', '2016', '2017'],
					['Matcha Latte', 43.3, 85.8, 93.7],
					['Milk Tea', 83.1, 73.4, 55.1],
					['Cheese Cocoa', 86.4, 65.2, 82.5],
					[

最低0.47元/天解锁文章

v言己

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
echarts柱状图自定义显示内容

echarts柱状图自定义显示内容基础搭建基础搭建1、引入js<script src="js/echarts.min.js"></script>2、基础代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title><...
复制链接

扫一扫