zoukankan      html  css  js  c++  java
  • Echarts图表使用

    https://echarts.apache.org/examples/zh/editor.html?c=bar-stack

    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器,坐标轴触发有效
                type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
            }
        },
        legend: {
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '时间',
                position: 'left',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#EE6666'
                    }
                }
                
            }
            
        ],
        series: [
           
            {
                name: '邮件营销',
                type: 'bar',
                stack: '广告',
                barWidth: 20,
                emphasis: {
                    focus: 'series'
                },
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '联盟广告',
                type: 'bar',
                stack: '广告',
                emphasis: {
                    focus: 'series'
                },
                data: [220, 182, 191, 234, 290, 330, 310],
                markLine: {
                    symbol: 'none',
                    silent: true,
                    label: {
                        show: true,    
                        normal: {
                            formatter: '平均值: 100',//{c}
                            
                        },       
                        position: 'end',
                        
                    },
                data: [{
                      type: 'average',  // type 类型, 可以是最大值max, 最小值min, 平均值
                      name: '平均值',
                      
                }],
                }
            },
            {
                name: '视频广告',
                type: 'bar',
                stack: '广告',
                emphasis: {
                    focus: 'series'
                },
                data: [150, 232, 201, 154, 190, 330, 410]
            },
          
        ]
    };
    View Code
  • 相关阅读:
    poj2387Til the Cows Come Home(dijkstra)
    poj2349Arctic Network
    poj1789Truck History
    zoj1586QS Network
    poj2421Constructing Roads
    poj2301Building a Space Station(最小生成树)
    poj1287Networking(最小生成树)
    myeclipse配置svn亲测
    MyEclipse8.6安装svn(非link方式)
    myeclipse一些技巧
  • 原文地址:https://www.cnblogs.com/li-sir/p/14704612.html
Copyright © 2011-2022 走看看