zoukankan      html  css  js  c++  java
  • echarts堆叠图计算总数和各部分

    app.title = '堆叠条形图';
    
    option = {
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
            }
        },
        legend: {
            data: ['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎']
        },
         toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: {readOnly: false},
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    }
                },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis:  {
           
            type: 'category',
            data: ['周一','周二','周三','周四','周五','周六','周日']
        },
        yAxis: {
             type: 'value'
        },
        series: [
            {
                name: '直接访问',
                type: 'bar',
                stack: '总量',
                smooth: true,
                label: {
                      normal: {
                          show: true,
                          position: 'insideTop',
                          formatter: function(v) {
                            return v.value || ""
                          }
                      }
                  },
                 
                data: [302, 302, 301, 334, 390, 330, 320]
            },
            {
                name: '邮件营销',
                type: 'bar',
                stack: '总量',
                  smooth: true,
                label: {
                      normal: {
                          show: true,
                          position: 'insideTop',
                          formatter: function(v) {
                            return v.value || ""
                          }
                      }
                  },
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '联盟广告',
                type: 'bar',
                stack: '总量',
                  smooth: true,
                label: {
                      normal: {
                          show: true,
                          position: 'insideTop',
                          formatter: function(v) {
                            return v.value || ""
                          }
                      }
                  },
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: '视频广告',
                type: 'bar',
                stack: '总量',
                  smooth: true,
                label: {
                      normal: {
                          show: true,
                          position: 'insideTop',
                          formatter: function(v) {
                            return v.value || ""
                          }
                      }
                  },
                data: [150, 212, 201, 154, 190, 330, 410]
            },
            {
                name: '搜索引擎',
                type: 'bar',
                stack: '总量',
                  smooth: true,
                label: {
                      normal: {
                          show: true,
                          position: 'insideTop',
                          formatter: function(v) {
                            return v.value || ""
                          }
                      }
                  },
                data: [820, 832, 901, 934, 1290, 1330, 1320]
            },
            {
                name: '总计',
                type: 'bar',
                stack: '总计',
                barGap: '-100%',
                  smooth: true,
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        textStyle: { color: '#000' },
                        formatter: function(v) {
                            return "总计:" + (v.value)
                        }
                    }
                },
                itemStyle: { 
                    normal: { 
                        color: 'rgba(128, 128, 128, 0)',
                        borderWidth: 1,
                        borderColor: '#1FBCD2'
                    } 
                },
                data: [1600,1600,1600,1600,1600,2600]
            }
        ]
    };
    

      

    源代码直接带走

  • 相关阅读:
    CSU L: 就多了两分钟
    CSU 1112【机器人的指令】模拟
    P3388 【模板】割点(割顶)
    go 学习 2
    go 学习 1
    netconf协议
    lua 学习 5
    lua 学习 4
    lua 学习 3
    lua 学习 2
  • 原文地址:https://www.cnblogs.com/xuwupiaomiao/p/11935548.html
Copyright © 2011-2022 走看看