Echarts柱形图配置 - 实际项目开发使用

最新推荐文章于 2024-05-08 14:29:47 发布

BelieveTom、

最新推荐文章于 2024-05-08 14:29:47 发布

阅读量69

点赞数

分类专栏： Echarts 文章标签： echarts 前端

本文链接：https://blog.csdn.net/m0_52510500/article/details/131128193

版权

Echarts 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

实现效果：

话不多说，直接上代码

option = {
  title: { // 标题数据
          text: '货运通道 14天访客信息统计',
          textStyle: {
            fontWeight: 400,
            fontSize: '16px'
          }
        },
  legend: {
          icon: 'rect',
          top: '30px',
          right: 0,
          itemHeight: 4,
          itemWidth: 32,
          textStyle: {  // 图列内容样式
            color: '#808080',  // 字体颜色
            fontSize: '16px'
          }
        },
  tooltip: { // 提示框
          trigger: 'item',
          position: "top",
          extraCssText: 'padding: 2px 10px 0;',
          formatter: function (params) {
            return `<div>${params.data}</div>`
          }
        },

  xAxis: { // 横轴数据
          type: 'category',
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              show: true,
              color: "#B3B3B3",
              fontSize: '14',
            },
          },
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
  yAxis: { // 纵轴数据
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          axisLabel: {
            textStyle: {
              show: true,
              color: "#B3B3B3",
              fontSize: '14',
            },
          },
        },
  series: [ // 图表数据
          {
            name: '车辆',
            type: 'bar',
            legendHoverLink: true,
            itemStyle: {
              color: '#2D8CF0',
              barBorderRadius: [4, 4, 0, 0]
            },
            barWidth: 30,
            barCategoryGap: '20%',
            data: [80,90,120,60,98,50,88]
          },
          {
            name: '人数',
            type: 'bar',
            legendHoverLink: true,
            itemStyle: {
              color: '#7A71E8',
              barBorderRadius: [4, 4, 0, 0]
            },
            barWidth: 30,
            barCategoryGap: '20%',
            data: [92,102,78,34,89,102,36]
          },
        ]
};