The meaning of each attribute of echarts column chart

The chart is as follows:

code show as below:

import * as echarts from "echarts";//引入echarts
let chartDom = document.getElementById("histogram");
let chart = 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 && chart.setOption(option);

Guess you like

Origin blog.csdn.net/cdd9527/article/details/128735716