Shulou(Shulou.com)06/02 Report--

Vue how to use Echarts to draw histogram, in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

What is vue? Vue is a progressive JavaScript framework for building a user interface. The difference between Vue and other large frameworks is that using Vue can be applied layer by layer from bottom to top, and its core library only focuses on the view layer, which facilitates integration with third-party libraries and projects, and uses Vue to develop complex single-page applications using single-file components and libraries supported by the Vue ecosystem.

1 introduction of Echarts1.1 installation

Use the following command to install ECharts through npm

Npm install echarts-save

Note: the Echarts version installed in this article is: "echarts": "5.2.1"

1.2 introduction

After the installation is complete, you can bring in all the echarts so that we can use all the components of echarts on this page; the introduction code is as follows:

Import * as echarts from "echarts"; 2 basic histogram

Bar chart (or bar chart) is a common type of chart that shows the size of data by the length of the column.

The bar chart is set by setting the type of series in the configuration item to 'bar', the

The simplest bar chart can be set as follows:

Option = {xAxis: {data: ['Mon',' Tue', 'Wed',' Thu', 'Fri',' Sat', 'Sun']}, yAxis: {}, series: [{type:' bar', data: [23, 24, 18, 25, 27, 28, 25]}]}

As shown in the figure:

The complete code of vue in the figure above is as follows:

Import * as echarts from "echarts" Export default {data () {return {xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], / / Abscissa yData: [23,24,18,25,27,28,25], / / data myChartStyle: {float: "left", width: "100%", height: "400px"} / chart style} }, mounted () {this.initEcharts () }, methods: {initEcharts () {/ / basic histogram const option = {xAxis: {data: this.xData}, yAxis: {}, series: [{type: "bar", / / data: this.yData}]}} Const myChart = echarts.init (document.getElementById ("mychart")); myChart.setOption (option); / / adjust the chart window.addEventListener ("resize", () = > {myChart.resize ();});}; 3 multiple column histograms

When there are multiple columns of data to be displayed, we need to use multi-column bar charts. We only need to add one more item in series:

Series: [{type: "bar", / / histogram data: data1,}, {type: "bar", / / histogram data: data2,}]

Usually, when there are multiple columns of data, we need to display each column in a different color and explain it in the bar chart. Echarts will distinguish between different colors by default. Of course, we can also set the style of the column chart, such as background color, etc. However, if you need to indicate what data a column represents, you need to use the legend legend, and add the name attribute to the series array object to correspond to the data in the legend, where the location element is used to set the location of the legend, as follows:

