vue echarts 镂空饼图配置

我是在一个组件中使用 echarts ，通过传参控制的一些配置和数据

首先是镂空，直接看代码

series: [{name: '',type: 'pie',/* 半径 */radius: ['45%', '65%'],

通过半径数组控制镂空

第一个值是内圆，第二个值是外圆，外圆减去内圆就是我们看到的范围，所以除了这个环形的环宽度，这个环的相对大小我们也是可以设置的

比如 ['10%', '20%'] 和 ['80%', '90%']

注：这个值不是一定要第二个值大于第一个值，可以理解为它是自动计算大的减去小的

然后是圆中心的文字

配置title.text 是字符串可以直接使用 /n 直接换行

配合这四个属性即可实现

直接可以使用 center 自动文字居中显示

悬浮鼠标，文字描述不显示问题，可能是下面这个属性配置错误

            emphasis: {label: {show: true,fontSize: '15'}},

需要 show 为 true

下面是这个环形的所有配置

      this.chart.setOption({title: {text: this.total ? this.name + '\n\n' + this.total + '人' : this.name,top: 'center',left: 'center',textStyle: {fontSize: 14,fontWeight: '',color: '#333'}},// 提示框tooltip: {trigger: 'item',backgroundColor: '#fff',textStyle: {color: 'black'},extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'},/* 颜色 */color: ['#35C9CC', '#F6D437', '#1893FF'],/* 数据 */series: [{name: '',type: 'pie',/* 半径 */radius: ['45%', '65%'],avoidLabelOverlap: true,label: {show: true,color: '#51342C'},/* 缝隙*/itemStyle: {borderRadius: [10, 20],borderColor: '#fff',borderWidth: 1.8},/* 边距*/grid: {top: '8%',left: '3%',right: '4%',bottom: '3%',containLabel: true},emphasis: {label: {show: true,fontSize: '15'}},data: this.dataList}]}, true)

参考文档： Apache ECharts

vue echarts 镂空饼图配置相关推荐

Vue+Echarts实现饼图统计通过率
Vue+Echarts实现一个饼状图 1:在项目里面安装echarts 2:在需要用图表的地方引入 1:在项目里面安装echarts // 在项目中安装echarts 插件 cnpm install ...
VUE+ECharts 制作饼图
项目的首页需要实现一个饼图(后端接口返回数据) 准备工作:首先在项目里面安装echarts cnpm install echarts --s 然后我是在main.js里引入了 import echar ...
vue引入Echarts画饼图详解
目录 1 引入Echarts 1.1 安装 1.2 引入 1.3 基本使用 2 基本饼状图 3 为饼图添加标题等属性 3.1 标题图例 3.2 数据展示 3.3 样式设置 4 饼图扩展 5 总结 1 ...
java word 饼图_[Java教程]echarts标准饼图解读(一)——基本配置demo
[Java教程]echarts标准饼图解读(一)--基本配置demo 0 2016-11-21 17:00:18 echarts标准饼图解读共分为四部分, 一.基本配置demo 二.标题(title) ...
echarts饼图配置，及案例
echarts饼图配置,及案例案例(1): let option = {tooltip: { //提示框trigger: 'axis',formatter: '{a} <br/>{b} ...
echarts 3d饼图
echarts 3d饼图效果图: 第一步: 在main.js引入echarts import * as echarts from 'echarts' Vue.prototype.$echarts = ...
Vue+Echarts构建可视化大数据平台实战项目（上）粒子动效，登录界面抖动，背景图轮播★
Vue+Echarts构建可视化大数据平台实战项目(上) 前言分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就 ...
（上）Vue+Echarts构建可视化大数据平台实战项目分享（附源码）
前言分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就是:数据的展示.处理和分析.目的是借助于图形化手段,清晰有 ...
vue 雷达扫描_GitHub - suneildve/vueDataV: 基于Vue + Echarts 构建的数据可视化平台，酷炫大屏展示模板和组件库，持续更新各行各业实用模板和炫酷小组件。...
前言一个基于Vue前端框架和第三方图表库echarts构建的可视化大数据平台,通过vue项目构建.指令的灵活运用.组件封装.组件之间通信,使内部图表组件库可实现自由替换和组合. 项目中部分前端库采用 ...

vue echarts 镂空饼图配置

vue echarts 镂空饼图配置相关推荐

最新文章

热门文章