echarts之环形图

echarts中环形图就是饼图，区别在于是否定义了图形内部镂空的半径而已，就像下图：

那么现在有了一个圆环，中间如果空着的话就太难看了，所以给了如下的样式：

就是要给圆环中心添加内容。如果是单纯的添加内容的话，有以下三种方式：

1、graphic，是原生图形元素组件。优点是支持多种图形元素，但是如果要实现上图不太合适。因为圆环中心的字体有两种样式，面对多种样式，我能想到的只有富文本。

2、label，支持富文本，实现上图完全没问题，但是人家貌似不是干这个的。。。

如果使用了珍贵的label，那后面改要求也要展示这个怎么办。而且如果使用label还有一个问题，就是鼠标移向中间文字的时候，就相当于鼠标移向了一部分圆环，很容易就让客户迷迷糊糊的，到底中间的数字是总体的还是那部分圆环的？

3、title，这是我最终采取的方式，支持富文本，而且如果非要展示标题也可以用html写。代码如下：

option = {title: {text: '{b|10000000}',subtext: '{a|年薪}',subtextStyle:{rich:{a:{fontSize:"38",}}  },textStyle:{rich:{b:{fontSize:"48"}}},left: 'center',top:"center"},tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},legend: {orient: 'vertical',left: 'left',data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']},series: [{name: '访问来源',type: 'pie',radius: ['40%','55%'],center: ['50%', '50%'],data: [{value: 335, name: '直接访问'},{value: 310, name: '邮件营销'},{value: 234, name: '联盟广告'},{value: 135, name: '视频广告'},{value: 1548, name: '搜索引擎'}],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]
};

效果：

echarts之环形图相关推荐

【ECharts】环形图、饼状图
目录 color设置的颜色环形渐变色圆环中间显示文字悬浮显示中间文字悬浮显示中间文字,默认显示第一个循环高亮饼图块 label文字过长重叠 label和饼图一致 label展示位置内容为0 ...
echarts通用环形图
echarts通用环形图效果如下: <div class="chart-box"><div ref="pieChart" id=" ...
ECharts 之环形图
上一篇文章写了堆叠柱状图的用法,本文写的是环形图的方法,环形图是饼图的一种,具体的饼图可以自己更改radius属性的大小 radius : ['50%', '70%'], //饼图的半径,第一项是内半 ...
Echarts实现环形图的渐变颜色效果
已经封装好的环形图组件直接在要用的vue文件中引用: <circleChart:id="chart4.id":width="chart4.width": ...
echarts 圆角环形图
下定决心,好好过一天 ~ var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); v ...
Echarts饼图,环形图,鼠标触碰后取消默认放大效果
项目场景: 项目场景:使用ecahrts 做一个环形图,但是鼠标触碰图例会有放大效果,根据高保真这个效果需要取消问题描述问题1我想把这个放大效果取消,让后翻阅echarts的文档让后发现 let ...
ECharts - 嵌套环形图
嵌套环形图链接:https://pan.baidu.com/s/1bV1IXEoSJT7vTKQcwwoVQg 提取码:hxdl
echarts 饼图/环形图鼠标经过显示文本标签图例icon
文章目录鼠标经过显示文本标签效果关键部分图例 icon 效果关键部分完整实现鼠标经过显示文本标签效果关键部分 label: { // 饼图图形上的文本标签normal: { // ...
echarts 嵌套环形图
下定决心,好好过一天 ~ var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); v ...

echarts之环形图

echarts之环形图相关推荐

最新文章

热门文章