In the main
//import ElementUI from 'element-ui'
//import 'element-ui/lib/theme-chalk/index.css'
import echarts from 'echarts'
Vue.prototype. $ Echarts = echarts // Vue prototype stores will echarts
//Vue.use(ElementUI)
// components {app element}
Use
<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 statistics'
},
tooltip:{},
legend:{
data: [ 'Region']
},
xAxis: {
data: [ "Guangdong", "Shenzhen", "Shanghai", "Beijing", 'Tianjin']
},
yAxis: {
},
series:[{
name: 'wages k / month'
type:'line',
data:[15,20,13,10,8]
}]
},
optionbar:{
title:{
text: 'ECharts statistics'
},
tooltip:{},
legend:{
data: [ 'Population']
},
xAxis: {
data: [ "Guangdong", "Shenzhen", "Shanghai", "Beijing"]
},
yAxis: {
},
series:[{
name: 'Number / ten million'
type:'bar',
data:[15,20,13,10]
}]
}
}
},
mounted() {
this.drawLine()
},
methods: {
drawLine: function(){
// Based on this quasi-good DOM, instance initialization echarts
let chartmainline = this.$echarts.init(document.getElementById("chartmainline"));
let chartmainbar = this.$echarts.init(document.getElementById("chartmainbar"));
// Draw Chart
chartmainline.setOption(this.optionline);
chartmainbar.setOption(this.optionbar);
}
}
})
// parsing step
// create a container, stored icon data
// Get Next ID, a tree vue the mount dom
// So, it is mounted in the mount
//----
// method drawLine is behind a long list given to him, within the functions are objects,
// this point to the object currently in use,
// $ echarts, is the main reason for increase of $ write,
// Other optionbar, optionline directly to echarts.baidu.com, copy your favorite
</script>
<style scoped>
</style>