echarts自定义饼图

前端经常会用到图标，本人用到的不多，但是积累下来也能慢慢了解它的规律，看懂它的API，今天就积累了一类饼图，用到的知识点当然还是官方文档的配置，有时间可以结合实例去看一下
_{祝大家越来越进步}
Echarts官方文档的配置项：http://www.echartsjs.com/option.html#series

实现效果

今天的饼图实现渐变色和数据背景色的添加及饼图对应的名称

实现步骤

var option_1 = {//饼图名的名称、位置及样式title: {text: 'USDJPY',x:'center',y:'bottom',textStyle: {color:'#7E7E7E',fontSize:'16',fontWeight:'normal',}},//提示框的样式、提示框显示什么数据tooltip: {show:true,trigger: 'item',//有a,b,c,d四种//a代表系列名称(在这里就是USDJPY)，b代表数据项名称(在这里就是上涨或下跌)，//c代表数据(在这里就是335或310)，//d代表数据项所占的百分比数(在这里就是40.04或59.96，要显示百分比样子要自己加百分号)formatter: "{d}%",padding:[10, 10],backgroundColor:'#FFFFFF',textStyle:{color:'#333',fontSize:'16',},},//系列列表series: [{name:'USDJPY',//图标类型，pie是饼图type:'pie',//内外半径radius: ['50%', '90%'],//是否启用防止标签重叠策略,默认是true，一般圆环圆设为falseavoidLabelOverlap: false,//饼图图形上的文本标签(在这里是上涨或下跌)是否在中心环中显示label: {normal: {show: false,position: 'center'},emphasis: {show: false,textStyle: {fontSize: '10',fontWeight: 'bold'}}},//系列中的数据内容数组data:[{//数据值value:335,//数据项名称name:'上涨',//图形样式itemStyle:{normal:{show:true,borderColor:'#F6F7FB',borderWidth:10,//渐变色，一共五个参数，前四个0,0,0,1代表渐变色从正上方开始//第5个参数则是一个数组, 用于配置颜色的渐变过程; 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置, color不用多说肯定是表示颜色了. 像示例代码的配置则表示:color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#A949DE'},{offset: 1, color: '#5341A0'}]),},},},{value:310,name:'下跌',//定义数据项的样式itemStyle:{normal:{show:true,borderColor:'#F6F7FB',borderWidth:10,color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#79E6F6'},{offset: 1, color: '#59C2F5'}]),},},}]}]
};
var dom = document.getElementById("pie_1");
var myChart = echarts.init(dom);
myChart.setOption(option_1, true);

echarts自定义饼图相关推荐

echarts自定义图表颜色，柱状图/饼图自定义渐变色
echarts自定义图表颜色,自定义渐变色柱状图: 单色: 原先图表的颜色配置代码: series: {type: "bar",barWidth: "60" ...
Echarts自定义折线图例,增加选中功能
用Echarts图表开发,原本的Echarts图例不一定能满足我们的视觉要求. 下面是Echarts 折线图自定义图例,图例checked选中,相应的折线线条会随之checked,其余未选中的图例对应 ...
html中legend样式,echarts自定义图例legend文字和样式
话不多说,先上效果图. 要完成这个图并不难,主要是下面那个图例比较难,需要定制. 让我们从官方文档找找思路,官方文档关于legend.formatter是这样的:链接在这难点在于: 1.这里的图例文 ...
Echarts 解决饼图文字过长重叠的问题
Echarts 解决饼图文字过长重叠的问题参考文章: (1)Echarts 解决饼图文字过长重叠的问题 (2)https://www.cnblogs.com/yingsu/p/10608014.ht ...
echarts饼图解析html标签,解决echarts中饼图标签重叠的问题
饼图中的series有个avoidLabelOverlap属性, avoidLabelOverlap:是否启用防止标签重叠策略,默认开启,在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠. ...
QT自定义饼图的外观
QT自定义饼图的外观项目简介项目技术项目展示主要源码片段解析获取完整项目源码传送门项目简介自定义饼图的外观. 项目技术 qt5.12,qt charts模块,C++ 项目展示
QT绘制饼图和自定义饼图切片
QT绘制饼图和自定义饼图切片项目简介项目技术项目展示主要源码片段解析获取完整项目源码传送门项目简介创建一个简单的饼图以及如何对饼图切片进行一些自定义. 项目技术 qt5.12,qt ch ...
java word 饼图_[Java教程]echarts标准饼图解读(一)——基本配置demo
[Java教程]echarts标准饼图解读(一)--基本配置demo 0 2016-11-21 17:00:18 echarts标准饼图解读共分为四部分, 一.基本配置demo 二.标题(title) ...
java中点击按钮出现echarts图表_echarts 显示下载按钮，echarts 自定义按钮，echarts 添加按钮...
echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮 >>>>>>>>>>>>>>&g ...
iOS-贝塞尔曲线之自定义饼图
代码地址如下: http://www.demodashi.com/demo/11981.html 项目中需要统计数据展现, 采用了饼图形式展现. 第一步: 了解下贝塞尔曲线相关概念贝塞尔曲线相关概念 ...

echarts自定义饼图

实现效果

实现步骤

echarts自定义饼图相关推荐

最新文章

热门文章