layui引入echarts(例子)

页面容器:
<div id="main" style="width:100%;height:500px;"></div>

引入echarts:
layui.config({
echarts: '/assets/common/module/echarts.js'
});

layui使用echarts:
layui.use(['echarts'], function () {});

ajax调用返回数据及常用的echarts option配置:
$.ajax({
url:url,
dataType: 'json',
}).done(function (res) {
//组装echarts折线图所需要的数据
var data1 = new Array();
var data2 = new Array();
for (var i = 0; i < res.length; i++) {
data1.push(res[i].name);
data2.push(res[i].value);
}
//初始化图表
var myChart = layui.echarts.init(document.getElementById('main'));
//设置图表配置
option = {
title: {
text: '二级分类下载明细'
},
//坐标轴指示器
tooltip: {
trigger: 'axis'
},
legend: {
data: ['下载量']
},
//grid 组件离容器的距离
grid: {
left: 100,
bottom: 100,
//containLabel:true 防止标签溢出
},
xAxis: {
type: 'category',
//splitLine:{show:true},
data: data1,
"axisLabel": {

//显示所有横坐标刻度
interval: 0,

//坐标倾斜
rotate: 30
}
},
yAxis: {
type: 'value',
},
series: [
{
name: '下载量',
//图表类型
type: 'line',
data: data2,
//显示数值
itemStyle: {normal: {label: {show: true}}}
}
]
};
//载入配置
myChart.setOption(option);
});

图表自适应窗口大小:

$('#main').resize(function () {
myChart.resize();
});

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值