Echarts在线免费图表

 
              // app.title = '极坐标系下的堆叠柱状图';
  var legendName=[
    "0.0-0.2 m/s",
    "0.3-1.5 m/s",
    "1.6-3.3 m/s",
    "3.4-5.4 m/s",
    "5.5-7.9 m/s",
    "8.0-10.7 m/s",
    "10.8-13.8 m/s",
    "13.9-17.1 m/s",
    "17.2-20.7 m/s",
    "20.8-24.4 m/s",
    "24.5-28.4 m/s",
    "28.5-32.6 m/s",
    ">32.6 m/s"
    ]
var vocs = [
    "0.3 mg/m³",
    "0.4 mg/m³",
    "0.3 mg/m³",
    "0.3 mg/m³",
    "0.5 mg/m³",
    "0.23 mg/m³",
    "0.2 mg/m³",
    "0.7 mg/m³",
    "0.6 mg/m³",
    "0.2 mg/m³",
    "0.1 mg/m³",
    "0.1 mg/m³",
    "0.6 mg/m³",
    
    ]
option = {
    tooltip: {
        trigger: 'item',
    },
    color:["#0001F7","#00B8FE","#00FFFF","#00FF68","#BEFE00","#FFFF00","#FFA800","#E10100"],
    angleAxis: {
        type: 'category',
        data: ["北", "北东北", "东北", "东东北", "东", "东东南", "东南", "南东南", "南", "南西南", "西南", "西西南", "西", "西西北", "西北", "北西北"],
        boundaryGap: false,//标签和数据点都会在两个刻度之间的带(band)中间
        axisTick: {
            show: false//是否显示坐标轴刻度
        },
        splitLine: {
            show: true,
            lineStyle:{
            },
        },
        axisLabel:{
            show: true,
        },
    },
    radiusAxis: {
        min:0,
        max:100,
        axisLabel: {
            show: false
        },
        axisTick: {
            show: false //是否显示坐标轴刻度
        },
        axisLine:{
            show: false //是否显示坐标轴轴线
        },
    },
    legend: {
      orient: 'vertical', // horizontal
      show: true,
      data: legendName,
      right: "5%",
      top: "40%",
      icon: "roundRect", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
      itemGap: 10,
      itemHeight: 14,
      itemWidth: 14,
      inactiveColor: "#789", // 图例关闭时的颜色。
      textStyle: {
          color: "#000"
      }
    },
    polar: {
      radius: "60%", // 半径
      center: ["40%", "50%"] // 中心位置
    },
    series: [
      {
        type: 'bar',
        data: [17, 2, 18, 4,
            2,3,4,6,
            1, 6, 3, 4,
            2,3,4,6],
        coordinateSystem: 'polar',
        name: legendName[0],
        stack: 'a'
    }, {
      type: 'bar',
      data: [7, 12, 13, 2,
        2,3,4,6,
        1, 2, 3, 2,
        2,3,4,6],
      coordinateSystem: 'polar',
      name: legendName[1],
      stack: 'a'
    }, {
      type: 'bar',
      data: [10, 12, 13, 4,
        2,13,14,26,
        11, 12, 23, 34,
        12,33,34,32],
      coordinateSystem: 'polar',
      name: legendName[2],
      stack: 'a'
    }, {
      type: 'bar',
      data: [10, 2, 13, 2,
        2,3,4,6,
        1, 2, 3, 2,
        2,3,4,6],
      coordinateSystem: 'polar',
      name: legendName[3],
      stack: 'a'
    }, {
      type: 'bar',
      data: [10, 2, 13, 4,
        2,3,4,6,
        1, 2, 3, 4,
        1, 2, 3, 1],
      coordinateSystem: 'polar',
      name: legendName[4],
      stack: 'a'
    }, {
      type: 'bar',
      data: [10, 2, 13, 2,
        2,3,4,6,
        1, 2, 3, 2,
        1, 2, 3, 1],
      coordinateSystem: 'polar',
      name: legendName[5],
      stack: 'a'
    }, {
      type: 'bar',
      data: [10, 2, 13, 4,
        2,3,4,6,
        1, 2, 3, 4,
        2,3,4,2],
      coordinateSystem: 'polar',
      name: legendName[6],
      stack: 'a'
    }, {
      type: 'bar',
      data: [1, 0, 0, 0,
        0, 0, 0, 0,
        0, 0, 0, 0,
        0, 0, 0, 0],
      coordinateSystem: 'polar',
      name: legendName[7],
      stack: 'a'
    }]
  }