Three ways to add units to echarts histogram Y-axis data (VUE Project)

Problem description

This article notes three ways to use Echarts in a VUE project, draw a bar chart, and add units on the X or y axis, using the y axis as an example

Method 1: All data in one unit (via the name property in yAxis)

The renderings are as follows:

The code is as follows:

<template>
  <div>
    <div class="echartsBox" id="main"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      xData: ["On Monday"."Tuesday"."On Wednesday"."Thursday"."Friday"."Saturday"."Sunday"].yData: [115.198.88.77.99.123.176].grid: {
        // Grid line configuration
        show: true.lineStyle: {
          color: ["#e9e9e9"].width: 1.type: "solid",}}}; },watch: {
    xData() {
      this.echartsInit();
    },
    yData() {
      this.echartsInit(); }},mounted() {
    // Call Mounted to render echarts
    this.echartsInit();
  },
  methods: {
    echartsInit() {
      let main = document.getElementById("main"); // Get the DOM element as a container for EachArts
      console.log("Are there Echarts?".this.$echarts);
      this.$echarts.init(main).setOption({
        // Call the echarts method to draw the echarts diagram
        xAxis: {
          type: "category"./ / class
          data: this.xData, // The value of the X-axis category
          axisTick: {
            // Scale controls are centered in the bar chart
            alignWithLabel: true,}},grid: {
          show: true,},yAxis: {
          type: "value".// Look here, look here, look here, look here, look here, look here, look here, look here, look here, look here, look here, look here, look here, look here,
          / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- by the name attribute to add unit, but can be by nameTextStyle set corresponding unit text style -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
          name: Unit (ten thousand yuan).nameTextStyle: {
            color: "#aaa".nameLocation: "start",}},series: [{name: "kkk".data: this.yData,
            type: "bar".// The type is bar graph
            barWidth: 40.// The width of the bar chart},]}); ,}}};</script>
<style lang="less" scoped>
.echartsBox {
  width: 600px;
  height: 600px;
}
</style>

Copy the code

Method 2: All data in one unit (set by subtext property in title)

The code is as follows:

yAxis: {
  type: "value",},// Look here, look here, look here, look here, look here, look here, look here, look here, look here, look here, look here, look here, look here, look here, look here, look here
title: {
  // title is the title section, with a primary title text and a secondary title subtext. Here we use the secondary title, and then modify the position of the secondary title to produce the desired effect, of course, the style can also be configured by title. SubtextStyle
  subtext: Unit (ten thousand yuan).left: 24.// Distance to the left
  top: 16.// Distance from the upper position
  subtextStyle: {// Set the style of the secondary title
    color:"#baf"}},series: [...]Copy the code

The final effect drawing is consistent with the final effect of method one

Method 3 Each data has a unit (set via the axisLabel property in yAxis)

The renderings are as follows:

The code is as follows:

grid: {
  show: true,},yAxis: {
  type: "value".// Look here, look here, look here, look here, look here, look here, look here, look here, look here, look here, look here, look here, look here, look here, look here, look here
  axisLabel: {
    // This is a convenient way to concatenate units next to the values of the Y-axis data
    formatter: "{value} $ten thousand",}},series: [...]Copy the code

The X-axis is similar, but I won’t go into it here

These are the three common ways to add units to echarts bars. In fact, the most important is to look at the official documentation, commonly known as documented-oriented development. Finally attached website echarts configuration items link: echarts.apache.org/zh/option.h…