echarts 折柱图混合，使用数据集dataset，并且改变tooltip中圆点的样式

weixin_42255542

已于 2023-08-29 09:29:41 修改

阅读量818

点赞数

分类专栏： vue js 文章标签： echarts javascript vue.js

于 2022-11-03 14:50:45 首次发布

本文链接：https://blog.csdn.net/weixin_42255542/article/details/127670164

版权

vue 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

12 篇文章 0 订阅

订阅专栏

echarts折柱图，使用数据集dataset，改变tooltip中圆点的样式

在echarts中运行如图：
在这里插入图片描述

options: {
	color: ['#6666ff', '#66cc99', '#ff6600', '#ffcc33'],
	legend: {
		textStyle: {
			fontSize: 12,
			color: '#888',
		},
		top: '5',
	},
	grid: {
		left: '3%',
		right: '3%',
		top: '80',
		bottom: '40',
		containLabel: true,
	},
	tooltip: {
		trigger: 'axis',
		backgroundColor: 'rgba(255, 255, 255, 1)',
		axisPointer: {
			type: 'cross',
			label: {
				backgroundColor: '#6a7985',
			},
		},
		padding: [5, 10, 5, 10],
		formatter: function (params) {
			return (
				params[0].axisValue +
				`<br>` +
				params
					.map((item) => {
						let str = `<span style="display:inline-block;width:20px;height:12px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${item.color};"></span>`
						if (item.componentSubType === 'line') {
							str = `<span style="display:inline-block; width: 5px;height: 2px; margin: 0 -5px 5px -3px;background-color: ${item.color}"></span>
								   <span style="display:inline-block; width:12px;height:12px; border-radius:50%;border: 2px solid ${item.color};"></span>
								   <span style="display:inline-block; width: 5px;height: 2px; margin: 0 7px 5px -5px;background-color: ${item.color}"></span>`
						}
						let seriesNameStr = `<span style="display:inline-block;">${item.seriesName}</span>`
						let value = item.value[item.encode.y[0]]
						let valueStr = `<span style="display:inline-block;margin-left:20px;font-weight: bold">${value}</span>`
						return `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
									<span>${str}${seriesNameStr}</span>
									<span>${valueStr}</span>
								</span>`
					})
					.join(``)
			)
		},
	},
	xAxis: { type: 'category' },
	yAxis: {
		type: 'value',
		axisLabel: {
			formatter: '{value} 元',
		},
	},
	series: [
		{ type: 'bar', datasetIndex: 0, barWidth: 19 },
		{ type: 'bar', datasetIndex: 0, barWidth: 19 },
		{ type: 'bar', datasetIndex: 0, barWidth: 19 },
		{ type: 'bar', datasetIndex: 0, barWidth: 19 },
		{ type: 'line', datasetIndex: 1, smooth: true },
		{ type: 'line', datasetIndex: 1, smooth: true },
		{ type: 'line', datasetIndex: 1, smooth: true },
		{ type: 'line', datasetIndex: 1, smooth: true },
	],
	dataset: [
		{
			source: [
				[
					'product',
					'柱状图图例1',
					'柱状图图例2',
					'柱状图图例3',
					'柱状图图例4',
				],
				// ['1月', 43.3, 85.8, 93.7, 100],
				// ['2月', 53.1, 63.4, 55.1, 60],
				// ['3月', 69.1, 73.4, 65.1, 80],
				// ['4月', 83.1, 93.2, 85.5, 90],
				// ['5月', 43.3, 85.8, 93.7, 100],
				// ['6月', 53.1, 63.4, 55.1, 60],
				// ['7月', 69.1, 73.4, 65.1, 80],
				// ['8月', 83.1, 93.2, 85.5, 90],
			],
		},
		{
			source: [
				[
					'product',
					'折线图图例1',
					'折线图图例2',
					'折线图图例3',
					'折线图图例4',
				],
				// ['1月', 43.3, 85.8, 93.7, 100],
				// ['2月', 53.1, 63.4, 55.1, 60],
				// ['3月', 69.1, 73.4, 65.1, 80],
				// ['4月', 83.1, 93.2, 85.5, 90],
				// ['5月', 43.3, 85.8, 93.7, 100],
				// ['6月', 53.1, 63.4, 55.1, 60],
				// ['7月', 69.1, 73.4, 65.1, 80],
				// ['8月', 83.1, 93.2, 85.5, 90],
			],
		},
	],
},

2. 自定义悬浮框内容

在这里插入图片描述

tooltip: {
    trigger: 'axis',
    formatter: (params) => {
				var strList = []
				params.map((i, index) => {
					const str = `<div style="color: #666; font-size: 12px;">
							<span style="display: inline-block; width: 120px; margin-left: 20px">加权平均价：${100}</span>
							<span style="display: inline-block; width: 120px; margin-left: 10px">平均价：${110}</span>
						</div>`
					strList.push(i.marker + ' ' + i.seriesName + '：' + i.value + '<br/>' + str)
				})
				return strList.join('')
			}
  },