最近做个专项，需要做结果展示，又不想再搭建个复杂工程，今天尝试了单文件的vue，基本做出来了。
效果图
参考文档
1.自己写的v-charts文档：https://www.cnblogs.com/dannyyao/p/10728210.html
2.vue官方文档：https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html#declaring-methods
3.element官方文档：https://element.eleme.cn/#/zh-CN/component/installation
4.axios使用文档：http://axios-js.com/zh-cn/docs/vue-axios.html
源码
<!DOCTYPE html>
<html lang="en">
<head>
<title>v-charts</title>
</head>
<body>
<div id="app">
<el-row>
<el-col :span="8">
<ve-line :data="chartData" :title="{text:'APP登录(Driver)', y:'bottom', x:'center'}" ></ve-line>
</el-col>
<el-col :span="8">
<ve-line :data="chartData" :title="{text:'APP登录(SP)', y:'bottom', x:'center'}"></ve-line>
</el-col>
<el-col :span="8">
<ve-line :data="chartData" :title="{text:'APP登录(Ops)', y:'bottom', x:'center'}"></ve-line>
</el-col>
</el-row>
<hr/>
<el-row>
<el-col :span="8">
<ve-line :data="chartData" :title="{text:'API登录(Driver)', y:'bottom', x:'center'}" ></ve-line>
</el-col>
<el-col :span="8">
<ve-line :data="chartData" :title="{text:'API登录(SP)', y:'bottom', x:'center'}"></ve-line>
</el-col>
<el-col :span="8">
<ve-line :data="chartData" :title="{text:'API登录(Ops)', y:'bottom', x:'center'}"></ve-line>
</el-col>
</el-row>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return {
chartData: {
columns: ['日期', 'ID', 'MY', 'TH', 'PH', 'SG', 'VN', 'TW', 'BR'],
rows: [
{ '日期': '1月1日', 'ID': 123, 'MY': 100, 'TH': 80},
{ '日期': '1月2日', 'ID': 1223, 'MY': 1000, 'TH': 800 },
{ '日期': '1月3日', 'ID': 2123, 'MY': 2000, 'TH': 1800 },
{ '日期': '1月4日', 'ID': 4123, 'MY': 3000, 'TH': 3500 },
{ '日期': '1月5日', 'ID': 3123, 'MY': 2000, 'TH': 3000 },
{ '日期': '1月6日', 'ID': 7123, 'MY': 6000, 'TH': 6100 }
]
},
title:{
text: '个人资产',
textStyle: {color:'darkgray'}
}
}
},
methods: {
test(){
axios.get('/get_report_detail?plan_id=24')
.then(function (response) {
console.log(response.data.data)
})
.catch(function (error) {
alert(error);
});
}
},
mounted(){
this.test()
}
})
</script>
</body>
</html>