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
  • 相关阅读:
    Spring温故而知新 – bean的装配
    Lambda表达式和表达式树
    委托的内部机制
    委托(C#)
    linux wdcp安装
    linux各个文件夹作用
    linux基本命令
    python调用html内的js方法
    Win10在右键菜单添加“在此处打开命令窗口”设置项
    python read文件的r和rb的区别
  • 原文地址:https://www.cnblogs.com/li-sir/p/14704612.html
Copyright © 2011-2022 走看看