echarts的tooltip展示总量

有的时候需要tooltip展示总量怎么做呢?
下面的代码可以展示x轴当前数据的总和

tooltip: {
          trigger: 'axis',
          axisPointer: {            // Use axis to trigger tooltip
            type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
          },
          formatter(a) {
            let res = '';

            let sum = 0;
            // console.log('a=',a)

            a.forEach((item, index) => {
              if (index === 0) {
                res += `${item.axisValue}<br/>`;
              }
              sum += item.value;
              res += `${item.marker} ${item.seriesName} : ${item.value}<br/>`;
              if (index === a.length - 1) {
                res += `合计 : ${sum}`;
              }
            });
            return res;
          }
        },
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts(Enterprise Charts)是百度开源的一个基于JavaScript的可视化图表库,它提供了丰富的图表类型和交互功能,可以帮助开发者快速构建各种数据可视化的应用。蝴蝶图(Butterfly Chart)是ECharts中的一种特殊类型的图表,它主要用于展示两个相对独立的数据集之间的对比关系。 蝴蝶图通常由两个相互镜像的柱状图组成,其中一个柱状图表示正值数据,另一个柱状图表示负值数据。通过这种方式,可以直观地比较两个数据集之间的差异,并且可以清晰地展示正负值之间的关系。 在ECharts中,使用蝴蝶图可以通过以下步骤实现: 1. 引入ECharts库和相关依赖文件。 2. 创建一个DOM容器,用于显示图表。 3. 初始化ECharts实例,并设置容器和主题。 4. 配置蝴蝶图的数据和样式,包括正负值数据、颜色、标签等。 5. 将配置项应用到ECharts实例中,并渲染出图表。 以下是一个简单的示例代码,展示了如何使用ECharts创建一个蝴蝶图: ```javascript // 引入ECharts库 import echarts from 'echarts'; // 创建DOM容器 const container = document.getElementById('chart-container'); // 初始化ECharts实例 const chart = echarts.init(container); // 配置蝴蝶图的数据和样式 const option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: ['正值', '负值'] }, xAxis: { type: 'category', data: ['数据1', '数据2', '数据3', '数据4', '数据5'] }, yAxis: { type: 'value' }, series: [ { name: '正值', type: 'bar', stack: '总量', label: { show: true, position: 'inside' }, data: [100, 200, 300, 400, 500] }, { name: '负值', type: 'bar', stack: '总量', label: { show: true, position: 'inside' }, data: [-100, -200, -300, -400, -500] } ] }; // 将配置项应用到ECharts实例中 chart.setOption(option); ``` 这是一个简单的蝴蝶图示例,你可以根据自己的需求进行进一步的配置和样式调整。希望对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值