First look at the final effect
Table of contents
- The beauty of numbers: the basic application of Echarts histogram
- Good shape and color: style beautification and creative design of Echarts histogram
- Ingenuity: Customize the column shape of Echarts histogram
- Dynamic: Realization of interactive animation of Echarts histogram
- The Art of Number Sorting: Data Sorting Skills of Echarts Histogram
I spent two blogs before to introduce in detail how to use Echarts charts and configuration items in Echarts in Vue3 . In this blog, I want to combine the content of the previous two blogs to realize the Echarts histogram. Beautify and interact with data.
The beauty of numbers: the basic application of Echarts histogram
We have already said before, to use Echarts in Vue, we must first install and import, we create a new vue3 project, install Echarts and import
- Install Echarts
npm install echarts --save
- Introduce Echarts, here I will introduce it locally, create a new VueChart.vue component, and introduce it in this component
import * as echarts from 'echarts';
- Create a new div in the component's template
<div ref="chart" style="width: 50%;height: 400px;"></div>
- Define an array to store data
const chart = ref(null)
const data = [
{
name: 'Mon', value: 820 },
{
name: 'Tue', value: 932 },
{
name: 'Wed', value: 901 },
{
name: 'Thu', value: 934 },
{
name: 'Fri', value: 1290 },
{
name: 'Sat', value: 1330 },
{
name: 'Sun', value: 1320 },
];
- Define a variable chart associated with div, and call the init function of Echarts in onMounted
onMounted(() => {
const myChart = echarts.init(chart.value)
// 配置项内容
})
- Define an option object and configure the content we want to display in Echarts; here I define title to display the title of the chart, xAxis configures and displays the x-axis, yAxis configures and displays the y-axis, and series configures the series; specifically Please see the previous blog for configuration parameters
const option = {
title: {
text: '数字之美:Echarts柱状图的基础应用'
},
xAxis: {
type: 'category',
data: data.map(item=>item.name)
},
yAxis: {
type: 'value'
},
series: [{
data: data.map(item=>item.value),
type: 'bar'
}]
};
- Pass the option defined above as a parameter to the Echarts instance we defined above—myChart
- Insert the above VueChart component in App.vue
<template>
<VueChart></VueChart>
</template>
<script setup>
import VueChart from './components/VueChart.vue';
</script>
We have achieved a simple histogram, run it to see the effect
, but this histogram looks too simple and not very beautiful, let's further optimize it
Good shape and color: style beautification and creative design of Echarts histogram
Now let's modify the color, border, shadow, width of the column and the style of the coordinate axis line. We only need to add content to the option configuration item. The code is as follows:
const option = {
title: {
text: '形色俱佳:Echarts柱状图的样式美化与创意设计'
},
xAxis: {
type: 'category',
data: data.map(item=>item.name),
axisLine: {
lineStyle: {
color: '#333'
}
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#333'
}
}
},
series: [{
data: data.map(item=>item.value),
type: 'bar',
barWidth: 20,
itemStyle: {
color:'#0286ff',
borderColor: '#fff',
borderWidth: 2,
shadowBlur: 10,
shadowColor: '#ccc'
},
}],
}
After the modification is complete, run it to see the effect.
It looks much more beautiful than our first version above, but it is still not perfect. The cylinder looks too sharp and the color is relatively monotonous
Ingenuity: Customize the column shape of Echarts histogram
The cylinder is square, it looks sharper, and the color is too single. Let’s change the cylinder to rounded corners and change the color to a gradient color. The code is as follows:
const option = {
title: {
text: '独具匠心：Echarts柱状图的柱体形状自定义'
},
xAxis: {
type: 'category',
data: data.map(item=>item.name),
axisLine: {
lineStyle: {
color: '#333'
}
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#333'
}
}
},
series: [{
data: data.map(item=>item.value),
type: 'bar',
barWidth: 20,
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: '#00feff'
},
{
offset: 0.5,
color: '#027eff'
},
{
offset: 1,
color: '#0286ff'
}
]
),
borderColor: '#fff',
borderWidth: 2,
borderRadius: 30,
shadowBlur: 10,
shadowColor: '#ccc'
},
}],
}
Well, in this way, the style of the histogram is more perfect, let's realize the interactive effect
Dynamic: Realization of interactive animation of Echarts histogram
Here I want to achieve three interactive effects, one is that when the mouse hovers over the column, the column can be highlighted; the other is to pop up a prompt box; the third is to add a dataZoom with data zoom function; the code is as follows
const option = {
title: {
text: '独具匠心：Echarts柱状图的柱体形状自定义'
},
xAxis: {
type: 'category',
data: data.map(item=>item.name),
axisLine: {
lineStyle: {
color: '#333'
}
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#333'
}
}
},
series: [{
data: data.map(item=>item.value),
type: 'bar',
barWidth: 20,
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: '#00feff'
},
{
offset: 0.5,
color: '#027eff'
},
{
offset: 1,
color: '#0286ff'
}
]
),
borderColor: '#fff',
borderWidth: 2,
borderRadius: 30,
shadowBlur: 10,
shadowColor: '#ccc'
},
emphasis: {
itemStyle: {
color: '#409EFF'
},
},
}],
tooltip: {
trigger: 'axis'
},
dataZoom: [
{
type: 'slider',
start: 0,
end: 100
},
{
type: 'inside',
start: 0,
end: 100
}
],
}
Refresh the browser and see the effect,
now the chart looks much more beautiful
The Art of Number Sorting: Data Sorting Skills of Echarts Histogram
Next, we implement the data sorting of Echarts charts. To achieve this function, we only need to use the sort function of the array: add the following code under the data array we defined: ascending order: data.sort((a, b)
= > a.value - b.value);
Descending order: data.sort((a, b) => b.value - a.value);
Well, that’s all about using the histogram. In fact, Echarts can The functions realized are far more than these. We can also make more changes and uses on this basis, such as modifying the style to imitate a three-dimensional histogram, a column in the form of a progress bar, etc. Interested friends can study it.