单页面中使用vue和iview、echarts，引用组件

index.html文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>单页面应用</title>
    <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/http-vue-loader"></script>
    <script src="//unpkg.com/iview/dist/iview.min.js"></script>
    <script src="js/echarts.js"></script>
</head>
<body>
<div id="app">
    <headers></headers>
    <hr/>
    <echarts></echarts>
</div>
<script>
    // 使用httpVueLoader
    Vue.use(httpVueLoader);
    new Vue({
        el: '#app',
        data: {
           
        },
        components:{
            "headers":"url:./components/headers.vue",
            "echarts":"url:./components/echarts.vue"
        },
        methods: {
            
        },
        mounted() {
        }
    })
</script>
<style>
    html,body,#app{
        width: 100%;
        height: 100%;
        background-color:#f5f5f5;
    }
</style>
</body>
</html>

headers.vue

<template>
  <div>
        <i-button>Default</i-button>
        <i-button type="primary">Primary</i-button>
        <i-button type="dashed">Dashed</i-button>
        <i-button type="text">Text</i-button>
        <br><br>
        <i-button type="info">信息按钮</i-button>
        <i-button type="success">成功按钮</i-button>
        <i-button type="warning">警告按钮</i-button>
        <i-button type="error">错误按钮</i-button>
        <i-button>Click me!</i-button>
  </div>
</template>

<script>
module.exports =  {

}
</script>

<style>

</style>

echarts.vue

<template>
  <div>
    <div style="width:500px;height:500px" ref="chart"></div>
  </div>
</template>
<script>
  const echarts = require('echarts');
  module.exports = {
    data () {
      return {};
    },
    methods: {
      initCharts () {
        let myChart = echarts.init(this.$refs.chart);
        // 绘制图表
        myChart.setOption({
            title: { text: '在Vue中使用echarts' },
            tooltip: {},
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
      }
    },
    mounted () {
      this.initCharts();
    }
  }
</script>

echarts.js

echarts官网下个echarts.js即可

posted @ 2021-11-24 14:11  紫幽蓝露  阅读(311)  评论(0)    收藏  举报