layui引入echarts

页面容器:

引入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();
});

你可能感兴趣的:(java)