现在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}
{b}: {c} ({d}%)"
},
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>
效果图
