单文件报表：vue + element + echarts + axios

最近做个专项，需要做结果展示，又不想再搭建个复杂工程，今天尝试了单文件的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>

posted on 2023-05-13 16:03 蛋尼阅读(94) 评论(0) 编辑收藏举报