Echarts基础圆环图

示例如图所示：

关键部分（option）代码如下：

var option = {// 图表标题title:{text:"接入机型占比",// 设置标题颜色为白色textStyle:{color:'#fff'},// 将标题位置设为左侧left:"left"},tooltip:{},// 图例legend:{// 将图例设置为垂直方向orient:'vertical',// 将图例位置设为左侧left:'left',// 修改图例文字颜色为白色#fff，注意不能写white，原因不详textStyle:{color: '#fff'},// 下移图例，使标题和图例不重叠top:'8%'},series:[{type:'pie',//饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形radius:['35%','70%'],data:[{value:15, name:'A机型'},{value:20, name:'B机型'},{value:35, name:'C机型'},{value:25, name:'D机型'},{value:15, name:'E机型'},{value:15, name:'F机型'},{value:15, name:'G机型'}]}]};

完整代码这里没有展示，因为和基础折线图相比，除了option代码不一样，其他设置都一样。

若有需要，可以留言或私聊。

Echarts基础圆环图相关推荐

Echarts基础面积图
Echarts基础面积图 <template><div :id="id"></div> </template> <script ...
ECharts 示例——圆环图：数据标签详细设置
当前ECharts版本为5.1.2. 概述按照其他可视化工具中圆环图的默认样式,对ECharts圆环图进行如下设置: 标题:设置标题位于圆环中央,修改标题字体大小和颜色数据标签:修改字体大小.样式 ...
在echarts中圆环图中间自定义图片引入
首先打开echarts官网实例 https://www.echartsjs.com/examples/zh/editor.html?c=pie-doughnut 其次复制代码 app.title = ...
使用Echarts实现圆环图
实现如图效果: 首先先在 HTML 中定义有宽度和高度的父容器,图表的大小默认即为该节点的大小 <div class="pieChart" id="pieChart ...
echarts饼图圆环图数据为0时字体重叠
在echarts图标中有时候会出现数据过小字体重叠的问题, 解决方法,可将series中的avoidLabelOverlap属性值设置为true即可解决
[python] 基于matplotlib实现圆环图的绘制
圆环图本质上是一个中间切出一块区域的饼状图.可以使用python和matplotlib库来实现.本文主要介绍基于matplotlib实现圆环图.本文所有代码见:Python-Study-Notes # ...
echarts 圆环图
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 1.问题 ...
【Echarts】echarts饼图、圆环图配置代码详解
前言简介:本文将从头开始,带你快速上手 echarts最常用图例-饼图准备:请自行先将echarts图例引入你的项目,本文不多介绍.(引入 echarts教程:http://t.csdn.cn/m ...
html5 加速球效果,css 渐隐渐现、echarts 圆环图、百度地图覆盖物、echarts水球图（360加速球效果）...
说一下知识点: 1.水球是echarts的插件echarts-liquidfill,官网下载-扩展下载中可以拿到,git传送阵https://github.com/ecomfe/echarts-liq ...

Echarts基础圆环图

Echarts基础圆环图相关推荐

最新文章

热门文章