-
先解释一下为什么不用 v-charts,原因有两点(我只说一下我个人的观点)
- 我觉得只写官方提供的组件是比 e-charts 相对来说要用一些,当我觉得可控制性没有 e-charts 那么高,并且它只提供了一些基础的 API ,其它的 API 还是要看 e-charts ,所以从学习的角度来说,还是学 e-charts 好一些。
- 就是个人想法,我觉得你的使用场景对于我来说不是很友好,扩展性不高,所以就自己封装了一个组件。
-
分享一下组件源码:
<template> <div class="pie-container"> <div ref="pcPie" :style="{width: chartWidth,height: chartHeight}"> </div> </div> </template> <script> import charts from 'echarts' export default { name: 'pc-pie', props: { chartWidth: { type: [String, Number], default: '400px' }, chartHeight: { type: [String, Number], default: '400px' }, title: Object, legend: Object, chartData: [Object, Array], name: String, chartColor: { type: Array, default: () => [] } }, mounted() { this.initChart() }, methods: { initChart() { let datas = [] if (Object.prototype.toString.call(this.chartData)=='[object Array]') { datas = this.chartData } else { const keyArray = this.chartData.columns this.chartData.rows.forEach(item => { datas.push({ value: item[keyArray[1]], name: item[keyArray[0]] }) }) } const initCharts = charts.init(this.$refs.pcPie) const chartColor = this.chartColor.length === 0 ? null : this.chartColor const options = { tooltip: { trigger: 'item', formatter: "{b} : {c} ({d}%)" }, title: this.title, legend: this.legend, series: { name: this.name, type: 'pie', radius : '55%', data: datas, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }, color: chartColor } } } initCharts.setOption(options) } }, watch: { chartData: { handler(){ this.initChart() }, deep: true } } } </script>
-
使用方式这里传递数据支持两种方式: 1. echarts 的方式,手动写 value 和 name 2. 支持 v-charts 的方式,这种方式对做前端来说比较友好一点
<template>
<div>
<pie-charts :title="title" :chartData="data" name="数据名称" :legend="legend"></pie-charts>
</div>
</template>
<style lang="less"></style>
<script>
import pieCharts from './pie-charts.vue'
export default {
data() {
return {
// 也可以支持跟 v-charts 类似的方式传数据
data:{
columns: [ '名称' ,'数据' ],
rows: [
{'名称':'直接访问', '数据':335,},
{'名称':'邮件营销', '数据':310,},
{'名称':'联盟广告', '数据':234,},
{'名称':'视频广告', '数据':135,},
{'名称':'搜索引擎', '数据':1548,},
]
},
// 这种方式也支持
// data:[
// {value:335, name:'直接访问'},
// {value:310, name:'邮件营销'},
// {value:234, name:'联盟广告'},
// {value:135, name:'视频广告'},
// {value:1548, name:'搜索引擎'}
// ],
title: {
text: '默认的标题',
x: 'center'
},
// 图例说明
legend: {
orient: 'vertical',
left: 'left',
},
}
},
components: {
pieCharts
},
}
</script>
- 目前可能不支持特别复杂的场景(但大部分场景还是可以用的),后面我也会做更新
后面我有时间会持续更新一些组件,到时候也会发到 GitHub 上,做一个自己的组件库,如果你感兴趣的话,请关注我.
网友评论