近来做了个小项目，因为最近接触了vue感觉很强大所以决定这个项目前端用vue来开发。
以前用jquery开发过百度的echart也写过几个图形插件感觉用起来很方便，新手只需要知道怎么引用，传输对应的数据格式即可，所以也想把echart在vue上搞几个组件玩玩，好了长话短说哈直接上干货。
里面用了vue的组件间的通讯，新手不了接的可以看一下我推荐的几个链接然后再看代码。
下面这个是父组件：
这个是echart图形组件里面支持饼图，环形图，柱状图
代码如下：
<template>
<div id="main" style="width: 600px;height: 400px;"></div>
</template>
<script>
import echarts from 'echarts'//引入依赖
export default {
name: "public-echart",
data() {
return {
charts:'',
}
},
props: ['items'],
methods: {
//饼图
drawPie() {
this.charts.setOption({
tooltip: {
},
legend: {
orient: 'vertical',
x: 'left',
data: this.items.opinion
},
series: [
{
name: this.items.title,
type: this.items.chartType,
data: this.items.opinionData
}
]
})
},
//环形图
drawDhtPie() {
this.charts.setOption({
tooltip: {
},
legend: {
orient: 'vertical',
x: 'left',
data: this.items.opinion
},
series: [
{
name: this.items.chartName,
type: this.items.chartType,
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: this.items.opinionData
}
]
})
},
///柱状图
drawBar() {
this.charts.setOption({
tooltip: {
},
xAxis: {
data: this.items.opinion
},
yAxis: {
},
series: [
{
name: this.items.chartName,
type: this.items.chartType,
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'blod'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: this.items.opinionData
}
]
})
}
},
mounted() {
console.log(this.items)
//初始化
this.charts = echarts.init(document.getElementById('main'))
if (this.items.chartType == "bar") {
this.drawBar()
}
else if (this.items.chartType == "pie") {
this.drawPie()
}
//else if (this.items.chartType == "dhtPie") {
// this.drawDhtPie()
//}
}
}
</script>
<style scoped>
</style>
都是很基础的东西，只需要传图形类别、维度数组、数据数组即可。后期会将此组件扩展的更方便快捷。
注：开发工具是vs2017程序结构图如下：
不得不说vs2017还是蛮强大的。好了先写到这下次会发优化后的代码，敬请期待哦！
网友评论