正文

教你用echarts轻松实现高级图表，这些数据可视化案例让你一目了然

/0 浏览量
1015

在当今数据驱动的世界中，数据可视化是理解和传达复杂信息的关键工具。ECharts 是一个使用 JavaScript 实现的开源可视化库，它可以帮助开发者轻松创建交互式图表。无论是简单的柱状图还是复杂的地理信息系统（GIS）地图，ECharts 都能提供强大的支持和丰富的功能。以下是一些高级图表的案例，以及如何使用 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. 地理信息系统（GIS）地图

案例描述

GIS 地图可以展示地理位置数据，如城市人口分布、交通流量等。

实现代码

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '世界人口分布'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['亚洲', '非洲', '欧洲', '北美洲', '南美洲', '大洋洲']
    },
    series: [{
        name: '访问来源',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: [
            {value: 335, name: '亚洲'},
            {value: 310, name: '非洲'},
            {value: 234, name: '欧洲'},
            {value: 135, name: '北美洲'},
            {value: 1548, name: '南美洲'},
            {value: 1548, name: '大洋洲'}
        ],
        emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};

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

使用说明

这段代码创建了一个饼图，模拟了世界人口分布的地理信息系统。

3. 3D 散点图

案例描述

3D 散点图可以展示三维空间中的数据点，非常适合展示高维数据。

实现代码

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '3D 散点图'
    },
    tooltip: {},
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
    },
    zAxis: {
        type: 'value'
    },
    series: [{
        name: '三维数据',
        type: 'scatter',
        data: [
            [10.0, 8.04, 5.9],
            [8.0, 6.95, 7.58],
            [13.0, 7.77, 6.42],
            [9.0, 4.25, 10.0],
            [11.0, 4.74, 4.26],
            [14.0, 5.62, 5.93],
            [8.0, 5.15, 6.48],
            [12.0, 5.99, 5.73],
            [10.0, 6.33, 5.27],
            [13.0, 7.00, 6.28]
        ],
        markPoint: {
            data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
            ]
        },
        markLine: {
            data: [
                {type: 'average', name: '平均值'}
            ]
        }
    }]
};

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

使用说明

这段代码创建了一个3D散点图，展示了三维空间中的数据点。

总结

ECharts 提供了丰富的图表类型和配置选项，使得创建高级图表变得简单。通过以上案例，你可以看到如何使用 ECharts 创建柱状图、折线图组合、GIS 地图和3D散点图。这些图表可以帮助你更好地理解和展示数据，无论是用于商业报告还是学术研究。

-- 展开阅读全文 --