echarts饼图美化

先上一张效果图

echarts饼图美化_第1张图片

 上代码 

option = {
  tooltip: {
    formatter: '{a} 
{b} : {c}%' }, series: [ { name: '文件分类', type: 'pie', radius: ['36%', '49%'], center: ['50%', '45%'], avoidLabelOverlap: false, animation: false, label: { fontSize: 16, formatter: '{d}%', color: 'black', padding: [-15, -24, 0, -30], position: 'outer', alignTo: 'labelLine', bleedMargin: 5, margin: 20 }, labelLine: { normal: { length: 35, length2: 75 } }, emphasis: { label: { show: true, fontSize: 25, fontWeight: 'bold' } }, data: [{ value: 1048, name: 'Search Engine' }, { value: 735, name: 'Direct' }, { value: 580, name: 'Email' }, { value: 484, name: 'Union Ads' }, { value: 300, name: 'Video Ads' }] }, {// 下面几部分属于样式 name: '内圈', type: 'pie', radius: ['0%', '28%'], center: ['50%', '45%'], avoidLabelOverlap: false, minShowLabelAngle: 180, tooltip: { show: false, trigger: 'none', showContent: false, triggerOn: 'none' }, label: { show: false }, cursor: 'auto', emphasis: { disabled: true, label: { show: false, fontSize: '0' }, labelLine: { show: false } }, labelLine: { show: false }, itemStyle: { borderWidth: 0, borderColor: 'white', borderType: 'solid' }, data: [ { value: 105, name: '', itemStyle: { color: { type: 'radial', x: 0.5, y: 0.5, r: 0.5, colorStops: [{ offset: 0, color: '#123863' // 0% 处的颜色 }, { offset: 1, color: '#1648A3' // 100% 处的颜色 }], global: false // 缺省为 false } }} ] }, { type: 'gauge', min: 0, max: 100, splitNumber: 50, radius: '33%', startAngle: 0, endAngle: 1, center: ['50%', '45%'], axisLine: { lineStyle: { color: [[1, '#f00']], width: 18, // 需要和splitLine.distance 值一样 保证分辨率不同时位置一样 opacity: 0 } }, splitLine: { distance: -18, length: 4, lineStyle: { color: '#16CEF3' } }, axisLabel: { show: false }, detail: { show: false }, axisTick: { show:false, }, }, { name: '', type: 'pie', hoverAnimation: false, radius: ['58%', '59%'], center: ['50%', '45%'], avoidLabelOverlap: false, minShowLabelAngle: 180, startAngle: 40, cursor: 'auto', tooltip: { show: false, trigger: 'none', showContent: false, triggerOn: 'none' }, label: { show: false }, emphasis: { label: { show: false, fontSize: '0' }, labelLine: { show: false } }, labelLine: { show: false }, itemStyle: { borderWidth: 0, borderColor: 'white', borderType: 'solid' }, data: [ { value: 200, name: '', itemStyle: { color: '#11537C' }}, { value: 100, name: '', itemStyle: { color: 'rgba(250,250,250,0)' }}, { value: 200, name: '', itemStyle: { color: '#11537C' }}, { value: 100, name: '', itemStyle: { color: 'rgba(250,250,250,0)' }}, { value: 200, name: '', itemStyle: { color: '#11537C' }}, { value: 100, name: '', itemStyle: { color: 'rgba(250,250,250,0)' }} ] }, { name: '', type: 'pie', hoverAnimation: false, radius: ['56%', '61%'], center: ['50%', '45%'], avoidLabelOverlap: false, minShowLabelAngle: 180, startAngle: 40, cursor: 'auto', tooltip: { show: false, trigger: 'none', showContent: false, triggerOn: 'none' }, label: { show: false }, emphasis: { label: { show: false, fontSize: '0' }, labelLine: { show: false } }, labelLine: { show: false }, itemStyle: { borderRadius: 10, // borderColor: '#fff', // borderWidth: 2, borderType: 'solid' }, data: [ { value: 12, name: '', itemStyle: { color: '#3284A8' }}, { value: 190, name: '', itemStyle: { color: 'rgba(250,250,250,0)' }}, { value: 12, name: '', itemStyle: { color: '#3284A8' }}, { value: 100, name: '', itemStyle: { color: 'rgba(250,250,250,0)' }}, { value: 12, name: '', itemStyle: { color: '#3284A8' }}, { value: 190, name: '', itemStyle: { color: 'rgba(250,250,250,0)' }}, { value: 12, name: '', itemStyle: { color: '#3284A8' }}, { value: 100, name: '', itemStyle: { color: 'rgba(250,250,250,0)' }}, { value: 12, name: '', itemStyle: { color: '#3284A8' }}, { value: 190, name: '', itemStyle: { color: 'rgba(250,250,250,0)' }}, { value: 12, name: '', itemStyle: { color: '#3284A8' }}, { value: 100, name: '', itemStyle: { color: 'rgba(250,250,250,0)' }} ] } ] };

echarts饼图美化_第2张图片

 

说明:

1 复制代码到echarts示例中,全部粘贴替换就可看到效果

2 echarts需要5以上版本

3 axisLine.lineStyle.width 需要和splitLine.distance 值一样 保证分辨率不同时位置一样

以此记录,需要拿走不谢

你可能感兴趣的:(echarts,前端,javascript)