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

JavaScript BOM Explained

Table of contents 1. BOM Introduction 1. JavaScri...

Steps to install cuda10.1 on Ubuntu 20.04 (graphic tutorial)

Pre-installation preparation The main purpose of ...

JavaScript implements password box input verification

Sometimes it is necessary to perform simple verif...

Detailed explanation of Mysql's concurrent parameter adjustment

Table of contents Query cache optimization Overvi...

A quick solution to the first login failure in mysql5.7.20

First, we will introduce how (1) MySQL 5.7 has a ...

The whole process of realizing website internationalization using Vite2 and Vue3

Table of contents Preface Install vue-i18n Config...

...

JavaScript deshaking and throttling examples

Table of contents Stabilization Throttling: Anti-...

Sample code for implementing history in vuex

I have recently been developing a visual operatio...

Pure JavaScript to implement the number guessing game

Develop a number guessing game that randomly sele...

Detailed tutorial for installing ElasticSearch:7.8.0 cluster with docker

ElasticSearch cluster supports動態請求的方式and靜態配置文件to ...

Vue 2.0 Basics in Detail

Table of contents 1. Features 2. Examples 3. Opti...

How to implement gzip compression in nginx to improve website speed

Table of contents Why use gzip compression? nginx...

The easiest way to reset mysql root password

My mysql version is MYSQL V5.7.9, please use the ...

Vue implements real-time refresh of the time display in the upper right corner

This article example shares the specific code of ...