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>
