聊了一晚上,更确信 AI 离取代人还差很远
2026/5/10 12:42:07
ECharts(Apache ECharts)是一个由 Apache 基金会维护的开源 JavaScript 数据可视化库,它提供丰富的图表类型(如折线图、柱状图、饼图、散点图、地图等),支持高度交互和自定义,兼容主流浏览器和移动设备,免费商用(Apache-2.0 协议)。
以下是一个简单的柱状图示例,直接复制到 HTML 文件中运行即可。
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="utf-8"><title>我的第一个 ECharts 图表</title><!-- 从 CDN 引入 ECharts(推荐最新版) --><scriptsrc="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script></head><body><!-- 为 ECharts 准备一个具备大小的 DOM 容器 --><divid="main"style="width:800px;height:500px;"></div><scripttype="text/javascript">// 初始化 ECharts 实例varmyChart=echarts.init(document.getElementById('main'));// 配置选项(option)varoption={title:{text:'ECharts 入门示例:销量柱状图'},tooltip:{},// 鼠标悬停提示legend:{data:['销量']},xAxis:{data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']},yAxis:{},series:[{name:'销量',type:'bar',// 图表类型:bar 为柱状图data:[5,20,36,10,10,20]}]};// 使用配置项显示图表myChart.setOption(option);</script></body></html>保存为index.html,用浏览器打开即可看到一个简单的柱状图。
echarts.init(dom)。myChart.setOption(option)。更多高级用法(如异步加载数据、主题切换、事件监听),请参考官方手册或示例 gallery,那里有上千个可直接复制的代码示例。
如果你有具体图表需求(如饼图、地图、动态数据),告诉我,我可以给出针对性示例!