vue-echasrts的封装
废话不多说了
1. npm install echarts --save
2.组件代码
<template>
<div class="echarts">
<div id="echart"></div>
</div>
</template>
<script>
import Echarts from 'echarts'
export default {
data() {
return{
myChart: {}
}
},
props: {
echartObj: {
type: Object,
default: {
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
}
},
created() {
this.$nextTick(()=> {
this.loadEchart()
})
},
mounted(){
let _this = this;
window.onresize = function() {
_this.myChart.resize()
}
},
methods: {
loadEchart() {
this.myChart = Echarts.init(document.getElementById("echart"));
this.myChart.setOption(this.echartObj)
}
}
}
</script>
<style>
#echart {
width: 50%;
height: 300px;
}
</style>
3.组件的使用
<template>
<div >
<Eharts :echartObj="echartObj"></Eharts>
</div>
</template>
<script>
import Eharts from '../components/echarts'
export default {
data() {
return {
echartObj:{
angleAxis: {
},
radiusAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四'],
z: 10
},
polar: {
},
series: [{
type: 'bar',
data: [1, 2, 3, 4],
coordinateSystem: 'polar',
name: 'A',
stack: 'a'
}, {
type: 'bar',
data: [2, 4, 6, 8],
coordinateSystem: 'polar',
name: 'B',
stack: 'a'
}, {
type: 'bar',
data: [1, 2, 3, 4],
coordinateSystem: 'polar',
name: 'C',
stack: 'a'
}],
legend: {
show: true,
data: ['A', 'B', 'C']
}
}
}
},
mounted() {
},
components: {
Eharts
}
}
</script>
<style>
</style>
这样大部分的图标都可以用了
使用时参照 echarts官网 修改echartObj