Echarts在线免费图表

 
            var gain = 0.9;
var gap = 0;
var myColor = ['#f5804d', '#09bcb7', '#6851f1', '#13b5b1','#fccb05','#8bd46e','#248ff7'];
var myBgColor = [
//   'rgba(230,56,16,0.3)',
//   'rgba(255,107,0,0.3)',
//   'rgba(227,182,31,0.3)',
  'rgba(19,181,177,0.3)',
//   'rgba(230,56,16,0.3)',
//   'rgba(255,107,0,0.3)',
//   'rgba(227,182,31,0.3)',
//   'rgba(19,181,177,0.3)',
//   'rgba(230,56,16,0.3)',
//   'rgba(255,107,0,0.3)',
//   'rgba(227,182,31,0.3)',
//   'rgba(19,181,177,0.3)',
//   'rgba(230,56,16,0.3)',
//   'rgba(255,107,0,0.3)',
//   'rgba(227,182,31,0.3)',
//   'rgba(19,181,177,0.3)'
];
//柱子数据
var data = [80,70,100,80,35,100,40,100,100,100,80,100,40,60,40];
var option = {
    backgroundColor: '#081736',
    tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
          label: {
            show: true
          }
        }
      },
  grid: {
    left: '3%',
    top: '20%',
    right: '2%',
    bottom: '20%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(160,160,160,0.3)'
        }
      },
      axisLabel: {
        textStyle:{
            fontSize:14,
            color:'#fff'
        }
      },
      data: [
        '北方明珠商业综合体',
        '城固县',
        '陕西果业',
        '年产6万吨',
        '蔬菜冷链物流集配中心',
        '莲花池村',
        '城固光项目',
        '城固酒业公司',
        '东鑫公司年',
        '信安公司',
        '莲花城北',
        '城固县',
        '城北九年制学校',
        '城固县第二人民医院',
        '湑水村国土空间再造',]

    },
    {
      type: 'category',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: true,
        textStyle:{
            fontSize:14,
            color:'#fff'
        }
      },
      splitArea: {
        show: false
      },
      splitLine: {
        show: false
      },
      data: []
    }
  ],
  yAxis: {
    type: 'value',
    name: '%',
    
    nameTextStyle: {
      color: '#ffffff',
      fontSize: 13
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(160,160,160,0.3)'
      }
    },
    axisLabel: {
      textStyle: {
        color: 'rgba(255,255,255,0.8)',
        fontSize: 14 * gain
      }
    }
  },
  series: [
    {
      type: 'bar',
      xAxisIndex: 1,
      itemStyle: {
        normal: {
          show: true,
          color: function (params) {
            var num = myBgColor.length;
            return myBgColor[params.dataIndex % num];
          },
          barBorderRadius: 50,
          borderWidth: 0,
          borderColor: '#333'
        }
      },
    //   label: {
    //     normal: {
    //       show: true,
    //       formatter: function (params) {
    //         var stuNum = 0;
    //         data.forEach(function (value, index, array) {
    //           if (params.dataIndex == index) {
    //             stuNum = value;
    //           }
    //         });
    //         return stuNum;
    //       },
    //       position: 'top',
    //       textStyle: {
    //         color: function (params) {
    //           var num = myBgColor.length;
    //           return myBgColor[params.dataIndex % num];
    //         },
    //         fontSize: 25 * gain
    //       }
    //     }
    //   },
      barWidth: '30%',
      data: [100, 100, 100, 100,100, 100, 100, 100,100, 100, 100, 100,100, 100, 100]
    },
    {
      type: 'bar',
      itemStyle: {
        normal: {
          show: true,
          color: function (params) {
            var num = myColor.length;
            return myColor[params.dataIndex % num];
          },
          barBorderRadius: 50,
          borderWidth: 0,
          borderColor: '#333'
        }
      },
      label: {
        normal: {
          show: true,
          position: 'top',
          textStyle: {
                fontSize: 14
            }
        }
      },
      barWidth: '30%',
      data: data
    }
  ]
};