Echarts——柱状图（各参数详细描述）

最新推荐文章于 2025-04-30 10:40:50 发布

Call_me_small_pure

最新推荐文章于 2025-04-30 10:40:50 发布

阅读量5.2k

点赞数

分类专栏： vue web前端文章标签： Echarts 柱状图描述 vue-js

路漫漫其修远兮，吾将上下而求索～

本文链接：https://blog.youkuaiyun.com/Call_me_small_pure/article/details/79802025

版权

vue 同时被 2 个专栏收录

19 篇文章

订阅专栏

web前端

7 篇文章

订阅专栏

本文介绍使用ECharts实现快递业务中入库数、取件数及退件数的数据可视化方案。图表展示不同快递公司的这些关键指标，并通过最大值、最小值及平均值标记辅助数据分析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

      var echarts = require('echarts');
      var myChart = echarts.init(document.getElementById('item'));
      let option = {
        title : {
        text: (new Date()).getFullYear()+'年度',
      },
      tooltip : {
        trigger: 'axis'
      },
      legend: {
        data:['入库数','取件数','退件数']
      },
      toolbox: {
        show : true,
        feature : {
          mark : {show: true},
          dataView : {show: true, readOnly: false},
          magicType : {show: true, type: ['line', 'bar']},
          restore : {show: true},
          saveAsImage : {show: true}
        }
      },
      calculable : true,
      xAxis : [
        {
          type : 'category',
          data : ['天天快递','申通快递','德邦快递']
         }
      ],
      yAxis : [
        {
          type : 'value'
        }
      ],
      series : [
        {
          name:'入库数',
          type:'bar',
          data:[12，,34,20],
          markPoint : {
            data : [
              {type : 'max', name: '最大值'},
              {type : 'min', name: '最小值'}
            ]
          },
          markLine : {
            data : [
              {type : 'average', name: '平均值'}
            ]
          }
        },
        {
          name:'取件数',
          type:'bar',
          data:[14,11,40],
          markPoint : {
            data : [
              {type : 'max', name: '最大值'},
              {type : 'min', name: '最小值'}
            ]
          },
          markLine : {
            data : [
              {type : 'average', name: '平均值'}
            ]
          }
        },
        {
          name:'退件数',
          type:'bar',
          data:[34,12,8],
          markPoint : {
            data : [
              {type : 'max', name: '最大值'},
              {type : 'min', name: '最小值'}
            ]
          },
          markLine : {
            data : [
              {type : 'average', name: '平均值'}
            ]
          }
        },

      ]};
      myChart.setOption(option);
    }