zoukankan      html  css  js  c++  java
  • echarts_部分图表配置_堆叠折线图

    echarts基本图表使用:

    1.获取包裹元素(var myChart = echarts.init(document.getElementById(‘thisId’));)2.设置option(option={...})3.使用设置好的option显示图表(myChart.setOption(option);)

    废话不多讲上图:

    function ZX_bottom (thisId,titleName){
        var myChart = echarts.init(document.getElementById(thisId));
        
        option = {
                tooltip : {
                    trigger: 'axis',
                    /*show:false,//添加鼠标浮动窗口就消失了*/
                    axisPointer: {
                        
                        type: 'line',//指示器类型。  cross' 十字准星指示器 其他选项 line  shadow
                        label: {
                            backgroundColor: 'rgba(255, 255, 255, .5)'//XY轴显示的小方块
                        },
                        crossStyle: {//线的颜色 axisPointer.type 为 'cross' 时有效。
                            color: '#fff'
                        }
                    }
                },
                backgroundColor : 'rgba(43, 62, 75, .5)',//背景颜色
                toolbox: {//工具栏
                    show: false//是否显示工具栏组件
                },
                legend: {
                    data:['营销流量','自然流量'],
                    textStyle : {
                        color : '#FFF',
                        fontSize: 15
                    }
                },
                grid : {
                    left : '2%',
                    right : '7%',
                    bottom : '3%',
                    containLabel : true,
                    
                },
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,//x轴两侧留白策略
                        axisLabel : {
                            show : true,
                            textStyle : {
                                color : '#FFF',
                                fontSize: 15
                            }
                        },
                        splitLine : {//去掉网格线
                            show : false
                        },
                        axisLine : {
                            lineStyle : {
                                color : '#FFF',
                                fontSize: 15
                            }
                        },
                        axisTick : {
                            lineStyle : {
                                color : '#FFF',
                                fontSize: 15
                            }
                        },
                        data : ['周一','周二','周三','周四','周五','周六','周日'],
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLabel : {
                            show : true,
                            textStyle : {
                                color : '#FFF',
                                fontSize: 15
                            }
                        },
                        splitLine : {//去掉网格线
                            show : false
                        },
                        axisLine : {
                            lineStyle : {
                                color : '#FFF',
                                fontSize: 15
                            }
                        },
                        axisTick : {
                            lineStyle : {
                                color : '#FFF',
                                fontSize: 15
                            }
                        }
                    }
                ],
                series : [
                            
                            {
                                name:'自然流量',
                                type:'line',
                                stack: '总量',
                                areaStyle: {normal: {}},
                                color:['#ff907f'],//对应上面data的背景色
                                data:[220, 182, 191, 234, 290, 330, 310]
                            },{
                                name:'营销流量',
                                type:'line',
                                stack: '总量',
                                areaStyle: {normal: {}},
                                color:['#52d2dd'],//对应上面data的背景色
                                data:[120, 132, 101, 134, 90, 230, 210]
                            }
                        ]
            };
        myChart.setOption(option);
    }
  • 相关阅读:
    win7下的vxworks总结
    ubuntu 无法获得锁 /var/lib/dpkg/lock
    项目中用到了的一些批处理文件
    win7下安装 WINDRIVER.TORNADO.V2.2.FOR.ARM
    使用opencv统计视频库的总时长
    January 05th, 2018 Week 01st Friday
    January 04th, 2018 Week 01st Thursday
    January 03rd, 2018 Week 01st Wednesday
    January 02nd, 2018 Week 01st Tuesday
    January 01st, 2018 Week 01st Monday
  • 原文地址:https://www.cnblogs.com/cy3664983/p/7280308.html
Copyright © 2011-2022 走看看