Problem description
This article documents three ways to use Echarts in a Vue project, to draw histograms, and to add units on the X or Y axis. Take the Y axis as an example
Mode 1 (set via the name property in Yaxis)
The effect picture is as follows:
The code is as follows:
<template> <div> <div class="echartsBox" id="main"></div> </div> </template> <script> export default { data() { return { XData: [" Monday ", "Tuesday", "on Wednesday", "Thursday", "Friday", "Saturday", "Sunday"], yData: [115, 198, 88, 77, 99, 123, 176], the grid: {/ configuration/grid lines show: true, lineStyle: { color: ["#e9e9e9"], width: 1, type: "solid", }, }, }; }, watch: { xData() { this.echartsInit(); }, yData() { this.echartsInit(); },}, mounted() {// Get echarts to render this.echartsInit();},}, mounted() {// Get echarts to render this.echartsInit(); }, methods: { echartsInit() { let main = document.getElementById("main"); // Get the DOM element as the container for EachArts console.log(" Is there an EachArts ", this.$EachArts); This.$echarts. Init (main). SetOption ({// call the echarts method to draw the echarts xAxis: {type: "category", // category data: This. xData, // Axistick: {// DialignWithLabel: 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, 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 name attribute plus unit, But can be by nameTextStyle set corresponding unit text style -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- name: "unit ($ten thousand)," nameTextStyle: {color: "# aaa", nameLocation: "Start ",},}, series: [{name:" KKK ", data: this.yData, type: "bar", // barWidth: 40, // barWidth: 40,},],}); ,}}}; </script> <style lang="less" scoped> .echartsBox { width: 600px; height: 600px; } </style>Mode 2: All data share one unit (set by the subtext property in the 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 at this title: {// Title is the title section, with the first level title text, and the second level title subtext. Subtext: "unit (in ten thousand yuan) ", left: 24,// top: 16, / / distance above the location subtextStyle: {/ / set the style of the secondary title color: "# baf"}}, series: [...]The final effect drawing is the same as the final effect of method one
Mode 3 Each data has units (set by the axisLabel property in Yaxis)
The effect picture is as follows:
The code is as follows:
Grid: {show: true,}, yAxis: {type: "value", // see here, see here, see here, see here, see here, see here, see here, see here, see here, see here, see here, see here, see here, see here, see here, see here, see here, see here, see here, see here, see here, see here, see here, see here, see here, see here, see here, see here. {// formatter: "{value} yuan ",},}, series: [......]The X-axis is similar, so I won’t go into it here
These are the three common ways to add units to the echarts bar chart. The most important one is to look at the documentation on the official website, commonly known as Document-Oriented Development. Finally, attach the link of the Echarts configuration item on the official website:
https://echarts.apache.org/zh…