This is the fourth day of my participation in the August Text Challenge.More challenges in August

Series of articles:

  1. Echart Bar Bar style details
  2. Transverse histogram of Echarts Bar

Basic configuration

Title title component

let title = {
  text: "Cumulative Consumption trend"./ / title
  subtext: "Year-on-year, accumulated consumption increased by 200 yuan."./ / subtitle
  top: -5./ / position
  left: -5./ / position
  subtextStyle: {
    // Subtitle style
    color: "# 808080".fontSize: 12,}};Copy the code

Legend Legend component

  1. Set the legend to a circle (icon) and change the legend size (itemHeight) and Spacing (itemGap)

  2. Change the distance between the legend text and the chart: textstyle. padding, when set to negative, to reduce the spacing

let legend = {
  top: 24.// Position, and subtitle a row
  right: 0.// Position, and subtitle row, and on the right
  icon: "circle".// legend shape
  // itemWidth: 25, // The graphic width of the legend tag
  itemHeight: 6.// Figure height of the legend mark
  itemGap: 24.// Illustrate the spacing between items
  itemStyle: {}, // The graphic style of the legend
  textStyle: {
    // Legend text properties
    fontSize: 12.color: "# 333".padding: [0.0.0, -8].// Modify the text and icon distance}};Copy the code

Grid Drawing grid

Generally used to adjust the properties of the drawing area, such as position, distance, etc

ler grid = {
  top: 70.left: 0.right: 12.bottom: 0.containLabel: true,}Copy the code

XAxis shaft

  1. By default, only the first and last coordinates are displayed (interval), but the corresponding X-axis label and tooltip configuration should be displayed when the mouse is hovering (see details)tooltipConfiguration)
  2. Indicator related configuration (axisLine.axisPointer)
let xAxis = R.mergeDeepRight(xAxis, {
  type: "category".boundaryGap: false./ / no white space
  axisLabel: {
    interval: 50.// Only maximum and minimum coordinates are displayed
    showMinLabel: true.// Display the minimum label
    showMaxLabel: true.// Display the maximum label
  },
  axisLine: {
    lineStyle: {
      type: "dashed".// The line indicator is dashed
      // dashOffset: 5 // Offset of the dashed line}},axisPointer: {
    type: "line".// Line indicator}});Copy the code

Series data column

  1. Set the shape and size of the inflection point (symbol, symbolSize) Does not display by default, only displays hover (showSymbol)

  2. Set the area background color to areastyle.color

let series = [
  {
    type: "line".color: "#1890ff".// Line color
    areaStyle: {
      color: "Rgba (24144255,0.08)".// Area background color
    },
    showSymbol: false.// display only when tooltip hover is used
    symbol: "emptyCircle".// Inflection point shape
    symbolSize: 6.// Inflection point size
  },
  {
    type: "line".color: "#52c41a".areaStyle: {
      color: "rgba(82,196,26,0.08)",},showSymbol: false.symbol: "emptyCircle".symbolSize: 6,},];Copy the code

Tooltip prompt box

  1. axisPointer.label.show = true: Mouse hover, display x axis label, such as February, March;
  2. axisPointer.label.backgroundColor = transparent: When the mouse hover, remove the background color of the scale label;
  3. axisPointer.label.padding = [20, 0, 0, 0]: Adjust the distance between the scale label and the axis;
  4. position = [10, 10]: Tooltip The tooltip box is fixed relative to the container.
  5. position = format(): Tooltip Indicates the position of the tooltip box relative to the mouse.
  6. formatter: Custom content implementation
let tooltip = {
  trigger: "axis".// Indicator style configuration
  axisPointer: {
    type: "cross".label: {
      show: true.color: "# 808080".fontSize: 12.padding: [20.0.0.0].backgroundColor: "transparent",},lineStyle: {
      color: "# 808080".width: 0.5,},// position: [10, 10],
    // position(point, params) {
    // // Default distance Mouse location
    // if (params.length) {
    // const { axisIndex, axisValue } = params[0];
    // instance.convertToPixel({ xAxisIndex: axisIndex }, axisValue); // axisPointer position x
    / /}
    // },
    formatter: function(params) {
      let html = `<div style="height:auto; width:234px;" > <div style="font-size:14px; font-weight:bold; color:#333; margin-bottom:16px; line-height:1;" > as${params[0].axisValue}
          </div>
          ${params
            .map(
              (
                item
              ) => `<div style="font-size:12px; color:#808080; margin-bottom:8px; display:flex; align-items:center; line-height:1;" > <span style="display:inline-block; margin-right:8px; border-radius:6px; width:6px; height:6px; background-color:${ item.color };" ></span>${item.seriesName}<span style="flex:1; text-align:right;" >${
                  item.value[item.encode.y[0]]}</span>
              </div>`
            )
            .join("")}
        </div>`;
      returnhtml; ,}}};Copy the code

Overall effect display

let options = {
  title,
  legend,
  grid,
  xAxis,
  yAxis: R.merge(yAxis, {
    type: "value".axisPointer: {
      show: false,
    },
  }),
  series,
  dataset: {
    dimensions: ["The amount"."Cumulative Consumption in 2020"."Cumulative consumption in 2021"].source: [["January".200.100],
      ["February".288.200],
      ["March".360.486],
      ["April".450.680],
    ],
  },
  tooltip,
}
Copy the code