vue饼图组件_vue写一个图表组件(1)----饼图

话不多说，先上最终效果图：

上面的饼图的实现，使用的插件为百度echarts，该插件的功能可是非常的强大呢，下面便来说说怎么实现的吧

import echarts from 'echarts'

export default {

data() {

return {

dataList:[

{value:1, name:'0-20分'},

{value:3, name:'21-50分'},

{value:24, name:'51-70分'},

{value:7, name:'71-80分'},

{value:3, name:'81-100分'},

]

}

methods: {

// 图表初始化数据

initChart(){

let myChart = echarts.init(this.$refs.myEchart);

myChart.setOption({

tooltip: {

trigger:'item',

formatter: "{a}
{b}: {c}
({d}%)"

series : [

{

name:'学生作业提交率',

type: 'pie',

radius : '80%',

center: ['52%', '53%'],

avoidLabelOverlap: false,

data: this.dataList,

itemStyle: {

emphasis: {

shadowBlur: 5,

shadowOffsetX: 0,

shadowColor: 'rgba(0, 0, 0, 0.3)'

}

]

})

}

mounted () {

let obj = this.$refs.myEchart;

if(obj){

this.initChart();

}

data中的数据使用放在props中便可以实现父子传值啦，如果需要宽高自定义也可以将width和height放在props中，如果里面的配置不清楚含义的话，可以去官网查找API哦。

vue饼图组件_vue写一个图表组件(1)----饼图相关推荐

Vue手写一个日历组件
工作中遇到一个需求是根据日历查看某一天/某一周/某一月的睡眠报告,但是找了好多日历组件都不是很符合需求,只好自己手写一个日历组件,顺便记录一下. 先来看看设计图是什么样式, 跟其他日历有点不一样,这个 ...
[react] 使用高阶组件(HOC)实现一个loading组件
[react] 使用高阶组件(HOC)实现一个loading组件 function HOC(wrappedComponent) {return class extends React.Componen ...
angular在IE下报object doesn't support property or method matches问题，以及router-outlet切换时不删除原组件而是添加一个新组件
angular在IE下有时会报object doesn't support property or method matches问题同时,在router-outlet切换时,不删除原组件而是添加一个 ...
当 el-form 组件下只有一个 el-input 组件时，按回车键会导致页面刷新
当 el-form 组件下只有一个 el-input 组件时,按回车键会导致页面刷新的问题可能是由于浏览器默认的表单提交行为所导致的.解决此问题的一种方法是使用 @submit.native.prev ...
【React组件】写一个模仿蓝湖的图片查看器
前言最近公司让写一个可以自由拖拽放大的图片查看器,我寻思这还不简单,一顿操作猛如虎,俩小时后: 事实证明,一旦涉及到 DOM 的变换操作,如果很多细节考虑不全,抓过来就写,那基本就凉了.于是我仔细分 ...
vue 筛选组件_记一个复杂组件（Filter）的从设计到开发
此文前端框架使用 rax,全篇代码暂未开源(待开源) 原文链接地址:Nealyang/PersonalBlog 前言貌似在面试中,你如果设计一个 react/vue 组件,貌似已经是司空见惯的问题了 ...
手把手教你写一个Vue3组件库但是乞丐版
好久没写文章了,最近在研究一些组件库的实现方法,分享一下.在这我这篇文章之前其实已经有一篇文章讲了Vue如何打包组件库了(最底部),但是这篇文章一是没有源码二是Vue3和Vue2的组件库写法有点不一样 ...
java 通用组件_写一个通用数据访问组件
出处:http://www.csharp-corner.comwillsound(翻译)我收到过数据库出处:http://www.csharp-corner.com willsound(翻译) 我收 ...
如何写一个前端组件-以bootstrap-tab为例
介绍本文以Bootstrap标签页组件为例,介绍如何编写或者封装一个前端组件,以下是实现效果: 原生的Bootstrap-tab组件主要有html,css组成,开发者使用时,需要写很多代码,不易于使 ...

vue饼图组件_vue写一个图表组件(1)----饼图

vue饼图组件_vue写一个图表组件(1)----饼图相关推荐

最新文章

热门文章