在Vue中使用echarts实例

安装echarts依赖

npm install echarts -S
或者使用淘宝的镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S

创建图表

首先需要全局引入
在main.js中

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

在vue文件里面使用

完整代码：

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'
import qs from 'qs'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import global from './Global'
import vueAplayer from 'vue-aplayer'
import Router from 'vue-router'
import commonFunction from './assets/js/commonFunction'
import packageFunc from './assets/js/commonFunction'
import echarts from 'echarts'
import {clearLoginState, isLogin, restoreLoginState} from './Utils'

// 恢复登录状态，避免在刷新后失去登录状态
restoreLoginState()
Vue.prototype.GLOBAL = global
Vue.prototype.$echarts = echarts
Vue.prototype.$axios = axios

Vue.use(Router, vueAplayer, VueAxios, axios, qs, commonFunction, packageFunc)
// 全局配置：完整引入 Element：
Vue.use(ElementUI, {size: 'small', zIndex: 3000})
Vue.config.productionTip = false

// http请求拦截器
axios.interceptors.request.use(config => {
    config.baseURL = global.BASE_URL
    config.withCredentials = true
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
    config.timeout = 10000
    config.transformRequest = [function (data) {
        // 对 data 进行任意转换处理
        return qs.stringify(data, {arrayFormat: 'repeat'})
    }]
    return config
}, err => {
    ElementUI.Message.error({message: '请求超时!'})
    return Promise.reject(err)
})

// http response 拦截器
axios.interceptors.response.use(response => {
    const data = response.data
    // 操作成功
    if (data.status === 1000) {
        return response
    }

    ElementUI.Message.error(data.msg)

    // 未登录或者账号信息错误，则跳转到登录页
    if (data.status === 1002) {
        // 清除登录信息
        clearLoginState()
        router.push('/login')
    }

    return Promise.reject(data)

}, (err) => { // 这里是返回状态码不为200时候的错误处理
    ElementUI.Message.error(err.toString())
    return Promise.reject(err)
})


//在路由跳转之前判断，除了首页以外，其他页面必须登录才能访问,异步问题
router.beforeEach((to, from, next) => {
    /* 路由发生变化修改页面title */
    if (to.meta.title) {
        document.title = to.meta.title
    }
    if (to.path === '/' || to.path === '/login' || to.path === '/activate' || to.path === '/register') {
        next()
    } else {
        if (isLogin()) {
            next()
        } else {
            // 未登录则跳转到登录页面
            next('/login?redirect=' + to.path)
        }
    }
})

new Vue({
    router,
    // render函数是渲染一个视图，然后提供给el挂载，如果没有render那页面什么都不会出来
    //components: { App }  vue1.0的写法
    // render: h => h(App)    vue2.0的写法
    render: h => h(App),
    template: '<App/>',
}).$mount('#app')

vue文件：

<template>
    <div>
        <h1>mistakescollection</h1>
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="main1" style="width: 600px;height:400px;"></div>
        <div id="main2" style="width: 600px;height:400px;"></div>
    </div>
</template>

<script>

export default {
    name: 'MistakesCollection',
    data () {
        return {
            msg: 'Welcome to Your Vue.js App'
        }
    },
    mounted(){
        this.drawLine1();
        this.drawLine2();
    },
    methods: {
        drawLine1(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('main1'))
            // 绘制图表
            myChart.setOption({
                title: { text: 'drawLine1' },
                tooltip: {},
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            });
        },
        drawLine2(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('main2'))
            // 绘制图表
            myChart.setOption({
                backgroundColor: '#2c343c',
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        data:[
                            {value:235, name:'视频广告'},
                            {value:274, name:'联盟广告'},
                            {value:310, name:'邮件营销'},
                            {value:335, name:'直接访问'},
                            {value:400, name:'搜索引擎'}
                        ],
                        roseType: 'angle',
                        label: {
                            normal: {
                                textStyle: {
                                    color: 'rgba(255, 255, 255, 0.3)'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                lineStyle: {
                                    color: 'rgba(255, 255, 255, 0.3)'
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                shadowBlur: 200,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });
        }
    }

}
</script>

<style scoped>

</style>

需要什么做什么样的图形就在 https://echarts.apache.org/examples/zh/index.html 这里去找吧！复制粘贴修改！

效果：

参考：

https://www.jianshu.com/p/cf0a54374419