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

实现效果：

 话不多说，直接上代码

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]
          },
        ]
};