Echarts自定义提示框内容,每个堆叠柱状显示不同的内容

tooltip: {
   formatter: function (params) {
    //x轴的名称
  	var htmlStr = params.name + '<br/>';
   		htmlStr += '<div>';
           //为了保证和原来的效果一样,复制的是:param.marker的源码,圆点样式:param.color
       	htmlStr += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + params.color + ';"></span>';
       //圆点后面显示的名称
       	htmlStr += params.seriesName + ':' + params.value;
       	htmlStr += '</div>';
    return htmlStr;
  }
}

在这里插入图片描述

echarts自定义柱状图每个柱子数据类型不同,需要在数据源中为不同柱子指定不同的数据类型,例如字符串、数字或日期等。 首先,可以使用数组或对象作为数据源。对于每个柱子,可以为其指定一个对象,包含柱子的值和类型。例如: ``` // 数组作为数据源 var data = [ { value: 20, type: '数字' }, { value: '高峰期', type: '字符串' }, { value: new Date('2021-10-01'), type: '日期' } ]; // 对象作为数据源 var data = { '柱子1': { value: 20, type: '数字' }, '柱子2': { value: '高峰期', type: '字符串' }, '柱子3': { value: new Date('2021-10-01'), type: '日期' } }; ``` 然后,在echarts中配置柱状图时,可以根据每个柱子的类型来设置不同的格式化方式。例如: ``` option = { xAxis: { type: 'category', data: ['柱子1', '柱子2', '柱子3'] }, yAxis: { type: 'value' }, series: [{ type: 'bar', data: data.map(function(item) { return item.value; }), label: { show: true, formatter: function(params) { var dataIndex = params.dataIndex; var itemType = data[dataIndex].type; var itemValue = params.value; if (itemType === '日期') { return itemValue.getFullYear() + '/' + (itemValue.getMonth()+1) + '/' + itemValue.getDate(); } else { return itemValue; } } } }] }; ``` 在以上示例中,针对不同的类型,通过自定义label的formatter来格式化柱子上的标签。对于日期类型的柱子,使用getFullYear()、getMonth()+1和getDate()分别获取年、月、日并拼接成字符串;对于数字或字符串类型,直接返回其值。 通过上述方法,可以轻松实现echarts自定义柱状图每个柱子数据类型不同的效果。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值