zoukankan      html  css  js  c++  java
  • echarts 柱状堆叠图 通过stack属性控制

    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        legend: {
            data: ['百度', '谷歌', '折线'],
            icon:"react",  // 设置legend的图标样式
            top:"bottom",  // 设置legend的位置
            itemGap:40  // 设置legend之间的间距
            
        },
        xAxis: [
            {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                axisPointer: { //设置指示器类型
                    type: 'shadow'
                },
                axisTick:{show:false},
                axisLine:{
                    lineStyle:{
                        2
                    }
                },
            }
        ],
        yAxis: [
            {
                type: 'value',
                min: 0,
                max:350,
                interval: 50,
                axisLine:{   // 是否显示轴线
                    show:false,
                },
                axisTick:{ // 是否显示刻度
                    show:false
                },
               
            },
            {
                type: 'value',
                min: 0,
                max: 0.35,
                interval: 0.05,
                axisLabel: {
                    formatter: '{value}%'
                },
                axisLine:{
                    show:false
                },
                axisTick:{
                    show:false
                }
            }
        ],
        series: [
            {
                name: '百度',
                type: 'bar',
                stack:"总量",  // 数据堆叠,必须添加相同的stack属性
                data: [50, 60, 40, 50, 80, 120, 135, 200, 300, 180, 320, 200],
                itemStyle:{
                    color:"#277eab"
                }
                
            },
            {
                name: '谷歌',
                type: 'bar',
                stack:"总量",
                data: [30, 20, 9, 26, 28, 70, 175, 90, 48, 18, 6, 30],
                itemStyle:{
                    color:"#8bb4fb"
                }
            },
            {
                name: '折线',
                type: 'line',
                smooth:true,
                symbol: 'circle',     //设定为实心点
                symbolSize: 10,   //设定实心点的大小
                data: [50, 120, 80, 120, 150, 200, 180, 300, 340, 300, 260,240],
               
            }
        ]
    };
  • 相关阅读:
    Javascript的一些小知识点
    Peterson和多线程版本号
    java 数据流DataOutputStream和DataInputstream
    Domino 怎样整Hibernate最佳实践
    学生管理系统
    最小生成树Kruskal算法的提出者Joseph Bernard Kruskal,Jr.
    创建一个Low-touch Silverlight 集成
    LeetCode OJ
    00106_UDP通信
    雷林鹏分享:jQuery EasyUI 树形菜单
  • 原文地址:https://www.cnblogs.com/yunyin/p/13889341.html
Copyright © 2011-2022 走看看