現在main.js中全局引入
例子1
<template>
<div id="line"></div>
</template>
<script>
export default{
mounted(){
this.drawLine();
},
methods:{
drawLine(){
//初始化
let myLine = this.$echarts.init(document.getElementById('line'));
myLine.setOption({
tooltip:{
trigger: 'axis'
},
legend: {
data:['郵件營銷','聯盟廣告','視頻廣告','直接訪問','搜索引擎']
},
grid: {
left: '1%',
right: '3%',
bottom: '3%',
containLabel: true,
show:true
},
xAxis:[
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日'],
axisLine:{lineStyle:{color:'#999'}},
splitLine:{show:true,lineStyle:{color:'#ddd'}}
}
],
yAxis:[
{
type : 'value',
axisLine:{lineStyle:{color:'#999'}},
splitLine:{lineStyle:{color:'#ddd'}}
}
],
series:[
{
itemStyle:{normal:{ color:'#96d6e8'}},
name:'郵件營銷',
type:'line',
stack: '總量',
areaStyle: {normal: {}},
data:[120, 132, 101, 134, 90, 230, 210]
},{
itemStyle:{normal:{color:'#e6d385'}},
name:'聯盟廣告',
type:'line',
stack:'總量',
areaStyle:{normal:{}},
data:[220,135,23,56,78,145,135]
},
{
itemStyle:{normal:{color:'#f4abab'}},
name:'視頻廣告',
type:'line',
stack:'總量',
areaStyle:{normal:{}},
data:[150, 232, 201, 154, 190, 330, 410]
},{
itemStyle:{normal:{color:'#a6c733'}},
name:'直接訪問',
type:'line',
label:{
normal:{
show:true,
position:'top'
}
},
stack:'總量',
areaStyle:{normal:{}},
data:[350, 232, 251, 154, 190, 210, 110]
}
]
})
}
}
}
</script>
<style scoped>
line{
width:500px;
height:300px;
margin:0 auto;
}
</style>
例2
<template>
<div id="myChart"> </div>
</template>
<script>
export default{
mounted(){
this.drawPie();
},
methods:{
drawPie(){
//初始化echarts實例
let myChart = this.$echarts.init(document.getElementById('myChart'));
//繪制圖表
myChart.setOption({
tooltip:{
trigger: 'item',
formatter: "{a}
: {c} (ypol9oj%)"
},
legend:{
orient: 'vertical',
x: 'left',
data:['視頻廣告','聯盟廣告','郵件營銷','直接訪問','搜索引擎']
},
series:[
{
name:"訪問來源",
type:'pie',
radius:'65%',
roseType:'angle',
data:[
{value:235,name:'視頻廣告'},
{value:274,name:'聯盟廣告'},
{value:310, name:'郵件營銷'},
{value:335, name:'直接訪問'},
{value:400, name:'搜索引擎'}
]
}
]
})
}
}
}
</script>
<style scoped>
myChart{
width:300px;
height:300px;
margin:0 auto;
}
</style>
效果圖
