echarts - 柱状图常见问题

狂暴草鱼卷

已于 2022-06-09 14:26:56 修改

阅读量1.1k

点赞数 5

分类专栏： # echarts 文章标签： echarts

于 2022-06-08 20:26:25 首次发布

本文链接：https://blog.csdn.net/weixin_47353884/article/details/125180423

版权

echarts 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了ECharts的基本使用，包括引入库、读入数据以及如何制作纵向堆叠柱状图。详细讲解了图例展示、纵轴单位添加、Tooltip的显示设置，如层级处理、百分比计算和数据展示方式。还分享了如何仅显示鼠标位置对应指标数据的技巧，帮助开发者更好地理解和运用ECharts进行数据可视化。

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

一些柱状图的基操

一、echarts是什么？

借助图形化的数段，清晰有效的传递和沟通信息，以视觉的方式展现数据，便于用户的认知，偏于图表的样式，相对于文字说明更加直观

二、使用步骤

1.引入库

代码如下（示例）：

import * as echarts from 'echarts';

2.读入数据

代码如下（示例）：

// height: 400px 这里一定要给画布一个高度
<div id="mainbox" style="height: 400px"></div>
 var myChart = echarts.init(document.getElementById('mainbox'));
myChart.setOption(this.option);

该处可以加入窗口自适应

window.addEventListener('resize', () => {
      myChart.resize();
});

三、如何制作一个纵向堆叠柱状图

1. legend 展示


  icon: 'square'  // 展示图例为正方形
  icon: "circle"  // 展示图例为圆形

2. 纵轴加单位

在这里插入图片描述

yAxis: {
   type: 'value',
   axisLabel: {
      formatter: '￥{value}'
   }
 }

3. 显示tooltip 层级被压

tooltip. confine
是否将 tooltip 框限制在图表的区域内。
当图表外层的 dom 被设置为 ‘overflow: hidden’，或者移动端窄屏，导致 tooltip 超出外界被截断时，此配置比较有用。

tooltip:{
	tooltip: {
          confine: true
      }
}

4. tooltip中如何获取百分比

value += item.value; // 总值
${(100 * parseFloat(item.value) / parseFloat(value)).toFixed(2)}

5. tooltip中如何展示全部数据


 formatter: function (params) {
 	const axisValue = params[0].name; // 日期 x轴
 	const formatStringList = [];
 	let value = 0;
     params.forEach(item => {
       value += item.value;
       formatStringList.push(`
         <div class="childDiv" style="color:${item.color}">
           <span>${item.seriesName}</span>
           <span>${(100 * parseFloat(item.value) / parseFloat(value)).toFixed(2)}%</span>
           <span>￥${item.value}</span>
         </div>
       `);
     });
     return formatStringList.join('\n');
 }

更改样式可以用模板字符串加入class

需要 deep scoped

6. tooltip中如何仅展示鼠标当前位置相应的指标数据

重要属性


 axisPointer: {
     type: 'cross',
     label: {
         formatter: function (params) {
             if (params.seriesData.length === 0) {
                 window.mouseCurValue = params.value;
             }
         }
     }
 },


formatter: function (params) {
	let res = '';
    let sum = 0;
     for (let i = 0; i < params.length; i++) {
         const series = params[i];
         sum += Number(series.data);
         if (sum >= window.mouseCurValue) {
           res = `<span style="color:#101010">${series.seriesName}</span>`;
           return res;
         }
     }
}