Table of contents
Histogram (bar)
need
As shown in the figure above, make a horizontal histogram. The data returned by the backend is arranged from small to large , and it is hoped that it can be displayed in order.
[1] Copy case
- Copy an Echarts official website case and replace the data with the data you want to render
[2] Modify category axis direction
-
[2] Change the histogram in [1] to a horizontal histogram
xAxis and yAxis are the configuration items of the rectangular coordinate axis x/y axis;
There are attributes in both xAxis and yAxis configuration items
type, and there are 4 attribute values as followscategorycategory axis (x-axis default)valueValue axis (y-axis default value)- time time axis
- log logarithmic axis
The data attribute is
类目data. If (xAxis/yAxis) does not set the type attribute, but sets axis.data, the type of the current configuration item is considered to be category .example
[3] Modify the data rendering direction
It can be seen from the above figure that the data rendering direction is 沿着y轴往上进行渲染, but contrary to my original intention, I hope that users can see the exact arrangement process of the data.
There are attributes in the xAxis/yAXis configuration item
inverse-> whether it is a reverse axis (whether the data is rendered in reverse)
Configuring the inverse attribute to true achieves the goal.
[4] Modify the axis text style
axis.data is an array that stores category data.
Each element of the array:String/Object
- If the text style does not need to be modified, the element is in String format
- If you need to modify the text style, the element is in Object format
As shown in the figure above, only the font of 'shirt' needs to be modified, then the first element in data is of Object type, and the remaining element types are of String type.
In this case, it is necessary to adjust the font of the y-axis coordinate text to 16px, so the following adjustments can be made
const value = ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
const data = value.map(item=>({
value: item,
textStyle:{
fontSize:16,
}
}))
option = {
yAxis: {
data,
inverse:true
},
xAxis:{
},
series: [
{
data: [200, 180, 120, 80, 30, 10],
type: 'bar'
}
]
}
Funnel chart (funnel)
option = {
series: [
{
type: 'funnel', // 图表类型
left: '10%',
top: 60,
bottom: 60,
width: '80%',
min: 0, // value最小值
max: 100, // value最大值
minSize: '0%', // 最小值映射的宽度（最小宽度）
maxSize: '100%', // 最大值映射块的宽度（最大宽度）
// sort: 数据排列顺序 descending（默认）从大到小排列；ascending：从小到大排列；none:按照data(value属性)值排列
sort: 'descending',
// gap: 图表块与块之间的间距
gap: 2,
// label: 图表每块上的文本
label: {
show: true, // 是否显示文本（默认true）
position: 'inside', // 文本显示的位置（默认块右侧）
formatter: function(d){
// 文本内容，默认name属性
return d.data.name + ' ' + d.data.num
}
},
// 图表每个块的样式
itemStyle: {
// color:'red', 表示每个块都是红色，默认是在option.color中选取颜色
borderColor: '#fff',
borderWidth: 1
},
// 鼠标hover时块的样式
emphasis: {
// 文本样式
label: {
fontSize: 20
}
},
// 显示数据
data: [
{
value: 60, name: 'Visit', num: 5000 },
{
value: 40, name: 'Inquiry', num: 3200 },
{
value: 20, name: 'Order', num: 10 },
{
value: 80, name: 'Click' , num: 6800},
{
value: 100, name: 'Show', num: 10000 }
]
}
]
};
The shape of the funnel chart
When looking at the case, I found that the chart is in the shape of a "triangle", but when we actually use it, we will find that the chart is deformed
The shape of the funnel graph is
data.valuecontrolled by attributes. If the decrement/increment of the data.value attribute of each data is not proportional, the triangle of the funnel graph will be out of shape.
If you want the graph to always be a triangle, you can make the value value decrease, and add another attribute to data to represent the real value (Note: If the return value of the backend is not returned in order, it needs to be sorted first!)