echarts实现柱状图的参数修改以及点击提示的自定义内容

最近在做一个图表的项目，用到了echarts组件，官网上的参数实在是太多看的眼花缭乱的，发个博客记录一下柱状图常用的属性

实现效果：

完整代码：

　　　import * as echarts from "echarts";//引入echarts

 

 　　let chartDom = document.getElementById("histogram");
    let echartsInstance = echarts.init(chartDom); //初始化实例
    let option = {
      color: ["#428FFC"], //柱状图颜色
      tooltip: {//提示框组件
        trigger: "axis",
        axisPointer: {
          type: "none", //虚线隐藏
        },
        formatter: function (params) {//提示内容
          let relVal = "次数";
          relVal +=
            "<br/>" +
            params[0].marker +
            params[0].name +
            " : " +
            params[0].value.toLocaleString();
          return relVal;
        },
      },
      xAxis: {
        type: "category", //类目轴，适用于离散的类目数据
        data:["炭蛆病","蚜虫","茶饼病","炭蛆病","蚜虫","茶饼病","炭蛆病","蚜虫"], //x轴数据

        axisLabel: { rotate: 30, color: "#70B1FF" }, //文字倾斜30度  文本颜色
        axisTick: { show: false }, //隐藏x轴刻度
      },
      yAxis: {
        type: "value", //数值轴，适用于连续数据
        name: "识别次数", //y坐标轴名称
        nameTextStyle: { color: "#70B1FF" }, //识别次数文本颜色
        splitLine: { lineStyle: { color: "#B1DEFF" } }, //y轴线的样式
        axisLabel: { color: "#70B1FF" }, //y轴文字颜色
        max: 60,
        min: 0,
        splitNumber: 3,//每格刻度 60/3=20 间隔刻度为20
      },
      series: [
        {
          barWidth: 20, //柱状图的宽度
          data: [23, 27, 46, 16, 37, 51, 45, 20], //每个柱状的高度
          type: "bar", //bar 柱状图 line 线性图
          label: { show: true, color: "#428FFC", position: "top" },//柱状图上方显示数据
          showBackground: true,//柱状图是否有背景色
          backgroundStyle: { color: "rgba(147,159,187,0.2)" }, //柱状图背景颜色
        },
      ],
    };
    option && echartsInstance.setOption(option);