Echarts可视化教程

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

百度echarts做一个多环饼图图表

var names = ['A', 'B', 'C', 'D', 'E', 'F'];
var values = [500, 300, 350, 220, 180, 210];
var colorList = ["#2fe885", "#fbf935", "#f8b61c", "#f26829", '#e84250', '#d473f8'];
var data = [];
for (var i = 0; i < names.length; i++) {
  data.push({
    name: names[i],
    value: values[i]
  })
}
data.reverse();

var itemStyle = {
  normal: {
  borderColor: '#0A1934',
  borderWidth: 5,
    color: function(params) {
      return colorList[params.dataIndex]
    }
  }
}
var radius1 = ['30%', '37%'], // 饼图
  radius3 = ['43%', '45%'], // 线圈

option = {
  backgroundColor: "#0B1321",
  tooltip: {
    trigger: 'item',
  },
  title: [{
    text: '浏览量',
    x: '45%',
    y: '47%',
    textStyle: {
      color: '#FFF',
      fontSize: 26
    }
  }],
  series: [{
    type: 'pie',
    zlevel: 3,
    radius: radius1,
    center: ['50%', '50%'],
    itemStyle: itemStyle,
    labelLine: {
      show: false,
      normal: {
        length: 5,
        length2: 0,
          lineStyle: {
            color: 'transparent'
          }
        }
    },
    label: {
      normal: {
        formatter: params => {
          return '●';
        }
      }
    },
    data: data,
  },
  {
    type: 'pie',
    zlevel: 1,
    silent: true, 
    radius: radius3,
    center: ['50%', '50%'],
    itemStyle: {
      normal: {
        color: function(params) {
          return colorList[params.dataIndex]
        }
      }
    },
    labelLine: {
      show: false,
      normal: {
        length: 10,
        length2: 0,
        lineStyle: {
          color: 'transparent'
        }
      }
    },
    label: {
      show: true
    },
    data: data,
  }]
};
点击展开全文

相关文章

  1. 百度Echarts中国相声名家师承关系图
  2. ECharts水球图图表展示数据占比和目标完成情况
  3. 如何利用ECharts中使用地图热力图展示城市热度
  4. 如何利用ECharts中使用地图展示数据
  5. 如何利用Highcharts中使用烛台图来展示数据