|
|
|
|
@ -263,10 +263,79 @@
|
|
|
|
|
<script src="/plugins/echarts/echarts.min.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
function initPieChart () {
|
|
|
|
|
var datas = [
|
|
|
|
|
////////////////////////////////////////
|
|
|
|
|
[
|
|
|
|
|
{ name: '圣彼得堡来客', value: 5.6 },
|
|
|
|
|
{ name: '陀思妥耶夫斯基全集', value: 1 },
|
|
|
|
|
{ name: '史记精注全译（全6册）', value: 0.8 },
|
|
|
|
|
{ name: '加德纳艺术通史', value: 0.5 },
|
|
|
|
|
{ name: '表象与本质', value: 0.5 },
|
|
|
|
|
{ name: '其它', value: 3.8 }
|
|
|
|
|
],
|
|
|
|
|
// ////////////////////////////////////////
|
|
|
|
|
[
|
|
|
|
|
{ name: '银河帝国5：迈向基地', value: 3.8 },
|
|
|
|
|
{ name: '俞军产品方法论', value: 2.3 },
|
|
|
|
|
{ name: '艺术的逃难', value: 2.2 },
|
|
|
|
|
{ name: '第一次世界大战回忆录（全五卷）', value: 1.3 },
|
|
|
|
|
{ name: 'Scrum 精髓', value: 1.2 },
|
|
|
|
|
{ name: '其它', value: 5.7 }
|
|
|
|
|
],
|
|
|
|
|
////////////////////////////////////////
|
|
|
|
|
[
|
|
|
|
|
{ name: '克莱因壶', value: 3.5 },
|
|
|
|
|
{ name: '投资最重要的事', value: 2.8 },
|
|
|
|
|
{ name: '简读中国史', value: 1.7 },
|
|
|
|
|
{ name: '你当像鸟飞往你的山', value: 1.4 },
|
|
|
|
|
{ name: '表象与本质', value: 0.5 },
|
|
|
|
|
{ name: '其它', value: 3.8 }
|
|
|
|
|
]
|
|
|
|
|
];
|
|
|
|
|
var pieChart = echarts.init(document.querySelector("#pie-chart"));
|
|
|
|
|
var option = {
|
|
|
|
|
title: {
|
|
|
|
|
text: 'ECharts 入门示例'
|
|
|
|
|
text: '阅读书籍分布',
|
|
|
|
|
left: 'center',
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#999',
|
|
|
|
|
fontWeight: 'normal',
|
|
|
|
|
fontSize: 14
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
series: datas.map(function (data, idx) {
|
|
|
|
|
var top = idx * 33.3;
|
|
|
|
|
return {
|
|
|
|
|
type: 'pie',
|
|
|
|
|
radius: [20, 60],
|
|
|
|
|
top: top + '%',
|
|
|
|
|
height: '33.33%',
|
|
|
|
|
left: 'center',
|
|
|
|
|
width: 400,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
borderColor: '#fff',
|
|
|
|
|
borderWidth: 1
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: 'center',
|
|
|
|
|
formatter: '{d}',
|
|
|
|
|
fontSize: 20,
|
|
|
|
|
fontWeight: 'bold'
|
|
|
|
|
},
|
|
|
|
|
data: data
|
|
|
|
|
};
|
|
|
|
|
})
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
|
|
pieChart.setOption(option);
|
|
|
|
|
}
|
|
|
|
|
function initBarChart () {
|
|
|
|
|
var barChart = echarts.init(document.querySelector("#bar-chart"));
|
|
|
|
|
var option = {
|
|
|
|
|
title: {
|
|
|
|
|
text: '销售额趋势'
|
|
|
|
|
},
|
|
|
|
|
tooltip: {},
|
|
|
|
|
legend: {
|
|
|
|
|
@ -283,13 +352,12 @@
|
|
|
|
|
data: [5, 20, 36, 10, 10, 20]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
|
|
pieChart.setOption(option);
|
|
|
|
|
}
|
|
|
|
|
barChart.setOption(option)
|
|
|
|
|
}
|
|
|
|
|
(function () {
|
|
|
|
|
initPieChart()
|
|
|
|
|
initBarChart()
|
|
|
|
|
})()
|
|
|
|
|
</script>
|
|
|
|
|
@endpush
|
|
|
|
|
|
