正文

轻松掌握ECharts图表设计：从入门到精通，打造专业级数据可视化作品

/0 浏览量
0415

ECharts，全称是Enterprise Charts，是一款使用 JavaScript 实现的开源可视化库，它能够轻松实现各种图表的绘制，广泛应用于企业级应用中。无论是数据分析、业务监控还是数据展示，ECharts 都能提供强大的支持。本文将带领大家从入门到精通，一步步打造专业级的数据可视化作品。

第一节：ECharts 入门

1.1 什么是 ECharts？

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了一套丰富的图表类型，包括折线图、柱状图、饼图、散点图、地图等，同时还支持丰富的交互功能。

1.2 ECharts 的特点

  • 跨平台：ECharts 支持多种浏览器和操作系统，包括 Windows、Mac、Linux 等。
  • 丰富的图表类型：提供多种图表类型，满足不同场景的需求。
  • 易用性：使用简单，通过配置项即可实现各种图表效果。
  • 高度定制：支持自定义图表样式、动画效果等。

1.3 ECharts 的安装

首先，我们需要在项目中引入 ECharts 的 JavaScript 库。可以通过以下两种方式引入：

  • CDN：在 HTML 文件中通过 <script> 标签引入 ECharts 的 CDN 链接。
  • npm：使用 npm 包管理工具安装 ECharts。

第二节：ECharts 基础图表

2.1 柱状图

柱状图是一种常用的图表类型，用于展示不同类别之间的数量对比。以下是一个简单的柱状图示例：

// 基于准备好的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.2 折线图

折线图适用于展示数据随时间变化的趋势。以下是一个简单的折线图示例：

// 基于准备好的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);

2.3 饼图

饼图适用于展示不同类别在整体中的占比。以下是一个简单的饼图示例：

// 基于准备好的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:5, name:'衬衫'},
                {value:20, name:'羊毛衫'},
                {value:36, name:'雪纺衫'},
                {value:10, name:'裤子'},
                {value:10, name:'高跟鞋'},
                {value:20, name:'袜子'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

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

第三节：ECharts 高级图表

3.1 地图

地图是 ECharts 中的一种特殊图表类型，可以展示地理位置、区域分布等信息。以下是一个简单的中国地图示例：

// 基于准备好的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: false
            },
            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)}
            ]
        }
    ]
};

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

3.2 3D 图表

3D 图表可以展示三维空间中的数据，更加直观地展示数据之间的关系。以下是一个简单的 3D 柱状图示例：

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '3D 柱状图示例'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    xAxis3D: {
        type: 'category',
        data: ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
    },
    yAxis3D: {
        type: 'value'
    },
    zAxis3D: {
        type: 'value'
    },
    series: [{
        name: '销量',
        type: 'bar',
        data: [
            [0, 0, 5],
            [0, 1, 20],
            [0, 2, 36],
            [0, 3, 10],
            [0, 4, 10],
            [0, 5, 20]
        ]
    }]
};

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

第四节：ECharts 交互与动画

4.1 交互

ECharts 支持丰富的交互功能，如点击、鼠标悬停等。以下是一个简单的点击交互示例：

// 基于准备好的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],
        itemStyle: {
            normal: {
                color: function(params) {
                    // 通过params获取当前项的值
                    var value = params.value;
                    if (value > 30) {
                        return '#ff0000';
                    } else if (value > 20) {
                        return '#ff7f50';
                    } else {
                        return '#92c1de';
                    }
                }
            }
        }
    }]
};

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

// 监听点击事件
myChart.on('click', function (params) {
    alert(params.name + '的销量为：' + params.value);
});

4.2 动画

ECharts 支持丰富的动画效果，可以增强图表的视觉效果。以下是一个简单的动画效果示例：

// 基于准备好的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],
        animationDuration: 1000 // 动画时长为1000毫秒
    }]
};

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

第五节：ECharts 实战案例

5.1 数据可视化平台搭建

以下是一个简单的数据可视化平台搭建步骤：

  1. 需求分析：明确平台的功能和目标用户。
  2. 数据采集：获取所需数据，并进行清洗和处理。
  3. 图表设计：根据需求选择合适的图表类型，并配置图表样式。
  4. 交互设计：设计图表的交互功能，如点击、鼠标悬停等。
  5. 平台搭建：使用 ECharts 和其他相关技术搭建数据可视化平台。

5.2 业务监控

以下是一个简单的业务监控示例：

  1. 数据采集：通过 API 或数据接口获取业务数据。
  2. 图表设计：使用 ECharts 绘制折线图、柱状图等图表，展示业务数据趋势。
  3. 报警机制：根据业务需求设置报警阈值，当数据超过阈值时发送报警信息。

第六节：ECharts 高级技巧

6.1 数据回填

在数据采集过程中，可能会出现数据缺失的情况。ECharts 提供了数据回填功能，可以自动填充缺失的数据。以下是一个简单的数据回填示例：

// 基于准备好的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, null, 10, 10, 20],
        smooth: true // 平滑曲线
    }]
};

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

6.2 数据格式转换

在数据采集过程中，可能需要将数据转换为 ECharts 所需的格式。以下是一个简单的数据格式转换示例：

// 原始数据
var data = [
    {name: '衬衫', value: 5},
    {name: '羊毛衫', value: 20},
    {name: '雪纺衫', value: null},
    {name: '裤子', value: 10},
    {name: '高跟鞋', value: 10},
    {name: '袜子', value: 20}
];

// 转换数据格式
var transformedData = data.map(function(item) {
    return [item.name, item.value];
});

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '数据格式转换示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: transformedData.map(function(item) {
            return item[0];
        })
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'line',
        data: transformedData.map(function(item) {
            return item[1];
        }),
        smooth: true // 平滑曲线
    }]
};

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

第七节：ECharts 总结

ECharts 是一款功能强大的数据可视化库，可以轻松实现各种图表的绘制。通过本文的学习，相信你已经掌握了 ECharts 的基本用法和高级技巧。在实际应用中，可以根据需求选择合适的图表类型，并进行个性化定制。同时，ECharts 还在不断更新迭代，未来将会有更多功能丰富的图表类型和交互效果等待我们去探索。

-- 展开阅读全文 --