新手学ECharts，从基础图表到实战案例的入门路线攻略

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以轻松地嵌入到网页中，用于数据可视化。对于新手来说，ECharts 提供了丰富的图表类型和灵活的配置项，可以帮助你快速入门并实现各种数据可视化效果。下面，我将为你详细介绍从基础图表到实战案例的入门路线攻略。

一、ECharts 简介

1.1 ECharts 的优势

丰富的图表类型：ECharts 支持多种图表类型，如折线图、柱状图、饼图、散点图、地图等。
高度可定制：ECharts 提供了丰富的配置项，可以自定义图表的颜色、样式、动画等。
跨平台支持：ECharts 支持多种浏览器和操作系统，包括 Windows、Linux、macOS 等。
社区活跃：ECharts 拥有庞大的开发者社区，可以方便地获取帮助和支持。

1.2 ECharts 的应用场景

数据可视化：展示各类数据，如统计图表、趋势图、地理信息等。
产品展示：展示产品特性、功能等，提高用户体验。
网站分析：分析网站流量、用户行为等数据。

二、ECharts 入门教程

2.1 环境搭建

安装 Node.js：ECharts 支持使用 Node.js 进行开发，因此首先需要安装 Node.js。
安装 ECharts：可以通过 npm 或 yarn 安装 ECharts。

npm install echarts --save
# 或者
yarn add echarts

2.2 基础图表

折线图：展示数据随时间或其他变量的变化趋势。

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/line');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '折线图示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

柱状图：展示各类数据的大小对比。

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '柱状图示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

2.3 高级图表

饼图：展示数据占比。

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入饼图
require('echarts/lib/chart/pie');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '饼图示例'
    },
    tooltip: {},
    legend: {
        orient: 'vertical',
        left: 'left',
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

地图：展示地理信息。

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图
require('echarts/lib/chart/map');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图示例'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '销售',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '北京',value: Math.round(Math.random()*1000)},
                {name: '天津',value: Math.round(Math.random()*1000)},
                {name: '上海',value: Math.round(Math.random()*1000)},
                {name: '重庆',value: Math.round(Math.random()*1000)},
                {name: '河北',value: Math.round(Math.random()*1000)},
                {name: '山西',value: Math.round(Math.random()*1000)},
                {name: '辽宁',value: Math.round(Math.random()*1000)},
                {name: '吉林',value: Math.round(Math.random()*1000)},
                {name: '黑龙江',value: Math.round(Math.random()*1000)},
                {name: '江苏',value: Math.round(Math.random()*1000)},
                {name: '浙江',value: Math.round(Math.random()*1000)},
                {name: '安徽',value: Math.round(Math.random()*1000)},
                {name: '福建',value: Math.round(Math.random()*1000)},
                {name: '江西',value: Math.round(Math.random()*1000)},
                {name: '山东',value: Math.round(Math.random()*1000)},
                {name: '河南',value: Math.round(Math.random()*1000)},
                {name: '湖北',value: Math.round(Math.random()*1000)},
                {name: '湖南',value: Math.round(Math.random()*1000)},
                {name: '广东',value: Math.round(Math.random()*1000)},
                {name: '海南',value: Math.round(Math.random()*1000)},
                {name: '四川',value: Math.round(Math.random()*1000)},
                {name: '贵州',value: Math.round(Math.random()*1000)},
                {name: '云南',value: Math.round(Math.random()*1000)},
                {name: '陕西',value: Math.round(Math.random()*1000)},
                {name: '甘肃',value: Math.round(Math.random()*1000)},
                {name: '青海',value: Math.round(Math.random()*1000)},
                {name: '台湾',value: Math.round(Math.random()*1000)},
                {name: '内蒙古',value: Math.round(Math.random()*1000)},
                {name: '广西',value: Math.round(Math.random()*1000)},
                {name: '西藏',value: Math.round(Math.random()*1000)},
                {name: '宁夏',value: Math.round(Math.random()*1000)},
                {name: '新疆',value: Math.round(Math.random()*1000)},
                {name: '香港',value: Math.round(Math.random()*1000)},
                {name: '澳门',value: Math.round(Math.random()*1000)}
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

三、实战案例

3.1 项目一：销售数据分析

需求：分析某公司近一年的销售数据，展示各类产品的销售情况。
技术：使用 ECharts 的柱状图和折线图展示数据。

3.2 项目二：用户行为分析

需求：分析某网站的用户行为，展示用户访问路径、停留时间等数据。
技术：使用 ECharts 的地图和散点图展示数据。

3.3 项目三：产品特性展示

需求：展示某产品的特性，如功能、优势等。
技术：使用 ECharts 的饼图和环形图展示数据。

四、总结

ECharts 是一个功能强大的数据可视化库，可以帮助你轻松实现各种数据可视化效果。通过以上入门教程和实战案例，相信你已经对 ECharts 有了一定的了解。接下来，你可以根据自己的需求，不断学习和实践，将 ECharts 应用于更多项目中。