Echarts在线免费图表

 
             var spNum = 5, _max = 100;
    var y_data = ['初设批复', '施工期', '完建期', '已竣工'];
    var _datamax = [100, 100, 100, 100],
      _data1 = [
        { value: 20, data: 10 },
        { value: 20, data: 10 },
        { value: 20, data: 10 },
        { value: 20, data: 10 }
      ],
      _data2 = [
        { value: 30, data: 30 },
        { value: 30, data: 30 },
        { value: 30, data: 30 },
        { value: 30, data: 30 }
      ];
    var fomatter_fn = function (v) {
      return v.value + '%'
    }
    var _label = {
      normal: {
        show: true,
        position: 'inside',
        formatter: fomatter_fn,
        textStyle: {
          color: '#fff',
          fontSize: 16
        }
      }
    };
option = {
   backgroundColor:"#000000",
     grid: {
        containLabel: true,
        top: '16%',
        left: 0,
        right: 6,
        bottom: '10%'
      },
      legend: {
        data: [
          { name: "已处置", icon: "circle" },
          { name: "未处置", icon: "circle" },
        ],
        // 大小 和位置 文字样式
        itemGap: 12,
        /*    right: 20,*/
        textStyle: {
          fontSize: 14,
          color: "#ffffff",
          fontFamily: "SourceHanSansCN-Regular"
        }
      },
      tooltip: {
        show: true,
        backgroundColor: '#fff',
        borderColor: '#ddd',
        borderWidth: 1,
        textStyle: {
          color: '#3c3c3c',
          fontSize: 16
        },
        formatter: function (p) {
          return '名称：' + p.seriesName + '<br>' + '数量：' + p.data.data + '<br>' + '占比：' + p.value + '%';
        },
        extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.1)'
      },
      xAxis: {
        splitNumber: spNum,
        interval: _max / spNum,
        max: _max,
        axisLabel: {
          show: false,
          formatter: function (v) {
            var _v = Number((v / _max * 100).toFixed(0));
            return _v == 0 ? _v : _v + '%';
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        }
      },
      yAxis: [{
        data: y_data,
        axisLabel: {
          fontSize: 16,
          color: '#fff'
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        }
      }, {
        show: false,
        data: y_data,
        axisLine: {
          show: false
        }
      }],
      series: [{
        type: 'bar',
        silent: true,
        yAxisIndex: 1,
        barWidth: 20,
        itemStyle: {
          color: 'RGBA(41, 82, 180, 0.5)',
          emphasis: {
            color: 'rgba(255,255,255,0.3)'
          }
        },
        data: _datamax
      }, {
        type: 'bar',
        name: '已处置',
        stack: '2',
        label: _label,
        legendHoverLink: false,
        barWidth: 20,
        itemStyle: {
          color: '#01AEFC',
          emphasis: {
            color: '#00BCD4'
          }
        },
        data: _data1
      }, {
        type: 'bar',
        name: '未处置',
        stack: '2',
        legendHoverLink: false,
        barWidth: 20,
        label: _label,
        itemStyle: {
          color: '#FFD200',
          emphasis: {
            color: '#FF9800'
          }
        },
        data: _data2
      },
      ]
};