vue之使用echarts

在main中

//import ElementUI from 'element-ui'

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

import echarts from 'echarts'

Vue.prototype.$echarts = echarts //将echarts存入Vue原型中

//Vue.use(ElementUI)

//components: { App ,ElementUI},

---

使用方式

<template>

<div class="hello">

<div id="chartmainline" style="width:800px;height:400px;"></div>

<div id="chartmainbar" style="width=800ox;height:400px;"></div>

</div>

</template>

<script>

export default({

data(){

return{

optionline:{

title:{

text:'ECharts 数据统计'

},

tooltip:{},

legend:{

data:['地区']

},

xAxis:{

data:["广东","深圳","上海","北京",'天津']

},

yAxis:{

 

},

series:[{

name:'工资k/月',

type:'line',

data:[15,20,13,10,8]

}]

},

optionbar:{

title:{

text:'ECharts 数据统计'

},

tooltip:{},

legend:{

data:['人口']

},

xAxis:{

data:["广东","深圳","上海","北京"]

},

yAxis:{

 

},

series:[{

name:'数量/千万',

type:'bar',

data:[15,20,13,10]

}]

}

}

},

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);

}

}

})

//步骤解析

//先创建容器，存放图标数据

//接着获取ID，即vue中的dom树挂载

//所以，将其挂载到mounted中

//----

//方法中的drawLine是将后面一大串赋予给他，函数内是对象，

//this指向当前使用的对象，

//$echarts，加$的原因是main有写，

//其他的optionbar、optionline直接去echarts.baidu.com，复制自己喜欢的

</script>

<style scoped>

</style>