Echarts 实现环状半圆形饼图

*可以用整个圆，也可以用半圆，自由发挥即可。有问题可留言

1、效果如下

2、代码实现

// 环状半圆形饼图var option = {grid: {left: "3%",right: "3%",bottom: "3%",containLabel: true},series: [{name: "一般",type: "pie",//起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。startAngle: 0,hoverAnimation: false,tooltip: {},radius: ["60%", "47%"],center: ["40%", "40%"],labelLine: {normal: {show: false}},data: [{value: 300,itemStyle: {normal: {color: "rgba(80,150,224,0)"}}},{value: 125,  // 渐变色部分itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#FFDE00" },{ offset: 0.5, color: "#00ECD9" },{ offset: 1, color: "#00ECD9" }])},},{value: 175, // 右侧部分itemStyle: {normal: {color: "#0C5071"}}}]}]
};

Echarts 实现环状半圆形饼图相关推荐

Echarts数据可视化series-pie饼图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
vue中echarts使用案例：饼图（可直接使用）
目录功能.效果图: 代码实现 1.下载echarts包:终端运行 2.代码 3.运行项目:终端运行 4.可能遇到的错误具体代码详解: 功能.效果图: 1.点击对应模块,放大并显示数据 2.点击下方 ...
【echarts应用】---pie饼图篇
目的:对echart 图表进行封装调用--饼图篇.下面是基础的样式,可以改成自己需要的样式.(找个地方保存,以后用到的时候方便复制粘贴,哈哈) 1.页面中引入echarts.jquery文件 < ...
使用Echarts制作动态嵌套饼图
笔者最近因为使用Echarts制作报表,参考了官方文档及某些博客,使用过程中有些想法,想将其中的一些记录下来,也希望能帮助到需要的人. 本例以嵌套的饼图为例.嵌套的饼图即为双层饼图,相比普通的饼图多了 ...
echarts扇形图（饼图）常用的配置
1.效果图: 2.完整代码:(可以直接贴到echarts官网进行测试查看效果) option = {tooltip: {trigger: 'item',formatter: '{a} <br/& ...
从后端数据库获取数据并传值到前端vue项目的echarts柱状图/折线图/饼图里
不同图表的数据获取有一定的区别在这些区别上花了不少功夫试验,把最后成功的方法做个记录,如果有类似项目要做的话,也可看看当个参考. 后端后端都大同小异,方法上没有区别,在这里以柱状图为例. sql: ...
echarts：2、饼图
饼图 <template><div class="index"><div ref="main" class="main& ...
echarts 三环圆环_Echarts饼图之圆环图
需求: 页面上加载一个echarts环形图. 来由: 身为一个Java开发人员,被项目经理拉过来写页面,心里也是很苦逼~可是也没办法,只能硬着头皮干啊,直接上代码 // 基于准备好的dom,初始化ec ...
vue中echarts 实现下钻（饼图为例）
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 1.echarts图是以子组件的形式引入 import comChart from "/components/com-cha ...
echarts怎么控制圆饼图的大小
radius : '55%', ------------这个属性设置图的大小 center: ['50%', '60%'],-----这个属性设置图的上下左右的位置

Echarts 实现环状半圆形饼图

Echarts 实现环状半圆形饼图相关推荐

最新文章

热门文章