echarts5 柱形图自定义 tooltip

最新推荐文章于 2024-03-11 18:42:20 发布

Silent_Night

最新推荐文章于 2024-03-11 18:42:20 发布

阅读量1.2k

点赞数

分类专栏： web前端文章标签： javascript 前端

本文链接：https://blog.csdn.net/Silent_Night/article/details/126035148

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

var option = {
        title: {
          text: '各部门访问页面前三',
          left: '5%',
          textStyle: {
            color: '#676a6c',
            fontSize: 16,
            with: 100,
            height: 35,
            lineHeight: 35
          }
        },
        legend: {
          bottom: '5%'
        },
        tooltip: {
          formatter: function (params) {
            return params.name + "<br/>部门：" +params.data.code + "<br/>访问量：" + params.data.value;
          }
        },
        xAxis: {
          type: 'category',
          data: ['首页', '宣传素材', '资质认证']
        },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            name: '第一名',
            type: 'bar',
            data: [{
              "value":93.7,
              "code":"部门3"
            },{
              "value":85.8,
              "code":"部门二"
            },{
              "value":43.3,
              "code":"部门一"
            }]
          },
          {
            name: '第二名',
            type: 'bar',
            data: [{
              "value":86.4,
              "code":"部门1"
            },{
              "value":82.5,
              "code":"部门5"
            },{
              "value":65.2,
              "code":"部门2"
            }]
          },
          {
            name: '第三名',
            type: 'bar',
            data: [{
              "value":72.4,
              "code":"部门2"
            },{
              "value":53.9,
              "code":"部门5"
            },{
              "value":39.1,
              "code":"部门1"
            }]
          }
        ]
      };

      this.chartBarOrder = echarts.init(document.getElementById('chartBarOrderBox'));
      this.chartBarOrder.setOption(option);