最近专业拓展一直在学vue，但是一开始就直接进入vue与echarts的使用，基础都还没有搭好，哎.....感叹一下与同学们的差距
先来记录以下vue中echarts的引用
1.要先安装echarts >npm install echarts --save
2.在views文件夹里创建.vue文件 在文件里面进行echarts的引用
3.各个js文件中的引入
在main.js中添加import echartsfrom 'echarts' Vue.prototype.$echarts = echarts
在index.js中添加 import echart1from '../views/echart1'
import echart2from '../views/echart2'
import echart3from '../views/echart3'
在app.vue中添加
4.接下来可以开始写正文了
<template>
<div id="myChart1" :style="{position:'absolute',width:'500px',height:'380px',backgroundColor:'',top:'50px'}"></div>
</template>
<script>
export default {
name:'echart1',
data () {
return {}
},
mounted () {
this.drawLine()
},
methods: {
drawLine () {
// 基于准备好的dom，初始化echarts实例
const myChart1 =this.$echarts.init(document.getElementById('myChart1'))
// 绘制图表 从echarts官网中选取自己想要的图表 然后将代码拷贝到setOption中就可以啦
myChart1.setOption({
tooltip: {
trigger:'item',
formatter:'{a} <br/>{b} : {c} ({d}%)'
},
legend: {
data: ['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'],
top:'5%',
left:'5%',
orient:'vertical',
textStyle:{
color:'black',
}
},
toolbox: {
feature: {
saveAsImage: {}
}
},
visualMap: {
show:false,
min:80,
max:600,
inRange: {
colorLightness: [0,1]
}
},
series: [
{
name:'访问来源',
type:'pie',
radius:'55%',
center: ['58%','50%'],
data: [
{
value:335,
name:'直接访问'
},
{
value:310,
name:'邮件营销'
},
{
value:274,
name:'联盟广告'
},
{
value:235,
name:'视频广告'
},
{
value:400,
name:'搜索引擎'
}
].sort(function (a, b) {
return a.value - b.value;
}),
roseType:'radius',
label: {
color:'black'
},
labelLine: {
lineStyle: {
color:'black'
},
smooth:0.2,
length:10,
length2:20
},
itemStyle: {
color:'#b5838d',
},
animationType:'scale',
animationEasing:'elasticOut',
animationDelay:function (idx) {
return Math.random() *200
}
}
]
})
}
}
}
</script>
<style lang="less" scoped>
</style>
5.看下效果图嘿嘿
