1. Create a json file, the path is .. \ public \ data.json
{
"Categories": [ "shirt", "sweater", "chiffon shirt", "pants", "high heels", "socks"],
"data": [5, 20, 36, 10, 10, 20]
}
2. add the following code in webpack.dev.conf.js
const express = require('express')
const app = express()
var appData = require('../src/public/data.json')
var apiRoutes = express.Router()
app.use('/api', apiRoutes)
Next add the following code devServer
before(app) {
app.get('/api/data', (req, res) => {
res.json({
errno: 0,
data: appData
})
})
}
By HTTP: 8080: // localhost / API / Data acquisition Data
Then increased index.vue code as follows:
<template>
<div>
<div id='mainpie' style='width: 600px;height:400px;'></div>
</div>
</template>
<script>
export default {
name: 'index',
data() {
return {};
},
methods: {
drawpie () {
var myChart = this.$echarts.init(document.getElementById('mainpie'));
myChart.setOption({
title: {
text: 'asynchronous data loading exemplary'
},
tooltip: {},
legend: {
data: [ 'sales']
},
xAxis: {
data: []
},
yAxis: {},
series: [
{
name: 'sales'
type: 'bar',
data: []
}
]
});
$.ajax({
type: 'GET',
url: '/api/data',
dataType: 'json',
success: function(data) {
debugger;
myChart.setOption({
xAxis: {
data: data.data.categories
},
series: [
{
name: 'sales'
data: data.data.data
}
]
});
}
});
}
},
mounted() {
this.drawpie();
}
};
</script>
Achieve results is as follows:
