vue项目导入ElementUI，echarts，Resource，Router

main.js

import VueRouter from "vue-router";

import firstcomponent from './components/firstcomponent.vue'

import secondcomponent from './components/secondcomponent.vue'

import VueResource from 'vue-resource'

import echarts from 'echarts'

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI);

Vue.prototype.$echarts = echarts;

Vue.use(VueRouter);

Vue.use(VueResource);

 

hello.vue

<div id='aa' style="width:600px;height:400px"></div>

export default {

 

data () {

return {

author: "微信公众号 jinkey-love"

}

},

mounted(){

this.drawLine();

},

methods: {

drawLine(){

 

// 基于准备好的dom，初始化echarts实例

let myChart = this.$echarts.init(document.getElementById('aa'))

// 绘制图表

myChart.setOption({

title: { text: '在Vue中使用echarts' },

tooltip: {},

xAxis: {

data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

},

yAxis: {},

series: [{

name: '销量',

type: 'bar',

data: [5, 20, 36, 10, 10, 20]

}]

});

}

}

}

 

转载于:https://www.cnblogs.com/xbzy/p/8870450.html