最近專業(yè)拓展一直在學(xué)vue，但是一開始就直接進(jìn)入vue與echarts的使用，基礎(chǔ)都還沒有搭好，哎.....感嘆一下與同學(xué)們的差距
先來記錄以下vue中echarts的引用
1.要先安裝echarts? >npm install echarts --save
2.在views文件夾里創(chuàng)建.vue文件 在文件里面進(jìn)行echarts的引用
3.各個(gè)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 () {
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
? ? ? const myChart1 =this.$echarts.init(document.getElementById('myChart1'))
// 繪制圖表? 從echarts官網(wǎng)中選取自己想要的圖表 然后將代碼拷貝到setOption中就可以啦
? ? ? myChart1.setOption({?
tooltip: {
? ? trigger:'item',
? ? formatter:'{a} <br/> : {c} (u0z1t8os%)'
},
legend: {
data: ['郵件營銷','聯(lián)盟廣告','視頻廣告','直接訪問','搜索引擎'],
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:'聯(lián)盟廣告'
? ? ? ? ? ? ? },
{
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.看下效果圖嘿嘿
