当前位置：首页 > news >正文

【layui】echart的简单使用

news 2025/7/5 2:19:18

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

<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>