JAVASCRIPT
VUE
REACT
NODE
ES6
TYPESCRIPT

Echart配置柱状图

2020. 10. 20    

Echart配置柱状图相关

option = {
  tooltip: {
    trigger: "axis",
    //鼠标移入显示线还是阴影
    axisPointer: {
      type: "line" // 默认为直线,可选为:'line' | 'shadow'
    },
    extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
    backgroundColor: "rgba(255,255,255,.8)",
    textStyle: {
      color: "#000",
      fontSize: 12,
    },
  },
  xAxis: {
    show: false,
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yAxis: {
    type: 'value',
    //刻度线样式
    splitLine: {
      lineStyle: {
        type: "dashed"
      }
    },
    //坐标轴文字相关
    axisLabel: {
      show: true,
      textStyle: {
        color: '#000',    //更改坐标轴文字颜色
        fontSize: 12     //更改坐标轴文字大小
      }
    },
    //轴线颜色
    axisLine: {
      lineStyle: {
        color: '#DEDEDE',
      },
    },
    //坐标轴刻度
    axisTick: {
      show: false,
    },
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar',
    //主状图柱子相关设置的圆角
    itemStyle: {
      normal: {
        //柱形图圆角,初始化效果
        barBorderRadius: [10, 10, 0, 0],
        // label: {
        // show: true,//是否展示
        //     textStyle: {
        //         fontWeight:'bolder',
        //         fontSize : '12',
        //         fontFamily : '微软雅黑',
        //     }
        // }
      }
    },
  }]
};