vue项目使用echars的两种方法

vue项目使用echars的两种方法

一、直接引入echarts

1.使用命令行安装echars

npm install echarts --save

2.main.js中引入

import myCharts from './comm/js/myCharts.js'
Vue.use(myCharts)

3.Echarts.vue中

<template>
    <div id="myChart" :style="{width: '300px', height: '300px'}"></div>
</template>
<script>
    export default {
      name: 'hello',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      },
      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>

二、使用vue-echarts

1.先npm安装vue-echarts

npm install echarts vue-echarts

2.main.js中全局引入

import ECharts from "vue-echarts";
import "echarts/lib/chart/line";
Vue.component("chart", ECharts);

3.Echars.vue

<template>
    <chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart>
</template>
<script>
    export default {
        data(){
            orgOptions: {}
        },
       mounted() {
            this.orgOptions = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true
            }]
        }   
    }
</script>