Echarts可视化教程

  1. 网站首页
  2. 百度ECharts
  3. ECharts实例
  4. ECharts入门
  5. 地图大全
  6. ECharts官网

百度Echarts饼图系列之科技感环图

var scaleData = [{
  'name': 'HTML5',
  'value': 10
},
{
  'name': 'CSS3',
  'value': 10
},
{
  'name': 'NODE',
  'value': 10
},
{
  'name': 'VUE',
  'value': 10
},
{
  'name': 'PHP',
  'value': 10
},
{
  'name': 'MYSQL',
  'value': 10
},
{
  'name': 'CMS',
  'value': 10
},
{
  'name': 'SEO',
  'value': 10
}, {
  'name': 'REACT',
  'value': 10
}, {
  'name': 'ZBLOG',
  'value': 10
}, {
  'name': 'GIT',
  'value': 10
}, {
  'name': '其它',
  'value': 10
}];
var rich = {
  white: {
    color: '#fff',
    align: 'center',
    fontWeight: 'bold',
    padding: [3, 0]
  }
};
var placeHolderStyle = {
  normal: {
    label: {
      show: false
    },
    labelLine: {
      show: false
    },
    color: 'rgba(0, 0, 0, 0)',
    borderColor: 'rgba(0, 0, 0, 0)',
    borderWidth: 0
  }
};
var data = [];


for (var i = 0; i < scaleData.length; i++) {
  data.push({
    value: scaleData[i].value,
    name: scaleData[i].name,
    itemStyle: {
      normal: {
        borderWidth: 4,
        // shadowBlur: 30,
        borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
          offset: 0,
          color: '#af6c8b'
        }, {
          offset: 1,
          color: '#4b4b84'
        }]),
        // shadowColor: color1[i],
        color: 'rgba(255, 153, 153,0)',
        opacity: 0.75,
      }
    }
  }, {
    value: 2,
    name: '',
    itemStyle: placeHolderStyle
  });
}
var seriesObj = [{
  name: '',
  type: 'pie',
  clockWise: false,
  radius: [110, 200],
  hoverAnimation: false,
  itemStyle: {
    normal: {
      label: {
        show: true,
        position: 'inner',
        fontWeight: 'bold',
        formatter: function(params) {
          var percent = 0;
          var total = 0;
          for (var i = 0; i < scaleData.length; i++) {
            total += scaleData[i].value;
          }
          percent = ((params.value / total) * 100).toFixed(0);
          if (params.name !== '') {
            return params.name + '\n{white|' + '占比' + percent + '%}';
          } else {
            return '';
          }
        },
        rich: rich
      },
      labelLine: {
        show: false,
      }
    }
  },
  data: data
}];
option = {
  backgroundColor: '#030c2b',
  tooltip: {
    show: false
  },
  legend: {
    show: false
  },
  toolbox: {
    show: false
  },
  series: seriesObj
}

点击运行 》

点击展开全文

相关文章

  1. 百度Echarts饼图系列之自定义效果
  2. 百度Echarts饼图系列之多个百分比环形图
  3. 百度Echarts饼图统计图表
  4. 百度Echarts饼图标签formatter使用及自定义标签
  5. 百度echarts饼图之太极阴阳图