echarts饼图不同样式

仅做个人收藏记录。

1. 双层饼图

let htjc_option4_data = [{ value: 78, name: '网上申请合同数', textStyle: { color: '#28b1ff' } },{ value: 22, name: '线下申请合同数', textStyle: { color: '#1ae562' } },];
option={tooltip: {trigger: 'item'},color: ['#28b1ff', '#1ae562'],legend: {data: [{name: '网上申请合同数',textStyle: {color: '#28b1ff'}}, {name: '线下申请合同数',textStyle: {color: '#1ae562'}}],orient: 'vertical',right: '5%',top: '5%',itemGap: 25,itemWidth: 14,itemHeight: 14,textStyle: {color: 'auto',fontSize: 14,padding: [0, 0, 0, 5],rich: {name: {fontSize: 14,color: '#fff'},b: {fontSize: 14,color: 'auto',fontWeight: 'bold'},v: {fontSize: 14,color: 'auto',fontWeight: 'bold'}}},icon: 'rect',formatter: name => {var data = htjc_option4.series[0].data;var total = 0;var tarValue;for (var i = 0; i < data.length; i++) {total += data[i].value;if (data[i].name == name) {tarValue = data[i].value;}}var v = tarValue;var b = Math.round((tarValue / total) * 100);return '{name|' + name + '}' + '   ' + "{b| " + b + "%}" + ' ' + "{v| " + v + "万平方米}";}},series: [{type: 'pie',radius: ['35%', '55%'],center: ['35%', '62%'],label: {show: false,},labelLine: {show: false},data: htjc_option4_data}, {type: 'pie',radius: ['55%', '65%'],center: ['35%', '62%'],hoverAnimation: false,label: {normal: {show: false,},emphasis: {show: false,},},labelLine: {normal: {show: false,},emphasis: {show: false,},},animation: false,tooltip: {show: false,},data: [{value: 1,itemStyle: {color: "rgba(255,255,255,0.2)",},},],}]}

var ecologicalOption = {tooltip: {show: false},color: ['#2a2ac7', '#3657c8', '#53b1f9'],legend: {left: 'center',top: 20,itemGap: 20,textStyle: {color: '#fff',fontSize: 12}},series: [{type: 'pie',radius: '55%',// top: '6%',data: [{ value: 1048, name: '供地盘活' },{ value: 735, name: '转让盘活' },{ value: 580, name: '增容改进' }],label: {normal: {show: true,formatter: '{b|{b}}\n{d|{d}%}',rich: {b: {color: '#fff',fontSize: 12,align: 'center',padding: [0, 0, 5, 0]},c: {fontSize: 12,color: '#10d0f5',fontWeight: '700'},d: {fontSize: 12,color: '#baeaf3',fontWeight: '700'}}}},labelLine: {normal: {show: true,length: 20,length2: 50,lineStyle: {color: '#3874b5',width: 2}}}}]}

echarts饼图不同样式相关推荐

ECharts 饼图 legend 样式修改
在移动端展示一个数据很多的饼图的时候,首先看一下效果.ECharts legend 配置项 1 legend 让它在右面竖着显示. legend: {type: 'scroll',orient: 'v ...
ECharts 饼图数据放在饼图内部显示
1.业务需求将数据显示在饼图内部,格式化百分比显示,鼠标放上去显示具体名称和数值原样式如下 2.业务实现调整代码如下,核心语句已标记注释 option = {title: {text: 'Ref ...
echarts 饼图基本配置
var option = {//饼图不需要配置x和y轴series: [{type: "pie",//指定图表类型为饼图data: pieData,// radius:" ...
Echarts饼图之数据展示
Echarts饼图之数据展示 1.组件简介 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,C ...
echarts饼图默认高亮/取消高亮
方法一在 echarts 饼图中,可以通过 emphasis 属性设置数据项被高亮时的样式.而如果您想要设置默认高亮的一个数据项,可以在该数据项的配置对象中使用 selected: true 属性来 ...
Echarts 饼图基本用法
目录 Echarts 饼图基本用法引入Echarts 创建饼图拓展引入Echarts 所介绍的两种方法,适用于使用Echarts的每种图. 在一般的html里引入Echarts,需要下载echa ...
echarts 饼图移动端_echarts饼图--数据交互
/*饼图鼠标经过时模块放大功能 */ // 路径配置 require.config({ paths: { echarts: 'js/' } }); // 使用 require( [ 'echarts ...
Echarts饼图常用效果
基本实现 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
echarts饼图属性
1.标题移动到右边原本 legend: {data:['同龄普通孩子','已具备技能','已泛化技能','已掌握技能','学习中'] }, 改 legend: {data:['同龄普通孩子','已具 ...

echarts饼图不同样式

echarts饼图不同样式相关推荐

最新文章

热门文章