当前位置:网站首页>Echart histogram: stack histogram value formatted display
Echart histogram: stack histogram value formatted display
2022-06-13 06:08:00 【HaanLen】
option = {
title: {
text: 'World Population'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Indonesia', 'USA', 'India', 'China', 'World']
},
series: [
{
name: '2011',
type: 'bar',
stack: 'total',
label: {
show: true
},
data: [823, 234, 2034, 4970, 230]
},
{
name: '2012',
type: 'bar',
stack: 'total',
label: {
show: true,
formatter: '{a} {b} \n{c}',
},
data: [325, 238, 1214, 1141, 807]
}
]
};
option = {
title: {
text: 'World Population'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Indonesia', 'USA', 'India', 'China', 'World']
},
series: [
{
name: '2011',
type: 'bar',
stack: 'total',
label: {
show: true
},
data: [823, 234, 2034, 4970, 230]
},
{
name: '2012',
type: 'bar',
stack: 'total',
label: {
show: true,
// formatter: '{a} {b} \n{c}',
formatter:(params) => {
return `${
params?.seriesName} ${
params?.name} \n ${
params?.value} `
},
},
data: [325, 238, 1214, 1141, 807]
}
]
};
{
componentType: 'series',
// Series type
seriesType: string,
// The series is coming in option.series Medium index
seriesIndex: number,
// Series name
seriesName: string,
// Data name , Class name
name: string,
// The data is coming in data Array index
dataIndex: number,
// Incoming raw data items
data: Object,
// Incoming data value . In most series, it is similar to data identical . Under some series is data The components in the ( Such as map、radar in )
value: number|Array|Object,
// Axis encode The mapping information ,
// key For the axis ( Such as 'x' 'y' 'radius' 'angle' etc. )
// value Must be an array , Not for null/undefied, Express dimension index .
// Its contents are as follows: :
// {
// x: [2] // dimension index by 2 Data mapped to x Axis
// y: [0] // dimension index by 0 Data mapped to y Axis
// }
encode: Object,
// List of dimension names
dimensionNames: Array<String>,
// The dimensions of data index, Such as 0 or 1 or 2 ...
// Used only in radar charts .
dimensionIndex: number,
// The color of the data graphic
color: string
}
边栏推荐
- Tongweb card, tongweb card, tongweb card
- Leetcode- third largest number - simple
- Leetcode- reverse vowels in string - simple
- 自定义View
- The technical analysis of ERP systems of the two camps in the world has been picked up many times.
- Leetcode- complement of numbers - simple
- Adding classes dynamically in uni app
- = = relation between int and integer
- MySQL trigger
- 本地文件秒搜工具 Everything
猜你喜欢
Rk3399 hid gadget configuration
Self summarizing
ArrayList loop removes the pit encountered
The difference between the increment and decrement operators before and after variables i+, +i, I –, – I
1+1>2,Share Creators可以帮助您实现
Echart矩形树图:简单实现矩形树图
推荐扩容工具,彻底解决C盘及其它磁盘空间不够的难题
USB debugging assistant (20191028)
Use of Nacos configuration center
【DP之01背包】
随机推荐
1016 part a+b (15 points)
Printf function
Echart折线图:当多条折线存在相同name,图例仍全部显示
DLL bit by bit
Leetcode- minimum number of operations to make array elements equal - simple
Waterfall flow layout of uni app Homepage
Function and application scenario of field setaccessible() method
Uniapp dynamically shows / hides the navigation bar return button
Regular verification of mobile phone number, landline email ID card
Turn to 2005
js-bom
Concurrent programming -- countdownlatch combined with thread pool
Uni app provincial and urban linkage
自定义View —— 可伸展的CollapsExpendView
[compilation and assembly link] coff file and structure description
Echart line chart: different colors are displayed when the names of multiple line charts are the same
Echart柱状图:x轴显示value,y轴显示类别
Leetcode- intersection of two arrays - simple
2021-11-04 implementation of binary search
软件测试——接口常见问题汇总