Echarts可视化教程

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

百度echarts多图表联合效果图(饼图/柱状图)

option = {
  backgroundColor: '#0A1934',
  title: [{
    text: '95%',
    textStyle: {
      color: '#22ac38',
      fontSize: 35
    },
    itemGap: 20,
    left: '20%',
    top: '40%'
  },{
    text: '总体完成度',
    textStyle: {
      color: '#fff',
      fontSize: 24,
      fontWeight:'normal'
    },
    itemGap: 20,
    left: '17%',
    top: '50%'
  }],
  grid: [{
    top: '10%',
    width: '50%',
    left: '45%',
    containLabel: true
  }],
  angleAxis: {
    polarIndex: 0,
    min: 0,
    max: 100,
    show: false,
    boundaryGap: ['40%', '40%'],
    startAngle: 90,
  },
  radiusAxis: {
    type: 'category',
    show: true,
    axisLabel: {
      show: false,
    },
    axisLine: {
      show: false,

    },
    axisTick: {
      show: false
    },
  },
  polar: [{
    center: ['25%', '50%'], //中心点位置
    radius: '80%' //图形大小
  }],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'none'
    },
    formatter: function(params) {
      return params[0].name + '<br/>' +
        "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
        params[0].seriesName + ' : ' + params[0].value + '%<br/>'
    }
  },
  xAxis: {
    show: false,
    type: 'value'
  },
  yAxis: [{
    type: 'category',
    inverse: true,
    axisLabel: {
      show: false,
      textStyle: {
        color: '#fff'
      },
    },
    splitLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    data: ['标书完成率', '研发完成率', '实施部署完成率', '合同完成率']
  }, {
    type: 'category',
    inverse: true,
    axisTick: 'none',
    axisLine: 'none',
    show: true,
    axisLabel: {
      textStyle: {
        color: '#fff',
        fontSize: '12'
      },
      formatter: function(value) {
        return value + "%";
      },
    },
    data: [88, 70, 25, 68]
  }],
  series: [{
      name: '完成率',
      type: 'bar',
      zlevel: 1,
      silent:false,
      label: {
        normal: {
          color: '#fff',
          show: true,
          position: [0, '-24px'],
          textStyle: {
            fontSize: 16
          },
          formatter: function(a, b) {
            return a.name
          }
        }
      },
      itemStyle: {
        normal: {
          barBorderRadius: 30,
          color: '#14d88e',
        },
      },
      barWidth: 20,
      data: [50.5, 50, 50, 50],
    },
    {
      name: '背景',
      type: 'bar',
      barWidth: 20,
      barGap: '-100%',
      data: [100, 100, 100, 100],
      itemStyle: {
        normal: {
          color: '#f3f3f7',
          barBorderRadius: 30,
        }
      },
    },
    {
      type: 'bar',
      z: 10,
      name: "完成度",
      data: [50],
      showBackground: false,
      backgroundStyle: {
        borderWidth: 10,
        width: 10
      },
      coordinateSystem: 'polar',
      roundCap: true,
      barWidth: 35, //大的占比环
      itemStyle: {
        normal: {
          opacity: 1,
          color: "#14d88e"
        }
      },
    },
    {
      type: 'pie',
      name: '内层细圆环',
      radius: ['46%', '34%'],
      center: ['25%', '50%'], //中心点位置
      startAngle: 90,
      hoverAnimation: false,
      clockWise: true,
       silent: true,
      itemStyle: {
        normal: {
          color: '#f3f3f7',
          shadowBlur: 0,
          shadowColor: '#66666a',
        }
      },
      tooltip: {
        show: false,
      },
      label: {
        show: false
      },
      data: [100]
    }
  ]
};
点击展开全文

相关文章

  1. 百度Echarts柱状图圆角效果
  2. 百度Echarts横向柱状图显示最大值和最小值以及平均值
  3. 百度Echarts柱状图显示最大值和最小值以及平均值
  4. 百度echarts之3d动态柱状图(实时变动)
  5. 百度echarts横向柱状图(显示百分比)