正文

学会echarts，轻松制作组合图表，数据可视化不再难

/0 浏览量
0824

在数字化时代，数据可视化成为展示信息、分析数据和辅助决策的重要手段。ECharts 是一款使用 JavaScript 实现的开源可视化库，它提供了丰富的图表类型和强大的配置选项，让开发者能够轻松地制作出各种复杂且美观的图表。本文将带你入门 ECharts，重点讲解如何制作组合图表，让你在数据可视化道路上更加得心应手。

一、ECharts 简介

ECharts 是一个使用 JavaScript 实现的开源可视化库，由百度团队开发并维护。它具有以下特点：

  • 丰富的图表类型：支持折线图、柱状图、饼图、散点图、地图等多种图表类型。
  • 高度可配置：通过丰富的配置项，可以实现对图表样式、交互等属性的细致调整。
  • 跨平台支持：兼容多种浏览器和操作系统，包括移动端和桌面端。
  • 高性能：采用 canvas 和 SVG 技术，保证图表渲染的流畅性和响应速度。

二、制作组合图表

组合图表是指将两种或两种以上的图表类型组合在一起，以展示更丰富的数据信息。ECharts 支持多种图表类型的组合，以下是一些常见的组合图表示例：

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]
    }, {
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

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

2. 饼图 + 柱状图

饼图和柱状图常用于展示数据的占比和对比。以下是一个简单的饼图 + 柱状图示例：

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '饼图 + 柱状图组合'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        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)'
                }
            }
        },
        {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }
    ]
};

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

3. 地图 + 标注

地图和标注常用于展示地理位置分布和特定区域的数值。以下是一个简单的地图 + 标注示例：

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图 + 标注组合'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data:['北京','天津','上海','重庆','河北','河南','云南','辽宁','黑龙江','湖南','安徽','山东','江苏','浙江','江西','湖北','广西','甘肃','山西','内蒙古','陕西','吉林','福建','贵州','广东','青海','西藏','四川','海南','台湾','香港','澳门']
    },
    visualMap: {
        min: 0,
        max: 2000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '销量',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: false
            },
            data:[
                {name: '北京',value: 5},
                {name: '天津',value: 20},
                {name: '上海',value: 36},
                {name: '广东',value: 10},
                {name: '福建',value: 10},
                {name: '浙江',value: 20}
            ]
        },
        {
            name: '标注',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: [
                {name: '北京',value: [116.46,39.92],itemStyle: {normal: {label: {show: true}}}},
                {name: '天津',value: [117.21,39.12],itemStyle: {normal: {label: {show: true}}}},
                {name: '上海',value: [121.47,31.23],itemStyle: {normal: {label: {show: true}}}},
                {name: '广东',value: [113.23,23.16],itemStyle: {normal: {label: {show: true}}}},
                {name: '福建',value: [119.28,26.07],itemStyle: {normal: {label: {show: true}}}},
                {name: '浙江',value: [120.19,30.26],itemStyle: {normal: {label: {show: true}}}}
            ]
        }
    ]
};

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

三、总结

通过本文的介绍，相信你已经对 ECharts 和组合图表有了初步的了解。在实际应用中，你可以根据自己的需求选择合适的图表类型和组合方式，制作出美观且富有信息量的图表。随着你对 ECharts 的不断学习和实践，你将能够轻松地应对各种数据可视化任务。

-- 展开阅读全文 --