node服務端test.js代碼:
var router = require('koa-router')();
// var echart = require('echarts');
router.get('/',async(ctx)=>{
var xAxis = ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"];
var series = [5, 20, 200, 10, 10, 20];
await ctx.render('admin/test/index',{xAxis,series});
})
module.exports = router.routes();
前端頁面index.html代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="{{__ROOT__}}/admin/assets/js/echarts.simple.min.js"></script>
</head>
<body>
echarts Demo!
<!--{{data1}}-->
<div id="main" style="width: 600px;height:400px;"></div>
<input id="xAxis" value="{{@xAxis}}" type="hidden"/>
<input id="series" value="{{@series}}" type="hidden" />
<script type="text/javascript">
// 基於準備好的dom,初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
var datas = document.getElementById('xAxis').value;
var data2 = document.getElementById('series').value;
var xAxis = datas.split(',');
var series = data2.split(',');
// 指定圖表的配置項和數據
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
// data:["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
data:xAxis
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: series
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
效果圖: