| echarts饼图颜色设置、位置调整、显示百分比和数据等操作教程 | 您所在的位置：网站首页 › 饼图怎么更改百分比 › echarts饼图颜色设置、位置调整、显示百分比和数据等操作教程 |
echarts饼图颜色设置、位置调整、显示百分比和数据等操作教程
|
echarts饼图颜色设置
echarts 饼图中的每个扇形颜色其实都可以自定义或者随机显示颜色。比如 X 轴是各销售渠道名，那么你可以需要使用全局统一的识别色彩，那么就需要指定每个扇面的颜色。本文讲解 4 种配置修改 ECharts 饼图颜色的方法。 方法一：在 series 内配置饼图颜色 series: [ itemStyle: { normal: { color: function (colors) { var colorList = [ '#fc8251', '#5470c6', '#91cd77', '#ef6567', '#f9c956', '#75bedc' ]; return colorList[colors.dataIndex]; } }, } ]
EChart.js 在 series 中设置饼图颜色的 Demo 源代码： option = { title: { text: '卡拉云流量来源渠道汇总', subtext: '本月数据', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left' }, series: [ { name: 'GA 数据统计', type: 'pie', radius: '50%', data: [ { value: 1017, name: '搜索引擎' }, { value: 583, name: '直接访问' }, { value: 873, name: '微信朋友圈' }, { value: 432, name: '口碑介绍' }, { value: 332, name: '电话销售' }, { value: 678, name: 'Feeds 广告' } ], itemStyle: { normal: { color: function (colors) { var colorList = [ '#fc8251', '#5470c6', '#91cd77', '#ef6567', '#f9c956', '#75bedc' ]; return colorList[colors.dataIndex]; } }, } } ] };方法二：在 option 内配置饼图颜色 color**:**['#3ca170','#5470c6', '#91cd77','#ef6567', '#f9c956','#75bedc'],
EChart.js 在 option 中设置饼图颜色的 Demo 源代码： option = { title: { text: '卡拉云流量来源渠道汇总', subtext: '本月数据', left: 'center' }, tooltip: { trigger: 'item' }, legend: { top: '5%', left: 'center' }, color: ['#fc8251', '#5470c6', '#91cd77', '#ef6567', '#f9c956', '#75bedc'], series: [ { name: 'GA 数据统计', type: 'pie', radius: ['40%', '70%'], avoidLabelOverlap: false, itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 }, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '40', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ { value: 1017, name: '搜索引擎' }, { value: 583, name: '直接访问' }, { value: 873, name: '微信朋友圈' }, { value: 432, name: '口碑介绍' }, { value: 332, name: '电话销售' }, { value: 678, name: 'Feeds 广告' } ] } ] }; 方法三：在 data 内配置饼图颜色 data: [ { value: 917, name: '搜索引擎',itemStyle: {color:'#fc8251'}}, { value: 873, name: '微信朋友圈',itemStyle: {color:'#5470c6'}}, { value: 678, name: 'Feeds 广告',itemStyle: {color:'#91cd77'}}, { value: 583, name: '直接访问',itemStyle: {color:'#ef6567'}}, { value: 432, name: '口碑介绍',itemStyle: {color:'#f9c956'}} ]
EChart.js 在 data 中设置饼图颜色的 Demo 源代码： option = { title: { text: '卡拉云流量来源渠道汇总', subtext: '本月数据', left: 'center' }, legend: { top: 'bottom' }, series: [ { name: 'GA 数据统计', type: 'pie', radius: [50, 250], center: ['50%', '50%'], roseType: 'area', itemStyle: { borderRadius: 8 }, data: [ { value: 917, name: '搜索引擎',itemStyle: {color:'#fc8251'}}, { value: 873, name: '微信朋友圈',itemStyle: {color:'#5470c6'}}, { value: 678, name: 'Feeds 广告',itemStyle: {color:'#91cd77'}}, { value: 583, name: '直接访问',itemStyle: {color:'#ef6567'}}, { value: 332, name: '电话销售',itemStyle: {color:'#f9c956'} }, { value: 432, name: '口碑介绍',itemStyle: {color:'#75bedc'}} ] } ] }; 方法四：配置 ECharts 饼图随机颜色 color: function () { return ( 'rgb(' + [ Math.round(Math.random() * 270), Math.round(Math.random() * 370), Math.round(Math.random() * 400) ].join(',') + ')' ); },
效果图： 
实例代码： 五分钟上手之饼状图 body { background:#01040d; height: 100vh; background: url(images/background.png) no-repeat; background-size: 100% 100%; } .leftBie { border: 1px solid #181482; float: left; height: 500px; margin-right: 19px; width: 600px; } .dataView { text-align: center; position: absolute; left: 168px; bottom: 102px; } .dataView span { width: 120px; display: inline-block; color: #FFFFFF; font-size: 12px; margin: 3.4px; } .CurrentNumber{ width:200px; } .totalNumber{ position: absolute; top: 1px; right: -91px; } var SwissBankApi = 'data.json'; $.ajax({ type: 'get', url: SwissBankApi, dataType: "json", //返回数据形式为json success: function(data) { totalNumber(data); ProportionRegional(data); }, error: function(errorMsg) { //请求失败时执行该函数 alert("图表请求数据失败!"); } }); function totalNumber(data) { var html = ""; html += ''; $.each(data.content, function(i, item) { html += '当前人数:' + item.count + '人'; }); html += ''; html += '总人数:' + data.count + '人'; $(".dataView").html(html); } function ProportionRegional(data) { //基于准备好的dom，初始化echarts实例 var cChart = echarts.init(document.getElementById('main')); var names = []; //类别数组（用于存放饼图的类别） var brower = []; //请求成功时执行该函数内容，result即为服务器返回的json对象 $.each(data.content, function(index, item) { names.push(item.name); //挨个取出类别并填入类别数组 brower.push({ name: item.name, value: item.count }); }); cChart.setOption({ //加载数据图表 title: { text: '区域人数比例', // subtext:'', x: 'left', y: '7px', textStyle: { //图例文字的样式 color: '#fff', //字体风格,'normal','italic','oblique' fontStyle: 'normal', //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400... fontWeight: '200', //字体系列 fontFamily: 'sans-serif', //字体大小 fontSize: 16 }, textAlign: 'left' }, tooltip: { trigger: 'item', formatter: '{a} {b} : {c} ({d}%)' }, legend: { orient: 'vertical', /* x: 'left', y: 'top', */ textStyle: { //图例文字的样式 color: '#fff', fontSize: 12 }, type: 'scroll', left: 80, bottom: 0, data: names }, series: [{ name: '', type: 'pie', radius: '45%', center: ['50%', '35%'], data: brower, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }, normal: { color: function(params) { //自定义颜色 var colorList = ['#e161ae', '#37a2d8', '#64e1e3', '#fedb5b', '#fda07e' ]; return colorList[params.dataIndex] } } } }] }); }data.json { "count": 299, "content": [{ "id": "fid--c6a0a81_170f6d2aa18_57ca", "name": "病房", "lon": 0, "lat":12, "count": 12 }, { "id": "fid--c6a0a81_170f6d2aa18_5763", "name": "护士站", "lon": 0, "lat": 12, "count": 11 }, { "id": "fid--c6a0a81_170f6d2aa18_5763", "name": "医务室", "lon": 0, "lat": 0, "count": 13 }, { "id": "fid--c6a0a81_170f6d2aa18_5763", "name": "缴费大厅", "lon": 0, "lat": 0, "count": 14 }, { "id": "fid--c6a0a81_170f6d2aa18_5763", "name": "住院部", "lon": 0, "lat": 0, "count": 15 }] } 饼状图位置实例2效果图： 代码：
option = {
title : {
text: '图例形状及位置',
subtext: '',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} {b} : {c} ({d}%)"
},
legend: {
orient: '',
x: 'left', //可设定图例在左、右、居中 left center right
y: 'bottom', //可设定图例在上、下、居中left center right
data: [
{
name:'圆圈',
icon : 'circle', // 图例形状：圆圈
textStyle: {
color: 'red' // 图例文字颜色
}
},
{
name:'长方形',
icon : 'rect', // 图例形状：长方形
textStyle: {
color: '#fff' // 图例文字颜色
}
},
{
name:'圆角长方形',
icon : 'roundRect', // 图例形状：圆角长方形
textStyle: {
color: '#fff' // 图例文字颜色
}
},
{
name:'三角形',
icon : 'triangle', // 图例形状：三角形
textStyle: {
color: 'blue' // 图例文字颜色
}
},
{
name:'菱形',
icon : 'diamond', // 图例形状：菱形
textStyle: {
color: '#fff' // 图例文字颜色
}
},
{
name:'箭头',
icon : 'arrow', // 图例形状：箭头
textStyle: {
color: '#fff' // 图例文字颜色
}
},
{
name:'圆形',
icon : 'pin', // 图例形状：圆形
textStyle: {
color: '#fff' // 图例文字颜色
}
},
{
name:'自定义图片',
textStyle: {
color: 'red' // 图例文字颜色
},
icon:'image://./img/pie_1.png'//格式为'image://+icon文件地址'，其中image::后的//不能省略
},
],
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'圆圈'},
{value:310, name:'长方形'},
{value:234, name:'圆角长方形'},
{value:135, name:'三角形'},
{value:1548, name:'菱形'},
{value:1548, name:'箭头'},
{value:1548, name:'圆形'},
{value:1548, name:'自定义图片'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
echarts饼图显示百分比
效果如下：
echart 3.0写法： option = { //提示框组件,鼠标移动上去显示的提示内容 tooltip: { trigger: 'item', formatter: "{a} {b}: {c} ({d}%)"//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。 }, //图例 legend: { //图例垂直排列 orient: 'vertical', x: 'left', //data中的名字要与series-data中的列名对应，方可点击操控 data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, series: [ { name:'访问来源', type:'pie', //饼状图 // radius: ['50%', '70%'], avoidLabelOverlap: false, //标签 label: { normal: { show: true, position: 'inside', formatter: '{d}%',//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比 textStyle : { align : 'center', baseline : 'middle', fontFamily : '微软雅黑', fontSize : 15, fontWeight : 'bolder' } }, }, data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ] } ] };echart 2.0写法： //其余部分相同，label部分有所区别,在2.0中label是itemStyle的一项属性 series: [ { name:'访问来源', type:'pie', //饼状图 // radius: ['50%', '70%'], avoidLabelOverlap: false, //标签 itemStyle : { normal : { label:{ show : true, position : 'inner', formatter: '{d}%', distance : 0.7 //这项是标识距离中心点的距离 textStyle : { align : 'center', baseline : 'middle', fontFamily : '微软雅黑', fontSize : 15, fontWeight : 'bolder' } }, labelLine:{ show : false } } }, data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ] } ] echarts饼图显示数据用法：在series里添加label标签 option = { series : [ { name: '访问来源', type: 'pie', radius : '55%', center: ['50%', '60%'], label: { normal: { show: true, formatter: '{b}: {c}({d}%)' } }, data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:1548, name:'搜索引擎'} ] } ] };效果如下图：
|
【本文地址】
公司简介
联系我们