【layui】ECharts的简单使用

图表类型切换（柱形图和折线图相互切换）

<title>会员数据</title>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">数据统计</a>
        <a><cite>会员数据</cite></a>
    </div>
</div>

<div class="layui-fluid" id="component-tabs">
<div class="layui-row">      
<div class="layui-card">
    <div class="layui-card-header">echart统计数据</div>
    <div class="layui-card-body">
        <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-heapline">
            <div carousel-item id="LAY-index-cust_profile">
                <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
            </div>
        </div>

    </div>
</div>  
</div>
</div>

<script>
layui.use(['admin','form','element','carousel','echarts'], function(){
    var $ = layui.$
        ,admin = layui.admin
        ,form = layui.form
        ,carousel = layui.carousel
        ,echarts = layui.echarts
        ,element = layui.element
        ,device = layui.device();  

    $('.layadmin-carousel').each(function(){
        var othis = $(this);
        carousel.render({
            elem: this
            ,width: '100%',height: 332
            ,arrow: 'none'
            ,interval: othis.data('interval')
            ,autoplay: othis.data('autoplay') === true
            ,trigger: (device.ios || device.android) ? 'click' : 'hover'
            ,anim: othis.data('anim')
        });
    });

    // 客户概括及趋势
    var echheapline = [], heapline = [{
        title: { text: 'echart统计数据', left: 'center', textStyle: { fontSize: 14 } },
        tooltip: { trigger: 'axis', backgroundColor: '#ffffff' }, 
        toolbox: {
            show: true, orient: 'vertical', top: 'center',
            feature: {
                magicType: { // 动态切换的类型
                    show: true,
                    type: ['line', 'bar']
                },
            }
        },
        // grid: { left: '4%', right: '3%' },
        legend: { data:['累积粉丝数','成交客户数'], x:"left" },
        yAxis: [{ type: 'value' }],
        xAxis:[{
            type: 'category', splitLine: { show: false },// x轴的网格隐藏
            data: ['2024-11-01','2024-11-02','2024-11-03','2024-11-04','2024-11-05','2024-11-06',
                   '2024-11-07','2024-11-08','2024-11-09','2024-11-10','2024-11-11','2024-11-12',
                   '2024-11-13','2024-11-14','2024-11-15','2024-11-16','2024-11-17','2024-11-18',
            ],
            axisLabel:{
                interval:0,//横轴信息全部显示
                rotate:-30,//-30度角倾斜显示
            }
        }],
        series: [
            {
                name: '累积粉丝数',
                type: 'line',
                data: [330,0,0,330,329,329,329,331,331,331,331,0,331,331,334,336,337,337]
            },  
            {
                name: '成交客户数',
                type: 'line',
                data:[0,0,0,0,0,0,100,0,10,0,0,0,1,0,211,0,0,0,]
            }
        ]
    }]
    ,elemheapline = $('#LAY-index-cust_profile').children('div')
    ,renderheapline = function(index){
        echheapline[index] = echarts.init(elemheapline[index], layui.echartsTheme);
        echheapline[index].setOption(heapline[index]);
        window.onresize = echheapline[index].resize;
    };
    if(!elemheapline[0]) return;
    renderheapline(0);

});
</script>

实现效果图