echarts-gen

ECharts图表生成器

使用场景

快速生成ECharts图表配置代码，支持中文标签。

常用图表模板

折线图

const option = {
  title: {
    text: '月度销售额趋势',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis',
    formatter: '{b}<br/>{a}: {c}万元'
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: {
    type: 'value',
    name: '销售额(万元)'
  },
  series: [{
    name: '销售额',
    type: 'line',
    data: [120, 200, 150, 80, 70, 110],
    smooth: true,
    areaStyle: {}
  }]
};

柱状图

const option = {
  title: { text: '各部门人数统计' },
  tooltip: { trigger: 'axis' },
  xAxis: {
    type: 'category',
    data: ['技术部', '产品部', '设计部', '运营部', '市场部']
  },
  yAxis: { type: 'value', name: '人数' },
  series: [{
    name: '人数',
    type: 'bar',
    data: [
      { value: 45, itemStyle: { color: '#5470c6' } },
      { value: 20, itemStyle: { color: '#91cc75' } },
      { value: 15, itemStyle: { color: '#fac858' } },
      { value: 25, itemStyle: { color: '#ee6666' } },
      { value: 18, itemStyle: { color: '#73c0de' } }
    ]
  }]
};

饼图

const option = {
  title: { text: '用户来源分布', left: 'center' },
  tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
  legend: { orient: 'vertical', left: 'left' },
  series: [{
    name: '来源',
    type: 'pie',
    radius: '50%',
    data: [
      { value: 1048, name: '搜索引擎' },
      { value: 735, name: '直接访问' },
      { value: 580, name: '微信分享' },
      { value: 484, name: '抖音引流' },
      { value: 300, name: '其他' }
    ],
    emphasis: {
      itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0,0,0,0.5)' }
    }
  }]
};

中文配置要点

• 设置 fontFamily: 'Microsoft YaHei, SimHei, sans-serif'
• 使用中文标签和提示
• 数字格式化：千分位分隔
• 日期格式：YYYY年MM月DD日