柱状图颜色

  1. color: ["#2f89cf"]

修改图表大小

  1. grid: {
  2.      left: "0%",
  3.      top: "10px",
  4.      right: "0%",
  5.      bottom: "4%",
  6.      containLabel: true
  7.    },

X、Y轴相关设置 xAxis

刻度标签

  1.  axisLabel: {
  2.           color: "rgba(255,255,255,.6)",
  3.           fontSize: "12"
  4.         },

隐藏x轴

  1. xAxis: {
  2.       show: false
  3.     },

轴线样式

  1. //不显示y轴线条
  2. axisLine: {
  3.     show: false
  4.         },
  5. // 不显示刻度
  6. axisTick: {
  7.    show: false
  8. },

文字颜色

  1.  axisLabel: {
  2.           color: "#fff"
  3.    },

样式不显示

  1. axisLine: {
  2.        show: false
  3.        // 如果想要设置单独的线条样式 
  4.        // lineStyle: {
  5.        //    color: "rgba(255,255,255,.1)",
  6.        //    width: 1,
  7.        //    type: "solid"
  8.       }
  9.    }

Y轴分隔线

  1. splitLine: {
  2.        lineStyle: {
  3.           color: "rgba(255,255,255,.1)"
  4.         }
  5.    }

坐标轴反向

  1. inverse:true

圆柱样式

  1. series: [
  2.           {
  3.               name: '直接访问',
  4.               type: 'bar',
  5.               barWidth: '35%',//宽度
  6.               data: [200, 300, 300, 900, 1500, 1200, 600],
  7.               itemStyle:{
  8.                 barBorderRadius: 5 //修改柱子圆角
  9.               }
  10.           }
  11.       ]
  1. name: "条",
  2. //柱子的宽度
  3. barWidth: 10,
  4. // 柱子设为圆角
  5. itemStyle: {
  6.     normal: {
  7.       barBorderRadius: 20,       
  8.     }
  9. },
  11. 柱子变为边框
  12. itemStyle: {
  13.             color: "none",
  14.             borderColor: "#00c1de",
  15.             borderWidth: 3,
  16.             barBorderRadius: 15
  17.         },

图形上的文本标签

  1. label: {
  2.     normal: {
  3.          show: true,
  4.          // 图形内显示
  5.          position: "inside",
  6.          // 文字的显示格式
  7.          formatter: "{c}%" //会自动解析数据 data里面的数据
  8.      }
  9. },

不同柱子分别的颜色

  1. var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
  2. itemStyle: {
  3.                   color: function(params){
  4.                       return myColor[params.dataIndex]
  5.                   }
  6.               },
  7. //params 传进来的柱子对象

不同坐标系柱子重叠(index)

tip:必须有多个坐标系才可以使用index

  1. yAxisIndex: 0

柱子间距

同一系列柱子的间距

  1. {
  2.                     barCategoryGap: 50,
  3.                 },

鼠标悬停样式

  1. tooltip: {
  2.           trigger: 'axis',
  3.           axisPointer: {            
  4.               type: 'shadow/line'    //样式为悬停或线条    
  5.           }
  6.       }

更换数据

  1.    // x轴中更换data数据
  2.     data: [ "旅游行业","教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业" ],
  3.    // series 更换数据
  4.     data: [200, 300, 300, 900, 1500, 1200, 600]