Echart Bar double column chart style most complete detailed explanation

Echart Bar double column chart style most complete detailed explanation

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

Recommend

Summary of common problems and application skills in MySQL

Preface In the daily development or maintenance o...

JavaScript Basics: Error Capture Mechanism

Table of contents Preface Error Object throw try…...

A brief analysis of CSS :is() and :where() coming to browsers soon

Preview versions of Safari (Technology Preview 10...

Advantages and disadvantages of Table layout and why it is not recommended

Disadvantages of Tables 1. Table takes up more byt...

In-depth explanation of binlog in MySQL 8.0

1 Introduction Binary log records SQL statements ...

A brief discussion on Flex layout and scaling calculation

1. Introduction to Flex Layout Flex is the abbrev...

Thoughts on truncation of multi-line text with a "show more" button

I just happened to encounter this small requireme...

Several methods to clear floating (recommended)

1. Add an empty element of the same type, and the...

Dissecting the advantages of class over id when annotating HTML elements

There are very complex HTML structures in web pag...

How to view Linux ssh service information and running status

There are many articles about ssh server configur...

JavaScript to achieve text expansion and collapse effect

The implementation of expanding and collapsing li...

An article to master MySQL index query optimization skills

Preface This article summarizes some common MySQL...

Echart Bar double column chart style most complete detailed explanation

Table of contents Preface Installation and Config...