![\"bi\u1ec3u](\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/basic-line-chart-1024x500.png\")
<\/figure><\/div>\n\n\n\n\u1ede ch\u1ed7 Edit Example l\u00e0 n\u01a1i ch\u00fang ta thao t\u00e1c ch\u1ec9nh s\u1eeda xem \u0111i\u1ec1u g\u00ec x\u1ea3y ra v\u1edbi bi\u1ec3u \u0111\u1ed3 \u0111\u01b0\u1eddng c\u01a1 b\u1ea3n n\u00e0y.<\/p>\n\n\n\n
D\u1eef li\u1ec7u m\u1eabu c\u1ee7a n\u00f3 nh\u01b0 sau:<\/p>\n\n\n\n
option = {\n xAxis: {\n type: 'category',\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n },\n yAxis: {\n type: 'value'\n },\n series: [{\n data: [150, 230, 224, 218, 135, 147, 260],\n type: 'line'\n }]\n};<\/code><\/pre>\n\n\n\nCh\u00fang ta nh\u1eadn th\u1ea5y m\u1ed9t s\u1ed1 \u0111i\u1ec1u sau:<\/p>\n\n\n\n
- C\u00e1c t\u00f9y ch\u1ecdn \u0111\u01b0\u1ee3c \u0111\u1eb7t trong
option<\/code>, v\u1edbi 2 d\u1ea5u ngo\u1eb7c nh\u1ecdn \u0111\u00f3ng m\u1edf { }, cu\u1ed1i c\u00f9ng l\u00e0 ;<\/li>- C\u00e1c c\u1ee5m d\u1eef li\u1ec7u \u0111\u01b0\u1ee3c th\u1ea5y r\u00f5 bao g\u1ed3m
xAxis<\/code> cho tr\u1ee5c ho\u00e0nh, yAxis<\/code> cho tr\u1ee5c tung, series<\/code> \u0111\u1ec3 ch\u1ec9 \u0111\u1ebfn chu\u1ed7i gi\u00e1 tr\u1ecb cho bi\u1ec3u \u0111\u1ed3;<\/li>- \u1ede tr\u1ee5c tung
xAxis<\/code> ch\u00fang ta th\u1ea5y n\u00f3 \u0111\u01b0\u1ee3c \u0111\u1eb7t trong d\u1ea5u ngo\u1eb7c nh\u1ecdn { }, k\u1ebft th\u00fac c\u1ee5m d\u1eef li\u1ec7u n\u00f3 \u0111\u01b0\u1ee3c \u0111\u1eb7t d\u1ea5y ph\u1ea9y. B\u00ean trong n\u00f3 c\u00f3 type: 'category'<\/code> ch\u00fang ta c\u00f3 th\u1ec3 hi\u1ec3u l\u00e0 ki\u1ec3u \u0111\u01b0\u1ee3c quy \u0111\u1ecbnh l\u00e0 category v\u00e0 ngay b\u00ean d\u01b0\u1edbi l\u00e0 c\u00e1c data cho category;<\/li>data<\/code> \u0111\u01b0\u1ee3c \u0111\u1eb7t trong d\u1ea5u ngo\u1eb7c vu\u00f4ng [ ], m\u1ed7i ph\u1ea7n t\u1eed d\u1eef li\u1ec7u \u0111\u01b0\u1ee3c \u0111\u1eb7t trong d\u1ea5u nh\u00e1y \u0111\u01a1n, ph\u00e2n c\u00e1ch nhau c\u0169ng b\u1eb1ng d\u1ea5u ph\u1ea9y, d\u1eef li\u1ec7u cu\u1ed1i c\u00f9ng kh\u00f4ng c\u1ea7n th\u00eam d\u1ea5u ph\u1ea9y \u0111\u1eb1ng sau;<\/li>- V\u1edbi
yAxis<\/code> n\u00f3 c\u00f3 duy nh\u1ea5t th\u00f4ng tin type<\/code> l\u00e0 value<\/code>, ch\u00fang ta c\u00f3 th\u1ec3 hi\u1ec3u tr\u1ee5c tung l\u00e0 tr\u1ee5c th\u1ec3 hi\u1ec7n gi\u00e1 tr\u1ecb;<\/li>- Cu\u1ed1i c\u00f9ng l\u00e0
series<\/code> ch\u1ec9 data d\u1ea1ng s\u1ed1 cho c\u00e1c category t\u01b0\u01a1ng \u1ee9ng theo th\u1ee9 t\u1ef1. Series m\u1edf \u0111\u1ea7u b\u1eb1ng d\u1ea5u ngo\u1eb7c vu\u00f4ng, ti\u1ebfp theo l\u00e0 ngo\u1eb7c nh\u1ecdn. D\u1eef li\u1ec7u con b\u00ean trong g\u1ed3m data v\u00e0 type. data l\u00e0 d\u1ea1ng s\u1ed1, \u0111\u1eb7t trong ngo\u1eb7c vu\u00f4ng, kh\u00f4ng c\u1ea7n nh\u00e1y \u0111\u01a1n v\u1edbi s\u1ed1, ph\u00e2n c\u00e1ch nhau c\u0169ng b\u1eb1ng d\u1ea5u ph\u1ea9y. Type \u1edf ch\u1ed7 series l\u00e0 line<\/code> cho th\u1ea5y th\u00f4ng tin n\u00e0y s\u1ebd quy\u1ebft \u0111\u1ecbnh ki\u1ec3u hi\u1ec3n th\u1ecb c\u1ee7a bi\u1ec3u \u0111\u1ed3 l\u00e0 d\u1ea1ng \u0111\u01b0\u1eddng; <\/li><\/ul>\n\n\n\nTh\u1eed ch\u1ec9nh s\u1eeda m\u00e3<\/strong><\/p>\n\n\n\nThay \u0111\u1ed5i c\u00e1c gi\u00e1 tr\u1ecb s\u1ed1 trong data thu\u1ed9c series b\u1ea1n s\u1ebd th\u1ea5y bi\u1ec3u \u0111\u1ed3 thay \u0111\u1ed5i t\u01b0\u01a1ng \u1ee9ng. N\u1ebfu m\u1ed9t d\u1eef li\u1ec7u n\u00e0o \u0111\u00f3 b\u1ecb m\u1ea5t, ng\u00e0y cu\u1ed1i c\u00f9ng s\u1ebd b\u1ecb m\u1ea5t th\u00f4ng tin, r\u1ed3i c\u1ee9 th\u1ebf. T\u1ee9c l\u00e0 ki\u1ec3u qu\u00e9t l\u00e0 s\u1ebd t\u1eeb tr\u00e1i qua ph\u1ea3i, v\u00e0 kh\u00f4ng b\u1eaft bu\u1ed9c data ph\u1ea3i c\u00f3 s\u1ed1 l\u01b0\u1ee3ng d\u1eef li\u1ec7u \u0111\u00fang b\u1eb1ng s\u1ed1 l\u01b0\u1ee3ng category.<\/p>\n\n\n\n
\u1ede ph\u1ea7n tr\u1ee5c tung, b\u1ea1n c\u00f3 th\u1ec3 th\u1eed thay \u0111\u1ed5i c\u00e1c th\u00f4ng tin data c\u1ee7a category, v\u00ed d\u1ee5 Vi\u1ec7t h\u00f3a n\u00f3 th\u00e0nh t\u1eeb th\u1ee9 hai \u0111\u1ebfn ch\u1ee7 nh\u1eadt. B\u1ea3ng c\u0169ng s\u1ebd thay \u0111\u1ed5i t\u01b0\u01a1ng \u1ee9ng.<\/p>\n\n\n\n
Cu\u1ed1i c\u00f9ng b\u1ea1n c\u00f3 th\u1ec3 th\u1eed \u0111\u1ea3o c\u1ed9t t\u1eeb xAxis sang yAxis. B\u1ea1n c\u0169ng s\u1ebd th\u1ea5y c\u00e1c c\u1ed9t \u0111\u1ea3o v\u1edbi nhau (d\u0129 nhi\u00ean c\u00e1i n\u00e0y \u0111\u1ec3 ngh\u1ecbch th\u00f4i, ch\u1ee9 \u0111\u1ea3o c\u1ed9t nh\u01b0 v\u1eady th\u00ec kh\u00f4ng \u1ed5n).<\/p>\n\n\n\n
M\u00e3 t\u00f4i v\u1eeba ngh\u1ecbch xong:<\/p>\n\n\n\n
option = {\n yAxis: {\n type: 'category',\n data: ['Th\u1ee9 hai', 'Th\u1ee9 ba', 'Th\u1ee9 t\u01b0', 'Th\u1ee9 n\u0103m', 'Th\u1ee9 s\u00e1u', 'Th\u1ee9 b\u1ea3y', 'Ch\u1ee7 nh\u1eadt']\n },\n xAxis: {\n type: 'value'\n },\n series: [{\n data: [130, 114, 218, 147,160, 150, 500],\n type: 'line'\n }]\n};<\/code><\/pre>\n\n\n\nM\u1ed9t s\u1ed1 l\u01b0u \u00fd nh\u1ecf kh\u00e1c:<\/strong><\/p>\n\n\n\n- D\u1eef li\u1ec7u \u1edf cu\u1ed1i kh\u00f4ng c\u1ea7n th\u00eam d\u1ea5u ph\u1ea9y, nh\u01b0ng n\u1ebfu ch\u00fang ta th\u00eam n\u00f3 c\u0169ng kh\u00f4ng g\u00e2y l\u1ed7i. V\u00ed d\u1ee5:<\/li><\/ul>\n\n\n\n
option = {\n yAxis: {\n type: 'category',\n data: ['Th\u1ee9 hai', 'Th\u1ee9 ba', 'Th\u1ee9 t\u01b0', 'Th\u1ee9 n\u0103m', 'Th\u1ee9 s\u00e1u', 'Th\u1ee9 b\u1ea3y', 'Ch\u1ee7 nh\u1eadt',],\n },\n xAxis: {\n type: 'value',\n },\n series: [{\n data: [130, 114, 218, 147,160, 150, 500],\n type: 'line',\n }],\n};<\/code><\/pre>\n\n\n\nT\u1ea5t nhi\u00ean b\u00ecnh th\u01b0\u1eddng th\u00ec ch\u00fang ta kh\u00f4ng n\u00ean l\u00e0m th\u1ebf, v\u1eeba m\u1ea5t c\u00f4ng m\u00e0 tr\u00f4ng m\u00e3 kh\u00f3 nh\u00ecn.<\/p>\n\n\n\n
- D\u1ea5u nh\u00e1y \u0111\u01a1n thay b\u1eb1ng d\u1ea5u nh\u00e1y k\u00e9p c\u0169ng kh\u00f4ng \u1ea3nh h\u01b0\u1edfng g\u00ec, v\u00ed d\u1ee5:<\/li><\/ul>\n\n\n\n
data: [\"Th\u1ee9 hai\", \"Th\u1ee9 ba\", \"Th\u1ee9 t\u01b0\", \"Th\u1ee9 n\u0103m\", \"Th\u1ee9 s\u00e1u\", \"Th\u1ee9 b\u1ea3y\", \"Ch\u1ee7 nh\u1eadt\"] \/\/ kh\u00f4ng c\u00f3 l\u1ed7i<\/code><\/pre>\n\n\n\n- Nh\u01b0ng d\u1ea5u ph\u1ea9y m\u00e0 thay b\u1eb1ng ch\u1ea5m ph\u1ea9y l\u00e0 s\u1ebd c\u00f3 l\u1ed7i. V\u00ed d\u1ee5:<\/li><\/ul>\n\n\n\n
data: ['Th\u1ee9 hai';<\/strong> 'Th\u1ee9 ba', 'Th\u1ee9 t\u01b0', 'Th\u1ee9 n\u0103m', 'Th\u1ee9 s\u00e1u', 'Th\u1ee9 b\u1ea3y', 'Ch\u1ee7 nh\u1eadt'] \/\/ c\u00e1i n\u00e0y s\u1ebd kh\u00f4ng ch\u1ea1y \u0111\u01b0\u1ee3c<\/code><\/pre>\n\n\n\n