Vue项目中使用Echarts展示图表数据

本实例在vue-cli搭建简洁版上框架上操作

安装echarts依赖

cnpm install echarts --save-dev

创建图表

1.全局引入echarts依赖

• main.js

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

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

//axios也不能使用Vue.use()进行全局引用
axios.defaults.baseURL='http://127.0.0.1:3333/';
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'
Vue.prototype.$http = axios;

2.设置图表

• Find.vue

<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:'ECharts 数据统计'
                },
                tooltip:{},
                legend:{
                    data:['用户来源']
                },
                xAxis:{
                    data:["Android","IOS","PC","Ohter"]
                },
                yAxis:{

                },
                series:[{
                    name:'访问量',
                    type:'line', //设置图表主题
                    data:[500,200,360,100]
                }]
            },
            optionbar:{
                title:{
                    text:'ECharts 数据统计'
                },
                tooltip:{},
                legend:{
                    data:['用户来源']
                },
                xAxis:{
                    data:["Android","IOS","PC","Ohter"]
                },
                yAxis:{

                },
                series:[{
                    name:'访问量',
                    type:'bar', //设置图表主题
                    data:[500,200,360,100]
                }]
            }
        }
    },
    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);
      }  
    }
})

注意：上面全局引入会将所有的echarts图表打包，导致体积过大，大家可以根据需求按需引入

 

效果展示：

参考文章：

Vue 爬坑之路（八）—— 使用 Echarts 创建图表