223 lines
5.2 KiB
PHP
223 lines
5.2 KiB
PHP
<!--空白页面参考模版-->
|
|
{extend name="public/base" /}
|
|
{block name='content'}
|
|
{include file='public/content_header' /}
|
|
<section class="content">
|
|
<div class="row">
|
|
<section class="col-lg-6">
|
|
|
|
<div class="box sortable-widget">
|
|
|
|
<div class="box-body" style="">
|
|
<div id="echarts1" style="min-height: 300px;">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="box sortable-widget">
|
|
|
|
<div class="box-body">
|
|
<div id="echarts2" style="min-height: 300px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="col-lg-6">
|
|
|
|
<div class="box sortable-widget">
|
|
|
|
<div class="box-body" style="">
|
|
<div id="echarts3" style="min-height: 300px;">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="box sortable-widget">
|
|
|
|
<div class="box-body">
|
|
<div id="echarts4" style="min-height: 380px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<script>
|
|
echarts1();
|
|
echarts2();
|
|
echarts3();
|
|
echarts4();
|
|
|
|
function echarts1() {
|
|
let myChart = echarts.init(document.getElementById('echarts1'));
|
|
let option = {
|
|
title: {
|
|
text: '柱状图示例'
|
|
},
|
|
tooltip: {},
|
|
legend: {
|
|
data:['销量']
|
|
},
|
|
xAxis: {
|
|
data: []
|
|
},
|
|
yAxis: {},
|
|
series: [{
|
|
name: '销量',
|
|
type: 'bar',
|
|
data: []
|
|
}]
|
|
};
|
|
myChart.setOption(option);
|
|
|
|
$.post('echarts',{type:1},function (result){
|
|
myChart.setOption({
|
|
xAxis: {
|
|
data: result.data.cate
|
|
},
|
|
series: [{
|
|
// 根据名字对应到相应的系列
|
|
name: '销量',
|
|
data: result.data.data
|
|
}]
|
|
});
|
|
});
|
|
|
|
}
|
|
|
|
|
|
function echarts2()
|
|
{
|
|
|
|
let myChart = echarts.init(document.getElementById('echarts2'));
|
|
let option = {
|
|
title: {
|
|
text: '折线图示例'
|
|
},
|
|
tooltip: {},
|
|
legend: {
|
|
data:['销量']
|
|
},
|
|
xAxis: {
|
|
data: []
|
|
},
|
|
yAxis: {},
|
|
series: [{
|
|
name: '销量',
|
|
type: 'line',
|
|
data: []
|
|
}]
|
|
};
|
|
myChart.setOption(option);
|
|
|
|
$.post('echarts',{type:2},function (result){
|
|
myChart.setOption({
|
|
xAxis: {
|
|
data: result.data.cate
|
|
},
|
|
series: [{
|
|
// 根据名字对应到相应的系列
|
|
name: '销量',
|
|
data: result.data.data
|
|
}]
|
|
});
|
|
});
|
|
}
|
|
|
|
|
|
function echarts3()
|
|
{
|
|
|
|
let myChart = echarts.init(document.getElementById('echarts3'));
|
|
let option = {
|
|
|
|
title: {
|
|
text: '饼图示例',
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
},
|
|
series: [{
|
|
name: '销量',
|
|
type: 'pie',
|
|
data: []
|
|
}]
|
|
};
|
|
myChart.setOption(option);
|
|
|
|
$.post('echarts',{type:3},function (result){
|
|
myChart.setOption({
|
|
|
|
series: [{
|
|
name: '销量',
|
|
data: result.data
|
|
}]
|
|
});
|
|
});
|
|
}
|
|
|
|
function echarts4()
|
|
{
|
|
|
|
let myChart = echarts.init(document.getElementById('echarts4'));
|
|
let option = {
|
|
title: {
|
|
text: '雷达图'
|
|
},
|
|
tooltip: {},
|
|
legend: {
|
|
data: ['销量']
|
|
},
|
|
name: {
|
|
textStyle: {
|
|
color: '#fff',
|
|
backgroundColor: '#999',
|
|
borderRadius: 3,
|
|
padding: [3, 5]
|
|
}
|
|
},
|
|
radar: {
|
|
indicator: [
|
|
{ name: '裤子', max: 10},
|
|
{ name: '鞋子', max: 10},
|
|
{ name: '帽子', max: 10},
|
|
{ name: '袜子', max: 10},
|
|
{ name: '衣服', max: 10}
|
|
]
|
|
},
|
|
series: [{
|
|
type: 'radar',
|
|
data: []
|
|
}]
|
|
};
|
|
myChart.setOption(option);
|
|
|
|
$.post('echarts',{type:4},function (result){
|
|
myChart.setOption({
|
|
|
|
series: [{
|
|
// 根据名字对应到相应的系列
|
|
name: '销量',
|
|
data: result.data,
|
|
}]
|
|
});
|
|
});
|
|
}
|
|
|
|
</script>
|
|
|
|
{/block} |