从入门到精通：轻松掌握echarts图表制作技巧，一文档全搞定！

引言

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以轻松地嵌入网页中，用于展示数据图表。无论是初学者还是有经验的开发者，ECharts 都能提供丰富的图表类型和定制选项。本文将带你从入门到精通，全面掌握 ECharts 图表制作的技巧。

第1章：ECharts 简介

1.1 ECharts 的特点

高性能：ECharts 采用 Canvas 和 SVG 双渲染模式，确保在不同浏览器和设备上都能提供流畅的图表展示。
丰富的图表类型：支持折线图、柱状图、饼图、散点图、地图等多种图表类型。
高度可定制：可以通过配置项对图表的颜色、大小、动画等进行个性化设置。
易于使用：简单易学的 API 设计，方便开发者快速上手。

1.2 ECharts 的安装与引入

ECharts 是一个纯 JavaScript 库，可以通过以下方式引入到项目中：

<!-- 引入 ECharts 文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/echarts.min.js"></script>

第2章：基础图表制作

2.1 创建图表实例

在 HTML 中添加一个用于绘制图表的容器元素：

<div id="main" style="width: 600px;height:400px;"></div>

然后通过 JavaScript 初始化图表实例：

var myChart = echarts.init(document.getElementById('main'));

2.2 配置图表选项

ECharts 使用 JSON 格式的配置项来描述图表的各种属性，例如：

var option = { title: { text: '示例图表' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] };

2.3 设置图表

使用 setOption 方法将配置项设置到图表实例中：

myChart.setOption(option);

第3章：高级图表制作

3.1 饼图

饼图是展示占比关系的一种图表。以下是一个饼图的例子：

var pieOption = { title: { text: '饼图示例', subtext: '纯属虚构', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left', data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] }, 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, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] }; myChart.setOption(pieOption);

3.2 地图

地图是展示地理位置分布的一种图表。以下是一个地图图表的例子：

var mapOption = { title: { text: '世界地图示例' }, tooltip: { trigger: 'item' }, series: [{ name: '世界地图', type: 'map', mapType: 'world', roam: true, label: { show: false, position: 'center', formatter: '{b}' }, itemStyle: { areaColor: '#323c48', borderColor: '#111' }, emphasis: { itemStyle: { areaColor: '#2a333d' } }, data: [ {name: '非洲',value: 590}, {name: '欧洲',value: 799}, {name: '北美',value: 250}, {name: '南美',value: 604}, {name: '亚洲',value: 903}, {name: '大洋洲',value: 430}, {name: '中东',value: 422} ] }] }; myChart.setOption(mapOption);

第4章：图表的交互与动画

4.1 数据动态更新

ECharts 支持动态更新图表数据。以下是一个动态更新图表数据的例子：

setInterval(function () { var option = { series: [{ data: [ {value: Math.round(Math.random() * 1000)}, {value: Math.round(Math.random() * 1000)}, {value: Math.round(Math.random() * 1000)}, {value: Math.round(Math.random() * 1000)}, {value: Math.round(Math.random() * 1000)}, {value: Math.round(Math.random() * 1000)} ] }] }; myChart.setOption(option); }, 2000);

4.2 动画效果

ECharts 支持丰富的动画效果。以下是一个添加动画效果的例子：

var animationOption = { series: [{ data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ], type: 'pie', radius: '55%', center: ['50%', '60%'], roseType: 'radius', label: { normal: { textStyle: { color: '#fff' } } }, animationType: 'scale', animationEasing: 'elasticOut', animationDelay: function (idx) { return Math.random() * 200; } }] }; myChart.setOption(animationOption);

第5章：实战案例

5.1 股票价格走势图

以下是一个股票价格走势图的例子：

var stockOption = { title: { text: '股票价格走势图' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, xAxis: { type: 'category', data: ['2015-01-01', '2015-01-02', '2015-01-03', '2015-01-04', '2015-01-05', '2015-01-06', '2015-01-07', '2015-01-08', '2015-01-09', '2015-01-10', '2015-01-11', '2015-01-12', '2015-01-13', '2015-01-14', '2015-01-15', '2015-01-16', '2015-01-17', '2015-01-18', '2015-01-19', '2015-01-20'] }, yAxis: { type: 'value' }, series: [{ name: '上证指数', type: 'line', data: [2000, 2100, 2200, 2300, 2400, 2500, 2600, 2700, 2800, 2900, 3000, 3100, 3200, 3300, 3400, 3500, 3600, 3700, 3800, 3900], smooth: true }] }; myChart.setOption(stockOption);

5.2 演示平台流量分析

以下是一个演示平台流量分析的例子：

var platformOption = { title: { text: '演示平台流量分析' }, tooltip: { trigger: 'axis' }, legend: { data: ['浏览量', '下载量', '注册用户'] }, xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] }, yAxis: { type: 'value' }, series: [{ name: '浏览量', type: 'line', data: [1000, 1200, 1500, 1800, 2000, 2500, 3000, 3500, 4000, 4500, 5000, 5500], smooth: true }, { name: '下载量', type: 'line', data: [300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400], smooth: true }, { name: '注册用户', type: 'line', data: [50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600], smooth: true }] }; myChart.setOption(platformOption);