VPasCode Bây giờ Hỗ trợ Chỉnh sửa Biểu đồ – Nền tảng Chỉnh sửa Biểu đồ Tối ưu và Chuyển đổi Văn bản thành Sơ đồ của Bạn

option = {
  title: { text: 'Doanh số theo quý theo khu vực' },
  tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
  legend: { data: ['Bắc', 'Nam', 'Đông', 'Tây'] },
  xAxis: { type: 'value', name: 'Doanh thu (đơn vị: 1.000 USD)' },
  yAxis: { type: 'category', data: ['Q1', 'Q2', 'Q3', 'Q4'] },
  series: [
    { name: 'Bắc', type: 'bar', stack: 'Tổng cộng', data: [85, 120, 95, 150] },
    { name: 'Nam', type: 'bar', stack: 'Tổng cộng', data: [65, 90, 110, 130] },
    { name: 'Đông',  type: 'bar', stack: 'Tổng cộng', data: [45, 70, 85, 100] },
    { name: 'Tây',  type: 'bar', stack: 'Tổng cộng', data: [30, 50, 60, 75] }
  ]
};

option = {
  title: { text: 'Lượt truy cập hàng tháng', left: 'center' },
  tooltip: { trigger: 'axis' },
  grid: { left: 40, right: 20, top: 50, bottom: 30, containLabel: true },
  xAxis: { type: 'category', data: ['Tháng 1','Tháng 2','Tháng 3','Tháng 4','Tháng 5','Tháng 6'] },
  yAxis: { type: 'value' },
  series: [{
    name: 'Lượt truy cập',
    type: 'line',
    smooth: true,
    data: [820, 932, 901, 934, 1290, 1330],
    areaStyle: { opacity: 0.3 }
  }]
};

option = {
  title: { text: 'Lượt truy cập website hàng tháng (2026)' },
  xAxis: { type: 'category', boundaryGap: false, data: ['Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6', 'Tháng 7'] },
  yAxis: { type: 'value' },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'line',
    areaStyle: { color: '#ff6b6b' },
    lineStyle: { color: '#e03131' },
    itemStyle: { color: '#e03131' }
  }]
};

option = {
  title: { text: 'Nguồn truy cập vào một website', left: 'center' },
  tooltip: { trigger: 'item' },
  legend: { bottom: 10 },
  series: [
    {
      name: 'Nguồn truy cập',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Công cụ tìm kiếm' },
        { value: 735, name: 'Trực tiếp' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Quảng cáo liên minh' },
        { value: 300, name: 'Quảng cáo video' }
      ]
    }
  ]
};

option = {
  title: { text: 'Đánh giá khả năng của Service Mesh' },
  tooltip: {},
  radar: {
    indicator: [
      { name: 'Tốc độ xử lý (RPS)', max: 100 },
      { name: 'Khả năng chịu lỗi', max: 100 },
      { name: 'Hiệu quả sử dụng bộ nhớ', max: 100 },
      { name: 'Khả năng giám sát', max: 100 },
      { name: 'Bảo mật/TLS', max: 100 }
    ]
  },
  series: [{
    name: 'Hồ sơ dịch vụ',
    type: 'radar',
    data: [
      { value: [85, 90, 55, 95, 80], name: 'Nút proxy Go', areaStyle: { opacity: 0.3 } },
      { value: [40, 75, 90, 60, 90], name: 'Cổng Java cũ', areaStyle: { opacity: 0.1 } }
    ]
  }]
};

option = {
  title: { text: 'Độ trễ suy luận so với kích thước dữ liệu đầu vào', left: 'center' },
  tooltip: { trigger: 'item', formatter: function (p) { return 'Kích thước: ' + p.value[0] + ' KB<br />Độ trễ: ' + p.value[1] + ' ms'; } },
  xAxis: { name: 'Kích thước dữ liệu đầu vào (KB)', type: 'value', splitLine: { lineStyle: { type: 'dashed' } } },
  yAxis: { name: 'Độ trễ (ms)', type: 'value', splitLine: { lineStyle: { type: 'dashed' } } },
  series: [{
    type: 'scatter',
    symbolSize: 12,
    data: [
      [120, 450], [240, 580], [50, 210], [512, 1100], [320, 720],
      [180, 390], [450, 950], [90, 310], [600, 1340], [150, 410]
    ],
    itemStyle: { color: '#aa00ff' }
  }]
};

option = {
  title: { text: 'Thành phần bản quyền mã nguồn', left: 'center' },
  series: [{
    type: 'sunburst',
    radius: [0, '90%'],
    data: [{
      name: 'Mã nguồn mở',
      children: [
        { name: 'Thân thiện', children: [{ name: 'MIT', value: 55 }, { name: 'Apache 2.0', value: 30 }] },
        { name: 'Bắt buộc chia sẻ', children: [{ name: 'GPLv3', value: 12 }] }
      ]
    }, {
      name: 'Bản quyền',
      children: [{ name: 'Nhà cung cấp thương mại', value: 18 }]
    }]
  }]
};

option = {
  title: { text: 'Phân tích luồng chi phí cơ sở hạ tầng' },
  tooltip: { trigger: 'item', triggerOn: 'mousemove' },
  series: [{
    type: 'sankey',
    data: [
      { name: 'Tổng ngân sách' }, { name: 'AWS Cloud' }, { name: 'Công cụ SaaS' },
      { name: 'Tính toán EC2' }, { name: 'Lưu trữ RDS' }, { name: 'Giám sát' }
    ],
    links: [
      { source: 'Tổng ngân sách', target: 'AWS Cloud', value: 8000 },
      { source: 'Tổng ngân sách', target: 'Công cụ SaaS', value: 2000 },
      { source: 'AWS Cloud', target: 'Tính toán EC2', value: 5500 },
      { source: 'AWS Cloud', target: 'Lưu trữ RDS', value: 2500 },
      { source: 'Công cụ SaaS', target: 'Giám sát', value: 2000 }
    ],
    lineStyle: { color: 'source', curveness: 0.5 }
  }]
};

option = {
  title: { text: 'Tốc độ triển khai theo giờ', left: 'center' },
  tooltip: { position: 'top' },
  grid: { height: '50%', top: '15%' },
  xAxis: { type: 'category', data: ['12 giờ đêm', '4 giờ sáng', '8 giờ sáng', '12 giờ trưa', '4 giờ chiều', '8 giờ tối'], splitArea: { show: true } },
  yAxis: { type: 'category', data: ['Thứ Hai', 'Thứ Ba', 'Thứ Tư', 'Thứ Năm', 'Thứ Sáu', 'Thứ Bảy', 'Chủ Nhật'], splitArea: { show: true } },
  visualMap: { min: 0, max: 30, type: 'continuous', orient: 'ngang', left: 'center', bottom: '15%' },
  series: [{
    name: 'Triển khai',
    type: 'heatmap',
    data: [[0,0,5],[0,1,1],[0,2,0],[0,3,12],[0,4,18],[0,5,8],[1,3,15],[2,4,22],[3,3,30],[4,4,25],[5,0,2],[6,0,1]],
    label: { show: true },
    emphasis: { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)' } }
  }]
};