Echart Bar double column chart style most complete detailed explanation

Preface
Installation and Configuration

1. Install Echarts
2. Globally introduce Echarts
3. Introduce Echarts on demand

Style optimization

x-axis basic style
Maximum and minimum tick labels
Series data column suspension highlight
Coordinate indicator background gradient color
Tooltip prompt box custom style
Y-axis basic style
legend Legend style customization

Summarize

Preface

In a recent project, there was a need for visual charts, and Echarts and Hightcharts came to my mind at the first time.

The visualization charts to be used are relatively common. Echarts documents and examples are relatively comprehensive, and they are in Chinese, which is convenient for reading, so I chose Echarts.

If you use Echarts for your own chart style, there is no problem, but the UI is definitely not satisfactory, so a series of style adjustments were made...

Installation and Configuration

The front-end framework is easywebpack-vue, and the Echarts version used is ^5.0.1

Echarts official documentation: echarts.apache.org/zh/index.html

1. Install Echarts

npm install echarts --save

2. Globally introduce Echarts

Add the following code to main.js:

import * as echarts from "echarts";
Vue.prototype.$echarts = echarts;

3. Introduce Echarts on demand

(1) Add echarts.js file

// Import the echarts core module, which provides the necessary interfaces for echarts import * as echarts from "echarts/core";

// Import various charts, all with the suffix "Chart"
import { BarChart, LineChart, PieChart } from "echarts/charts";

//Introduce components such as prompt box, title, rectangular coordinate system, etc., the component suffix is Component
import {
  TitleComponent,
  TooltipComponent,
  ToolboxComponent,
  GridComponent,
  LegendComponent,
  AxisPointerComponent,
  DatasetComponent,
} from "echarts/components";

// Import Canvas renderer. Note that importing CanvasRenderer or SVGRenderer is a necessary step. import { SVGRenderer } from "echarts/renderers";

// Register the required componentsecharts.use([
  BarChart,
  LineChart,
  PieChart,

  TitleComponent,
  TooltipComponent,
  ToolboxComponent,
  GridComponent,
  LegendComponent,
  AxisPointerComponent,
  DatasetComponent,

  SVGRenderer,
]);

export default echarts;

(2) Import into main.js file

import echarts from "./utils/echarts";
Vue.prototype.$echarts = echarts;

Usage Examples

<template>
  <div id="charts" style="width: 600px; height: 400px"></div>
</template>

<script>
  import * as R from "ramda";

  export default {
    mounted() {
      this.initCharts();
    },
    methods: {
      initCharts() {
        let charts = this.$echarts.init(document.getElementById("charts"));
        let option = {
          title:
            text: "Monthly Consumption Trend", // Title subtext: "Histogram", // Subtitle},
          xAxis:
            type: "category",
          },
          yAxis: {
            type: "value",
          },
          color: ["#1890ff", "#52c41a", " #faad14"], // bar chart color dataset: {
            source: [
              // Data source ["January", 1330, 666, 560],
              ["February", 820, 760, 660],
              ["March", 1290, 1230, 780],
              ["April", 832, 450, 890],
              ["May", 901, 880, 360],
              ["June", 934, 600, 700],
            ],
          },
          series: [
            // Icon column settings { type: "bar", stack: "total", name: "apple" },
            { type: "bar", stack: "total", name: "Pear" },
            { type: "bar", stack: "total", name: "Peach" },
          ],
          tooltip: {
          //Prompt box component}
        };
        charts.setOption(option);
      },
    },
  };
</script>

<style lang="scss" scoped></style>

Original effect display:

Target effect display after transformation:

Style optimization

x-axis basic style

The basic settings are as follows, which can set the properties related to the scale and axis.

xAxis:
  type: "category",
  boundaryGap: true, // White space strategy on both sides of the coordinate axis, default is true
  axisTick: { // scale show: false,
  },
  axisLabel: { // scale label color: "#808080",
    fontSize: 12,
    margin: 8, // The distance between the scale label and the axis interval: "auto", // x-axis label display interval, automatic},
  axisLine: { // axis lineStyle: {
      color: "#c3c3c3",
      width: 0.5,
    },
  },
  splitLine: { // split line show: false,
    interval: "auto",
  },
  splitArea: { // split area show: false,
    areaStyle: {},
  },
},

Maximum and minimum tick labels

