码迷,mamicode.com
首页 > 其他好文 > 详细

Echarts图表使用

时间:2021-04-28 11:42:45      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:pre   view   访问   直线   lap   grid   rgba   邮件营销   div   

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

 

Echarts图表使用

标签:pre   view   访问   直线   lap   grid   rgba   邮件营销   div   

原文地址:https://www.cnblogs.com/li-sir/p/14704612.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!