参考：Echarts官网、Vue项目中使用Echarts展示图表数据、Vue 爬坑之路（八）—— 使用 Echarts 创建图表

1. 安装echarts依赖

cnpm install echarts --save-dev

2. 引入echarts依赖并创建图表

由于echarts不能通过Vue.use()进行全局引用，所以可以：在对应vue页面直接引入；或者将echarts存到原型中，然后在vue页面通过 this.$echarts 访问使用。

(1) vue页面直接引入并创建图表

• vue页面直接引入 : import echarts from 'echarts'
• 创建图表：直接通过echarts 访问使用

<template>
    <div>
        <!-- 折线图 -->
        <div id="chartmainline" style="width:600px; height:400px;"></div>
        <!-- 柱状图 -->
        <div id="chartmainbar" style="width:600px; height:400px;"></div>
    </div>
</template>

export default({
    data(){
        return{
            optionline:{
                title:{
                    text:'总稼动率趋势'
                },
                color: ['#00a9e2'],
                tooltip:{},
                legend:{
                    data:['日期']
                },
                xAxis:{
                    data:['05-16', '05-17', '05-18', '05-19', '05-20', '05-21', '05-22']
                },
                yAxis:{
 
                },
                series:[{
                    name:'稼动率',
                    type:'line', //设置图表主题
                    data:[0.3, 0.5, 0.47, 0.65, 0.2, 0.4, 0.78]
                }]
            },
            optionbar:{
                title:{
                    text:'机器耗能成本'
                },
                color: ['#00a9e2'],
                tooltip:{},
                legend:{
                    data:['班组']
                },
                xAxis:{
                    data:['班组1', '班组2', '班组3', '班组4', '班组5', '班组6', '班组7']
                },
                yAxis:{
 
                },
                series:[{
                    name:'成本',
                    type:'bar', //设置图表主题
                    data:[500, 200, 360, 100, 300, 560, 700]
                }]
            }
        }
    },
    mounted() {
       this.drawLine()
    },
    methods: {
      drawLine: function(){
        //基于准本好的DOM，初始化echarts实例
        let chartmainline = echarts.init(document.getElementById("chartmainline"));
        let chartmainbar = echarts.init(document.getElementById("chartmainbar"));
        //绘制图表
        chartmainline.setOption(this.optionline);
        chartmainbar.setOption(this.optionbar);
      }  
    }
})

(2) 全局引入并创建图表

• 将echarts存到原型中：在main.js中进行全局引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts //将echarts存到 Vue 原型中

• 创建图表：在vue页面通过this.$echarts访问使用

<template>
    <div>
        <!-- 折线图 -->
        <div id="chartmainline" style="width:600px; height:400px;"></div>
        <!-- 柱状图 -->
        <div id="chartmainbar" style="width:600px; height:400px;"></div>
    </div>

export default({
    data(){
        return{
            optionline:{
                title:{
                    text:'总稼动率趋势'
                },
                color: ['#00a9e2'],
                tooltip:{},
                legend:{
                    data:['日期']
                },
                xAxis:{
                    data:['05-16', '05-17', '05-18', '05-19', '05-20', '05-21', '05-22']
                },
                yAxis:{
 
                },
                series:[{
                    name:'稼动率',
                    type:'line', //设置图表主题
                    data:[0.3, 0.5, 0.47, 0.65, 0.2, 0.4, 0.78]
                }]
            },
            optionbar:{
                title:{
                    text:'机器耗能成本'
                },
                color: ['#00a9e2'],
                tooltip:{},
                legend:{
                    data:['班组']
                },
                xAxis:{
                    data:['班组1', '班组2', '班组3', '班组4', '班组5', '班组6', '班组7']
                },
                yAxis:{
 
                },
                series:[{
                    name:'成本',
                    type:'bar', //设置图表主题
                    data:[500, 200, 360, 100, 300, 560, 700]
                }]
            }
        }
    },
    mounted() {
       this.drawLine()
    },
    methods: {
      drawLine: function(){
        //基于准本好的DOM，初始化echarts实例
        let chartmainline = this.$echarts.init(document.getElementById("chartmainline"));
        let chartmainbar = this.$echarts.init(document.getElementById("chartmainbar"));
        //绘制图表
        chartmainline.setOption(this.optionline);
        chartmainbar.setOption(this.optionbar);
      }  
    }
})

3. 效果展示

折线图.png 柱状图.png