The main attribute is interval, which should be set large enough to display only the maximum and minimum tick labels.

xAxis:
  axisLabel: {
    // interval: "auto",
    interval: 50, // Only show the maximum and minimum coordinates showMinLabel: true, // Show the minimum scale label showMaxLabel: true, // Show the maximum scale label }
}

Series data column suspension highlight

const stackBarSeries = {
  type: "bar", // bar chart barWidth: 32, // column width stack: "total", // data stacking showBackground: false, // whether to display the column background color // Highlight graphic style and label style emphasis: {
    // When the mouse hovers, the same business item is highlighted and other items fade out of the graphic // focus: "series",
    // Default configuration, only the current hover data fades out focus: "none",
  },
};

let option = {
  series: R.map(
    (o) =>
      R.merge(stackBarSeries, {
        name: o,
      }),
    ["apple", "pear", "peach"]
  ),
};

Coordinate indicator background gradient color

The main thing is to set the trigger of the tooltip prompt box component to trigger the x-axis suspension; then set the xAxis coordinate indicator axisPointer, and the indicator mask style shadowStyle can set the gradient color

let option = {
  tooltip: {
    //Prompt box component trigger: "axis", //Axis trigger},
  xAxis:
    // axis pointer axisPointer: {
      type: "shadow",
      // The z value of the coordinate axis indicator controls the order of the graphics z: 1,
      // Indicator mask style shadowStyle: {
        // Solve the hover background color gradient problem color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(234,244,255,1)", // color at 0%},
            {
              offset: 1,
              color: "rgba(234,244,255,0.3)", // 100% color},
          ],
          global: false, // default is false
        },
        //Set background color and shadow//color: "rgba(234,244,255,1)",
        // opacity: 1,
        // shadowColor: "rgba(0, 0, 0, 0.5)",
        // shadowBlur: 10,
        // shadowOffsetX: 10,
        // shadowOffsetY: 10,
      },
    },
  },
};

Tooltip prompt box custom style

The default style or value of tooltip may not meet the development requirements. You can use the formatter function to customize it.

let option = {
  tooltip: {
    // Prompt box component trigger: "axis", // Coordinate axis trigger padding: [20, 16, 12, 16],
    backgroundColor: "#fff",
    alwaysShowContent: false,
    formatter: function(params) {
      let html = `<div style="height:auto;width: 163px;">
          <div style="font-size:14px;font-weight:bold;color:#333;margin-bottom:16px;line-height:1;">
            ${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]
                ] || 0}</span>
              </div>`
            )
            .join("")}
            <div style="display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#333;padding-top:4px;margin-bottom:8px;line-height:1;">
            <span>Total</span>
            <span>¥${R.reduceRight(
              R.add,
              0,
              R.drop(1, params[0].value || [])
            )}</span>
          </div>
        </div>`;
      return html;
    },
  },
};

Y-axis basic style

let option = {
  yAxis: {
    type: "value",
    minInterval: 100,
    nameGap: 8,
    axisLabel: {
      color: "#808080",
      fontSize: 10,
      // formatter: (value) => {
      // return moneyFormatValue(value);
      // },
    },
    splitLine: {
      lineStyle:
        type: "dashed",
        color: "#ebebeb",
        width: 0.5,
      },
    },
  },
};

legend Legend style customization

let option = {
  grid: {
    left: 0,
    right: 12,
    bottom: 0,
    top: 68,
    containLabel: true,
  },
  // Legend settings legend: {
    top: 32,
    left: -5,
    icon: "circle",
    itemHeight: 6, // Change the icon size itemGap: 24,
    textStyle: {
      fontSize: 12,
      color: "#333",
      padding: [0, 0, 0, -8], // Modify the distance between text and icon},
  },
};

Summarize

This is the end of this article about the Echart Bar double bar chart style. For more relevant Echart Bar double bar chart style content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Gradient color bar chart implemented by jQuery plugin Echarts
Example of multi-column bar chart effect implemented by jQuery plugin echarts [with demo source code download]
Solve the problem that echarts shows two values in a bar chart, similar to a progress bar
echarts bar chart background overlapping combination instead of parallel implementation code
Echarts Basic Introduction: General Configuration of Bar Chart and Line Chart

<<: Solution to the problem that VMware15 virtual machine bridge mode cannot access the Internet

>>: Detailed explanation of how to install mysql5.6 from binary installation package in centos7 environment