/ / Legend legend: {data: ["number of people", "number of tasks"], top: "0%" / / set the position of the legend at the top}, series: [{type: "bar", / / the shape is bar chart data: data1, name: "number" / / legend attribute {type: "bar", / / shape is histogram data: data2, name: "number of tasks", / / legend attribute}]

Set the multi-column column chart as shown in the figure:

The complete vue code in the above figure is as follows:

Import * as echarts from "echarts" Export default {data () {return {xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], / / Abscissa yData: [23, 24, 18, 25, 27, 28, 25], / / number data taskDate: [10, 11, 9, 17, 14, 13, 14], myChartStyle: {float: "left" Width: 100%, height: "400px"} / / Chart style} }, mounted () {this.initEcharts () }, methods: {initEcharts () {/ / Multi-column histogram const mulColumnZZTData = {xAxis: {data: this.xData}, / / Legend legend: {data: ["number of people", "tasks"], top: "0%"}, yAxis: {} Series: [{type: "bar", / / shape is bar chart data: this.yData, name: "number of people", / / legend attribute label: {/ / text label above bar chart Default display numerical information show: true, position: "top"}}, {type: "bar", / / shape is histogram data: this.taskDate, name: "number of tasks" / / legend attribute label: {/ / text label above bar chart Display numerical information show: true, position: "top"}}]} by default Const myChart = echarts.init (document.getElementById ("mychart")); myChart.setOption (mulColumnZZTData); / / adjust the chart window.addEventListener ("resize", () = > {myChart.resize ();});}

The label attribute in series is a column image text tag, which can display data, text and other information. It is not displayed by default. It will be displayed in the figure only when its show is set to true.

4 column chart style setting 4.1 column bar style

The style of the bar can be set through series.itemStyle, including:

Color of the bar (color)

Width of the bar (barWidth)

Stroke color (borderColor), width (borderWidth), style (borderType) of the bar

Background color of the bar (showBackground) Radius of the bar fillet (barBorderRadius)

Bar transparency (opacity)

Shadows (shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY).

We can set the same style for the same series of bars, or we can set a specific style for a single bar, as follows:

Option = {xAxis: {data: ["A", "B", "C", "D", "E"]}, yAxis: {}, series: [{type: "bar", data: [10,22,28 {value: 43, / / style a single column itemStyle: {color: "# 91cc75", shadowColor: "# 91cc75", borderType: "dashed" Opacity: 0.5}}, 49], barWidth: "20%", / / the width of each column is 20% of the category width / / the column style of the same series itemStyle: {barBorderRadius: 5 BorderWidth: 1, borderType: "solid", borderColor: "# 73c0de", shadowColor: "# 5470c6", shadowBlur: 3}}]}

The effect is as follows:

4.2 column spacing

The distance between columns can be divided into two types, one is the distance barWidth of different series under the same category, and the other is the distance between category and category barCategoryGap.

Examples are as follows:

Option = {xAxis: {data: ["A", "B", "C", "D", "E"]}, yAxis: {}, series: [{type: "bar", data: [23,24,18,25,18], barGap: "0%" / / the percentage of the distance between the two columns relative to the width of the bar BarCategoryGap: "40%" / / percentage of free distance on each side relative to bar width}, {type: "bar", data: [12, 14, 9, 9, 11]}]}

The above example is shown in the figure:

In this example, barGap is set to'0% column, which means that the distance between the two columns under each category (such as A) is set to 0% relative to the width of the column, which means that there is no gap between the two column jumps. The barCategoryGap is'40%', which means the free distance on each side of the bar, as a percentage of the width of the bar.

Generally speaking, after setting barGap and barCategoryGap, there is no need to set barWidth, and the width will be adjusted automatically. If necessary, you can set barMaxWidth as the upper limit of the bar width, and the bar width will not be too wide when the chart width is large.

This property is shared by multiple column chart series in the same coordinate system. This property should be set on the last column chart series in this coordinate system to take effect, and will take effect on all column chart series in this coordinate system.

The vue code of the above effect is as follows:

Import * as echarts from "echarts"; export default {data () {return {myChart: {}, myChartStyle: {float: "left", width: "100%", height: "400px"}, / / Chart style};}, mounted () {this.initEcharts () }, methods: {initEcharts () {/ / styling / / const option = {/ / xAxis: {/ / data: ["A", "B", "C", "D", "E"] / /}, / / yAxis: {} / / series: [/ / {/ / type: "bar", / / data: [/ / 10, / / 22, / / 28, / / {/ / value: 43 / style a single column / / itemStyle: {/ / color: "# 91cc75", / / shadowColor: "# 91cc75", / / borderType: "dashed" / / opacity: 0.5 / /} / /}, / / 49 / /], / / barWidth: "20%" / / the width of each bar is 20% of the category width / / itemStyle: {/ / barBorderRadius: 5, / / borderWidth: 1, / / borderType: "solid", / / borderColor: "# 73c0de", / / shadowColor: "# 5470c6" / / shadowBlur: 3 / /} / /} / /] / /} / / column spacing const option = {xAxis: {data: ["A", "B", "C", "D", "E"]}, yAxis: {}, series: [{type: "bar", data: [23,24,18,25,18] BarGap: "0%", / / the percentage of the distance between the two columns relative to the bar width BarCategoryGap: "40%" / / percentage of free distance on each side relative to bar width}, {type: "bar", data: [12, 14, 9, 9, 11]}}; const myChart = echarts.init (document.getElementById ("mychart")); myChart.setOption (option) / / adjust the chart window.addEventListener ("resize", () = > {myChart.resize ();});}; 5 dynamically sort the histogram according to the screen size

A dynamic sorting bar chart is a chart that shows changes in the ranking of data over time, with built-in support starting with ECharts 5.

The dynamic sorting bar chart is usually a horizontal bar. If you want to use a vertical bar, just set the X axis and Y axis opposite to each other in this tutorial.

The following properties are required to implement a dynamically sorted bar chart:

YAxis.realtimeSort is set to true, indicating the dynamic sorting effect of enabling the Y axis.

YAxis.inverse is set to true, which means that the Y axis is arranged from small to large from the bottom up.

YAxis.animationDuration recommends that it be set to 300, indicating the length of the first column sorting animation.

YAxis.animationDurationUpdate suggests setting it to 300, which indicates the duration of the first post bar sorting animation.

If you want to display only the first n names, set yAxis.max to n-1, otherwise all columns will be displayed

XAxis.max suggested that setting it to 'dataMax' means using the maximum value of the data as the maximum value of the X axis, the visual effect is better.

If you want to change the tag in real time, you need to set series.label.valueAnimation to true

AnimationDuration is set to 0, indicating that the first piece of data does not need to be animated from 0 (set to the same value as animationDurationUpdate if you want to start at 0)

AnimationDurationUpdate recommends setting it to 3000 to indicate the length of time each time the animation is updated, which should be the same as the frequency of calling setOption to change the data

Call setInterval with the frequency of animationDurationUpdate, update the data value, and display the bar sort corresponding to the next time point.

The results are as follows:

The complete code of the vue shown above is as follows: ```js import * as echarts from "echarts" Export default {data () {return {myChart: {}, sortData: [], / dynamically sorted data myChartStyle: {float: "left", width: "100%", height: "400px"}, / / Chart style dynamicSortZZTOption: {xAxis: {max: "dataMax"}, yAxis: {type: "category" Data: ["A", "B", "C", "D", "E"], inverse: true, animationDuration: 300, animationDurationUpdate: 300, max: 4 / / only the largest 3 bars will be displayed}, series: [{realtimeSort: true, name: "dynamic change" Type: "bar", data: [], label: {show: true, position: "right", valueAnimation: true}}], legend: {show: true}, animationDuration: 3000, animationDurationUpdate: 3000 AnimationEasing: "linear", animationEasingUpdate: "linear"}} }, mounted () {/ / Chart initialization this.myChart = echarts.init (document.getElementById ("mychart")); / / data initialization for (let I = 0; I

{this.pageUpdate ();}, 3000);}, methods: {/ / data refresh pageUpdate () {console.log (this.dynamicSortZZTOption.series [0] .data); this.dynamicSortZZTOption.series [0] .data = this.sortData; for (let I = 0; I

) {this.sortData [I] + = Math.round (Math.random () * 2000);} else {this.sortData [I] + = Math.round (Math.random () * 2000);}} this.myChart.setOption (this.dynamicSortZZTOption); / / adjust the chart window.addEventListener ("resize", () = > {this.myChart.resize ()) with the screen size });}; ````The answer to the question about how vue uses Echarts to draw histograms is here. I hope the above content can be of some help to all of you. If you still have a lot of doubts to solve, you can follow the industry information channel for more relevant knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.