美文网首页Vue.jsVue.js专区
Vue中使用Echarts图形图表

Vue中使用Echarts图形图表

作者: 可怜的小黑兔 | 来源:发表于2019-07-12 18:11 被阅读86次

前言

在后台管理中难免有数据分析功能,大多都是柱形图、饼状图、折线图等,那我们使用vue创建的后台项目中该如何实现图形图表功能呢?

一、下载Echarts

npm install echarts

二、引入Echarts

1、全局引入
  • main.js
// main.js
import echarts from 'echarts'
Vue.prototype.$echarts = echarts;
  • Echarts.vue
<template>
  <div id="myChart"> </div>
</template>

<script>
  export default {
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        // 基于准备好的dom,初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'));
        myChart.setOption({ // 绘制图表
          title: {text: 'Vue中使用Echarts图形图表'},
          tooltip: {},
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }]
        });
      }
    }
  }
</script>

<style scoped>
  #myChart{
    width: 100%;
    height: 300px;
  }
</style>
2、按需引入
  • Echarts.vue
<template>
  <div id="myChart"></div>
</template>

<script>
  let echarts = require('echarts/lib/echarts'); // 引入柱状图组件
  require('echarts/lib/chart/bar');
  // 引入提示框和title组件
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/title');
  export default {
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        // 基于准备好的dom,初始化echarts实例
        let myChart = echarts.init(document.getElementById('myChart'));
        myChart.setOption({ // 绘制图表
          title: {text: 'Vue中使用Echarts图形图表'},
          tooltip: {},
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }]
        });
      }
    }
  }
</script>

<style scoped>
  #myChart{
    width: 100%;
    height: 300px;
  }
</style>

三、效果图

相关文章

网友评论

    本文标题:Vue中使用Echarts图形图表

    本文链接:https://www.haomeiwen.com/subject/ztsykctx.html