支持数据标签只显示一个“总计值”

这个效果

只显示一个“总计值”

完整代码

export default {
  name: 'hello',
  data () {
    return {
    }
  },
  mounted(){
    this.labelLine();
  },
  methods: {
    /**
     * label只显示总计
     */
    labelLine(){
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        let option = {
            color:['red','blue','green','yellow','#ccc'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器,坐标轴触发有效
                    type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                },
                textStyle:{
                align:'left',
                },
            },
            legend: {
                data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
                y:'top',
                x:'center',
                show:true
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                splitLine:{show:false},
            grid: {left: '90%',bottom:'35%'},
            },
            yAxis: {
                type: 'value',//category
                splitLine:{show:false}
            },
            series: [
                {
                    name: '直接访问',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'insideRight'
                    },
                    data: [320, 302, 301, 334, 390, 330, 320]
                },
                {
                    name: '邮件营销',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'insideRight'
                    },
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '联盟广告',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'insideRight'
                    },
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '视频广告',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'insideRight'
                    },
                    data: [150, 212, 201, 154, 190, 330, 410]
                },
                {
                    name: '搜索引擎',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'insideRight'
                    },
                    data: [820, 832, 901, 934, 1290, 1330, 1320]
                }
            ]
        }
        //将最后一类的label用formatter函数处理为总和。
        let series = option["series"];
        let showTotalNumber = function(params) {
            let datavalue = 0;
            for (let i = 0; i < series.length; i++) {
                datavalue += series[i].data[params.dataIndex]
            }
            return datavalue;
        }
        if(series[series.length - 1]){
          series[series.length - 1]["label"]["formatter"] = showTotalNumber ;  
        }
        myChart.setOption(option);
        /**
         *图例显示隐藏时求和改变,没开启的可以忽略下面代码
         */
        myChart.on("legendselectchanged", function(obj) {  // 监听图例发生改变
            let b = obj.selected,
            d = [];
            for (let  key in b) {
                if (b[key]) {
                    for (let i = 0, l = series.length; i < l; i++) {
                        let changename = series[i]["name"];
                        if (changename == key) {
                            d.push(i);
                        }
                    }
                }
            }
            let fun = function(params) {
            let datavalue = 0;
            for (let i = 0; i < d.length; i++) {
                for (let j = 0; j < series.length; j++) {
                    if (d[i] == j) {
                        datavalue += series[j].data[params.dataIndex]
                    }
                }
            }
            return datavalue
        }
        for (let i = 0; i < series.length; i++) {
            series[i]["label"]["show"] = false;
        }
        for (let i = series.length - 1; i >= 0; i--) {
            let name = series[i]["name"];
            if (obj["selected"][name]) {
                series[i]["label"]["formatter"] = fun
                series[i]["label"]["show"] = true
                break;
            }
        }
        myChart.setOption(option);
    })
    }
  }
}

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1.语文课上,老师:“小明请你把‘如果每一滴水都能代表一个祝福,那我送你一片海洋’做一个仿句练习!” 小明:“如果...
    赵家大少i阅读 1,085评论 5 39
  • 与简书相伴已快三年之久,从2016到2019,从十六到十九。看着简书一步步的完善强大,有一种欣慰之情油然而生,很...
    Super霏微阅读 447评论 2 2
  • 六月践行情况: 1.早睡/早起:22点至23点间睡觉;早5点至5点半间起床,生物钟形成。下一步是践行精力管理课的起...
    向死而生520袁红阅读 309评论 0 0
  • 没有人生而坚强,所谓的坚强不过是在不断的挫折打击之后,心越来越强大而已,苏东坡就是如此。 苏东坡的一生既精彩绝伦又...
    宁静996阅读 324评论 4 6

友情链接更多精彩内容