Echarts在线免费图表

 
            option = {
  backgroundColor: '#000',
  tooltip: {
    showContent: true,
    trigger: 'axis',
    backgroundColor: 'rgba(8,36,68,.7)',
    color: '#fff',
    textStyle: {
      color: '#fff'
    },
  },
  textStyle: {
    "color": "#c0c3cd",
    "fontSize": 14
  },
  grid: {
    top: '23%',
    left: '14%',
    bottom: '25%',
    right: '10%'
  },
  xAxis: {
    nameTextStyle: {
      "color": "#c0c3cd",
      "padding": [0, 0, -10, 0],
      "fontSize": 14
    },
    axisLabel: {
      interval: 0,
      // rotate: '15',
      // formatter: function (value) {
      //   if (value.length > 3) {
      //     return `${value.slice(0, 2)}...`;
      //   }
      //   return value;
      // },
      textStyle: {
        color: '#639FD2' //坐标轴字颜色
      },
      margin: 15
    },
    axisTick: {
      show: false //隐藏X轴刻度
    },
    splitLine: {     //网格线
      "show": false
    },
    data: ["基地1", "基地2", "基地3", "基地4", "北京新发地", "上海虹桥", "石门批发市场", "岳各庄批发市场"],
    type: "category"
  },
  yAxis: {
    name: '价格（元/Kg）',
    axisLine: {
      show: false, //隐藏X轴轴线
      lineStyle: {
        color: '#11417a'
      }
    },
    axisTick: {
      show: false //隐藏X轴刻度
    },
    axisLabel: {
      textStyle: {
        color: '#fff'
      }
    },
    splitLine: {     //网格线
      "show": false
    }
  },
  series: [
    {
      name: '各品种产量',
      data: [2.8, 2.7, 2.75, 2.68, 3.1, 3.5, 2.9, 2.95],
      "type": "bar",
      "showBackground": true,
      backgroundStyle: {
        color: "#0c3252"
      },
      "barMaxWidth": "auto",
      // "barWidth": 7,
      "barWidth": 17,
      "itemStyle": {
        barBorderRadius: [7, 7, 0, 0], // 圆角（左上、右上、右下、左下）
        normal: {
          //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
          color: function (params) {
            var colorList = ['#027db4', '#03b915', '#ffe400', '#bd4fff', '#8be68e', '#dce19d','#62edf8', '#0676A7'];
            return colorList[params.dataIndex];
          }
        },
        "color": {
          "x": 0,
          "y": 0,
          "x2": 0,
          "y2": 1,
          "type": "linear",
          "global": false,
          "colorStops": [{
            "offset": 0,
            "color": "#0b9eff"
          }, {
            "offset": 1,
            "color": "#63caff"
          }]
        }
      },
      "label": {
        "show": true,
        "position": "top",
        "distance": 10,
        "color": "#fff",
        "fontSize": 13
      }
    },
  ],
};