thinkphp5整合echarts实现图表数据
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style=""></div>
<script type="text/javascript">
//var myChart = echarts.init(document.getElementById('main'), 'light');
var myChart = echarts.init(document.getElementById('main'), 'dark');/**灰色背景**/
// 显示标题，图例和空的坐标轴
myChart.setOption({
title: {
text: '一周数据图表',
left: 'center',
textStyle:{
fontSize:28,
color:"#90EC7D",
}
},
tooltip: {
trigger: 'axis',
textStyle: { //折线字体大小
"fontSize": 18
}
},
legend: {
left: 'left',
data:['数据'],
textStyle: {
color:'#FF00FF',
fontSize: '16'
}
},
grid: {
left: '3%',
right: '5%',
bottom: '5%',
containLabel: true
},
xAxis: {
name: '日期',
nameTextStyle: { /***坐标轴标题样式设置***/
color: ['#FF00FF'],
fontSize:'16'
},
axisLabel: { //坐标轴文本标签
rotate: -30,
interval: 0,
textStyle: {
color: '#90EC7D',
/*align: 'left',align: 'right',*/
fontSize:'16'
}
},
/***坐标轴样式设置***/
axisLine: {
lineStyle: {
type: 'solid',
color: 'orange',//左边线的颜色
width:'2',//坐标线的宽度
}
},
data: []
},
yAxis: {
name: '数值',
nameTextStyle: { /***坐标轴标题样式设置***/
color: ['#0087ED'],
fontSize:'16'
},
axisLabel: { //坐标轴文本标签
rotate: 30,
interval: 0,
textStyle: {
color: '#FF00FF',
/*align: 'left',align: 'right',*/
fontSize:'16'
}
},
/***坐标轴样式设置***/
axisLine: {
lineStyle: {
type: 'solid',
color: 'orange',//左边线的颜色
width:'2',//坐标线的宽度
}
},
},
series: [{
name: '数据', /**和legend保持一致**/
type: 'line',
//symbol: 'circle', //设定为实心点
symbolSize:10,//拐点大小
label: { /**折线拐点显示数据**/
normal: {
show: true,
color:'#FF00FF',
fontWeight:'bold',
fontSize:'18'
}
},
itemStyle : { /**折线样式设置**/
normal : {
color:'#00FF00', //折线圈圈的颜色
lineStyle:{
width:2,//折线宽度
color:"#FF3399"//折线颜色
}
}
},
data: []
}]
});
// 异步加载数据
$.post('{:url('hk666/echarts')}').done(function (res) {
var data = $.parseJSON(res);
// 填入数据
myChart.setOption({
xAxis: {
data: data.xdata
},
series: [{
data: data.ydata
}]
});
});
</script>
