Vue之echarts圆饼图详解

圆饼图

案例分析

代码：

option = {backgroundColor: '#2c343c',title: {text: 'Customized Pie',left: 'center',top: 20,textStyle: {color: '#ccc'}},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},visualMap: {show: false,min: 80,max: 600,inRange: {colorLightness: [0, 1]}},series : [{name:'访问来源',type:'pie',radius : '55%',center: ['50%', '50%'],data:[{value:335, name:'直接访问'},{value:310, name:'邮件营销'},{value:274, name:'联盟广告'},{value:235, name:'视频广告'},{value:400, name:'搜索引擎'}].sort(function (a, b) { return a.value - b.value; }),roseType: 'radius',label: {normal: {textStyle: {color: 'rgba(255, 255, 255, 0.3)'}}},labelLine: {normal: {lineStyle: {color: 'rgba(255, 255, 255, 0.3)'},smooth: 0.2,length: 10,length2: 20}},itemStyle: {normal: {color: '#c23531',shadowBlur: 200,shadowColor: 'rgba(0, 0, 0, 0.5)'}},animationType: 'scale',animationEasing: 'elasticOut',animationDelay: function (idx) {return Math.random() * 200;}}]
};

图：

首先是在指定标签初始化一张图
1. 设置字体颜色【设置副标题、主标题字体颜色】

title : {subtext:this.subtext,x:'center',subtextStyle:{color:'#ffffff'}
},

通过subtextStyle里面设置字体的属性值，在这里我设置为显示为白色。

设置每一块扇形的颜色

{value:556, name:'正常',itemStyle:{color:'#4f8bf9'}},
{value:40, name:'告警',itemStyle:{color:'#fea31e'}},
{value:30, name:'离线',itemStyle:{color:'#959595'}},]

通过对每一块扇形的itemStyle进行设置，来设置扇形的内容，我仅仅修改了每个扇区的颜色，效果如下：

修改引线文字格式

series : [{name:'访问来源',type:'pie',radius : '55%',center: ['50%', '60%'],data:this.datas,label: {normal: {//  {b}  代表显示的内容标题// {c}代表数据值//{d}代表占百分比formatter: ' {b}：{d}% ',borderWidth: 20,borderRadius: 4,}},}
]

在这里我仅仅让引线显示的文字为：name: 百分比

效果如下图：

修改选中扇区的动作

series : [{name:'访问来源',type:'pie',radius : '55%',center: ['50%', '60%'],data:this.datas,selectedMode: 'single',selectedOffset:20,label: {normal: {// \n\n可让文字居于牵引线上方，很关键//  {b}  代表显示的内容标题// {c}代表数据formatter: ' \n\n{b}：{d}% ',borderWidth: 20,borderRadius: 4,}},}
]

通过对selectedMode进行设置，默认为true，可以通过修改来选择动作模式。

在这里，我的选择为single，还有另外一个选项为 'multiple'。

其次selectedOffset显示偏离距离。

single的动作效果图如下：

multiple的动作效果图：

每个扇区都彼此分离。

修改legend样式

 legend: {// orient: 'vertical',// top: 'middle',bottom: 10,left: 'center',data: ['西凉', '益州','兖州','荆州','幽州']},

效果图如下，legend位于底部中部，离最低端10：

在这里，通过设置bottom在显示数据为底部，显示的值依次为data数组中的内容。同时，可以设置的样式有如下【摘取局部】，更多详情可以参照官网的api和配置：

Vue之echarts圆饼图详解相关推荐

vue引入Echarts画饼图详解
目录 1 引入Echarts 1.1 安装 1.2 引入 1.3 基本使用 2 基本饼状图 3 为饼图添加标题等属性 3.1 标题图例 3.2 数据展示 3.3 样式设置 4 饼图扩展 5 总结 1 ...
keep alive PHP,vue中keep-alive使用方法详解
这次给大家带来vue中keep-alive使用方法详解,vue中keep-alive使用的注意事项有哪些,下面就是实战案例,一起来看一下. 1.keep-alive的作用以及好处在做电商有关的项目中 ...
php动态写入vue,Vue自定义动态组件使用详解
这次给大家带来Vue自定义动态组件使用详解,Vue自定义动态组件的注意事项有哪些,下面就是实战案例,一起来看一下. 现在基于vue的UI组件库有很多,比如iview,element-ui等.但有时候这 ...
Vue的生命周期过程详解
Vue的生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的 ...
Vue 中的 ref 属性详解
Vue 中的 ref 属性详解我们先来读一下vue的官方文档我们来分析官方文档首先ref的引用是相当于一个DOM节点(如果是子组件则指向的是其实例),而且是一个string类型的值. 通俗的将就 ...
《前端》权限链接--vue前端权限控制方案详解附demo_feiyu_may的博客-CSDN博客_vue 前端权限
前端权限控制 - 潘正 - 博客园 https://www.cnblogs.com/guchengnan/p/11800947.html vue前端权限控制方案详解附demo_feiyu_may的博 ...
vue里页面的缓存详解
关于vue里页面的缓存详解实用的例子ABC 往下查看 keep-alive是vue内置的一个组件,可以使被它包含的组件处于保留状态,或避免被重新渲染. 用法: 在keep-alive标签内部添加 i ...
vue连接后端本地接口_详解vue配置后台接口方式
详解vue配置后台接口方式在vueAdmin项目中有两种方式配置后端接口的方式,在此做下记录第一种(代理方式) 在工程目录下 > config > index.js - 修改为如下配置 ...
三、教你搞懂渐变堆叠面积图《手把手教你 ECharts 数据可视化详解》
注:本系列教程需要对应 JavaScript .html.css 基础,否则将会导致阅读时困难,本教程将会从 ECharts 的官方示例出发,详解每一个示例实现,从中学习 ECharts . ECha ...
vue webpack 访问php,实例详解vue-cli优化的webpack配置
最近的项目度过了开始忙碌的基建期,也慢慢轻松下来,准备记录一下自己最近webpack优化的措施,希望有温故知新的效果.本文主要介绍了详解基于vue-cli优化的webpack配置,小编觉得挺不错的,现 ...

Vue之echarts圆饼图详解

Vue之echarts圆饼图详解相关推荐

最新文章

热门文章