Echart Bar Bar diagram of stomping pits

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

Echarts icon style customization, such as X axis spacing, Y axis style, legend customization, prompt box customization, data column suspension highlighting, coordinate indicator background gradient, etc

In a recent project, there was a need for visual charts and Echarts and Hightcharts came to mind immediately.

The visualizations used are common, and the Echarts documentation and examples are comprehensive and easy to read in Chinese, so I chose Echarts.

The Echarts chart style is not a problem if you use it for your own use, but the UI is definitely not satisfied, so a series of style adjustments were made.

Installation and configuration

The front-end framework is EasyWebpack-Vue, using Echarts version ^5.0.1

Echarts official documentation: echarts.apache.org/zh/index.ht…

1. Install Echarts

npm install echarts --save
Copy the code

2. Introduce Echarts globally

Add the following code to main.js:

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

3. Introduce Echarts on demand

(1) Add echarts.js file

// Introduce the Echarts core module, which provides the interface required for echarts use
import * as echarts from "echarts/core";

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

// Introduce tooltips, titles, cartesian coordinates and other components with the suffix Component
import {
  TitleComponent,
  TooltipComponent,
  ToolboxComponent,
  GridComponent,
  LegendComponent,
  AxisPointerComponent,
  DatasetComponent,
} from "echarts/components";

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

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

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

  SVGRenderer,
]);

export default echarts;
Copy the code

(2) import in main.js file

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

Using an example

<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: "Month-to-month Consumption Trends"./ / title
            subtext: "Bar chart"./ / subtitle
          },
          xAxis: {
            type: "category",},yAxis: {
            type: "value",},color: ["#1890ff"."#52c41a"." #faad14"].// Bar color
          dataset: {
            source: [
              / / the data source
              ["January".1330.Awesome!.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: The word "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>
Copy the code

Original effect display:

Target effect display after transformation:

Style optimization

X-axis base style

The basic Settings are shown below and you can set the scale and axis related properties

xAxis: {
  type: "category".boundaryGap: true.// White space on both sides of the axis. Default is true
  axisTick: { / / calibration
    show: false,},axisLabel: { // Calibration 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: { / / line
    show: false.interval: "auto",},splitArea: { // Split the region
    show: false.areaStyle: {},}},Copy the code

Maximum and minimum scale labels

The main attribute is interval, which is large enough to display only the maximum and minimum scale tags if it is larger than the number of scales normally displayed

xAxis: {
  axisLabel: {
    // interval: "auto",
    interval: 50.// Only maximum and minimum coordinates are displayed
    showMinLabel: true.// Displays the minimum calibration label
    showMaxLabel: true.// Displays the maximum scale label}}Copy the code

Series data column suspension highlighting

const stackBarSeries = {
  type: "bar"./ / a histogram
  barWidth: 32.// Column width
  stack: "total".// Data stack
  showBackground: false.// Whether to display the bar background color
  // Highlight graphic styles and label styles
  emphasis: {
    // The mouse hover, with the business items highlighted, other items fade out of the graph
    // focus: "series",
    // Default to hover data only
    focus: "none",}};let option = {
  series: R.map(
    (o) = >
      R.merge(stackBarSeries, {
        name: o,
      }),
    [The word "apple"."Pear"."Peach"]),};Copy the code

Coordinate indicator background gradient

The main thing is to set the trigger of the Tooltip component so that the X axis is suspended and triggered. Then set xAxis’s coordinate indicator axisPointer and the indicator mask style shadowStyle to set gradients

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

Tooltip Indicates a customized style

Tooltip default styles or values may not meet development requirements; you can customize them using the Formatter function

let option = {
  tooltip: {
    // Prompt box component
    trigger: "axis".// Axes 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;" > selections${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> <span>¥${R.reduceRight(
              R.add,
              0,
              R.drop(1, params[0].value || [])
            )}</span>
          </div>
        </div>`;
      returnhtml; ,}}};Copy the code

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,},},},};Copy the code

Legend Custom style

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 text and icon distance,}}};Copy the code

The stack diagram data is 0

const stackBarSeries = {
  type: "bar".label: {
    show: true.// Do not display data when the value is 0, otherwise a bold 0 will appear
    formatter: function(params) {
      if (params.value > 0) {
        return params.value;
      } else {
        return ""; ,}}}};Copy the code