ECharts 的核心知识点总结及常见图表示例

以下是 ECharts 的核心知识点总结及常见图表(折线图、柱状图、饼图)的实现示例,助你快速上手:


一、ECharts 核心知识点

1. 安装引入
  • CDN 引入
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
    
  • npm 安装
    npm install echarts --save
    
2. 基本步骤
  1. 准备容器:HTML 中定义 <div> 并设置宽高。
  2. 初始化实例echarts.init(dom)
  3. 配置选项:定义 option 对象。
  4. 渲染图表chart.setOption(option)
  5. 响应式:监听窗口变化调用 chart.resize()
3. 核心配置项
  • 标题title
  • 提示框tooltip
  • 图例legend
  • 坐标轴xAxis / yAxis(折线图、柱状图用)
  • 系列series(定义图表类型和数据)
  • 工具箱toolbox(保存图片、数据视图等工具)

二、快速实现常见图表

1. 折线图(Line Chart)
<div id="lineChart" style="width: 600px; height: 400px;"></div>

<script>
const lineChart = echarts.init(document.getElementById('lineChart'));
const option = {
  title: { text: '月度销售额趋势' },
  tooltip: { trigger: 'axis' },
  legend: { data: ['2023年', '2024年'] },
  xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月'] },
  yAxis: { type: 'value' },
  series: [
    { 
      name: '2023年',
      type: 'line',
      data: [150, 230, 224, 218, 135],
      smooth: true // 平滑曲线
    },
    {
      name: '2024年',
      type: 'line',
      data: [200, 180, 250, 190, 220]
    }
  ]
};
lineChart.setOption(option);

// 窗口变化自适应
window.addEventListener('resize', () => lineChart.resize());
</script>
2. 柱状图(Bar Chart)
<div id="barChart" style="width: 600px; height: 400px;"></div>

<script>
const barChart = echarts.init(document.getElementById('barChart'));
const option = {
  title: { text: '产品销量对比' },
  tooltip: { trigger: 'axis' },
  xAxis: { 
    type: 'category',
    data: ['产品A', '产品B', '产品C', '产品D']
  },
  yAxis: { type: 'value' },
  series: [{
    type: 'bar',
    data: [120, 200, 150, 80],
    itemStyle: { color: '#5470c6' }, // 自定义颜色
    barWidth: '40%' // 柱条宽度
  }]
};
barChart.setOption(option);
</script>
3. 饼图(Pie Chart)
<div id="pieChart" style="width: 600px; height: 400px;"></div>

<script>
const pieChart = echarts.init(document.getElementById('pieChart'));
const option = {
  title: { text: '用户访问来源' },
  tooltip: { trigger: 'item' },
  legend: { orient: 'vertical', left: 'left' },
  series: [{
    type: 'pie',
    radius: '50%', // 饼图半径
    data: [
      { value: 1048, name: '搜索引擎' },
      { value: 735, name: '直接访问' },
      { value: 580, name: '邮件营销' }
    ],
    label: {
      formatter: '{b}: {d}%' // 显示名称和百分比
    }
  }]
};
pieChart.setOption(option);
</script>

三、进阶技巧

1. 动态更新数据
// 更新数据
const newData = [30, 50, 70, 90, 110];
lineChart.setOption({
  series: [{ data: newData }]
});
2. 主题定制
// 使用内置主题
echarts.init(dom, 'dark');

// 或注册自定义主题
echarts.registerTheme('myTheme', {
  color: ['#c23531', '#2f4554', '#61a0a8']
});
echarts.init(dom, 'myTheme');
3. 交互事件
lineChart.on('click', (params) => {
  console.log('点击了数据:', params.name, params.value);
});

四、常见问题

1. 图表不显示
  • 确保容器设置了宽高。
  • 检查 option 配置是否正确。
2. 数据更新不生效
  • 使用 setOption(newOption, { notMerge: true }) 强制更新。
3. 性能优化
  • 大数据量使用 dataset 管理数据。
  • 分页加载或使用数据采样。

通过掌握这些核心知识点和示例,你可以快速实现常见图表并定制交互效果。更多配置参考 ECharts 官方文档

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值