正文

一图掌握：echarts全解析，揭秘海量可视化类型！

/0 浏览量
0701

ECharts 是一个使用 JavaScript 实现的开源可视化库，它能够轻松地将数据转换为直观的图表。ECharts 提供了多种图表类型，包括折线图、柱状图、散点图、饼图、雷达图、地图、力导向图等，几乎涵盖了数据可视化的所有需求。本文将详细解析 ECharts 的各种可视化类型，帮助您快速掌握这一强大的工具。

1. 基础图表

1.1 折线图

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

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

1.2 柱状图

柱状图适合展示各个类别的数据对比。以下是一个简单的柱状图示例：

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

1.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: '55%',
        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);

2. 高级图表

2.1 散点图

散点图适合展示两个变量之间的关系。以下是一个简单的散点图示例：

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '散点图示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销量',
        type: 'scatter',
        data: [
            [10.0, 8.04],
            [8.0, 6.95],
            [13.0, 7.58],
            [9.0, 8.81],
            [11.0, 8.33],
            [14.0, 9.96],
            [6.0, 7.24],
            [4.0, 4.26],
            [12.0, 10.84],
            [7.0, 4.82],
            [5.0, 5.68]
        ]
    }]
};

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

2.2 雷达图

雷达图适合展示多变量之间的对比。以下是一个简单的雷达图示例：

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '雷达图示例'
    },
    tooltip: {},
    legend: {
        orient: 'vertical',
        left: 'left',
        data:['销量']
    },
    xAxis: {
        type: 'category',
        data: ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销量',
        type: 'radar',
        data: [
            [55, 66, 77, 88, 99, 100]
        ]
    }]
};

// 使用刚指定的配置项和数据显示图表。
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:['销量']
    },
    xAxis: {},
    yAxis: {},
    series: [{
        name: '销量',
        type: 'map',
        mapType: 'china',
        data: [
            {name: '广东', value: 55},
            {name: '北京', value: 66},
            {name: '上海', value: 77},
            {name: '浙江', value: 88},
            {name: '江苏', value: 99},
            {name: '山东', value: 100}
        ]
    }]
};

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

3. 动态图表

ECharts 支持动态数据更新，以下是一个简单的动态折线图示例：

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '动态折线图示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        type: 'category',
        data: []
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'line',
        data: []
    }]
};

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

// 动态更新数据
setInterval(function () {
    var data = [
        [new Date().getTime(), Math.round(Math.random() * 1000)],
        [new Date().getTime() + 2000, Math.round(Math.random() * 1000)],
        [new Date().getTime() + 4000, Math.round(Math.random() * 1000)],
        [new Date().getTime() + 6000, Math.round(Math.random() * 1000)],
        [new Date().getTime() + 8000, Math.round(Math.random() * 1000)],
        [new Date().getTime() + 10000, Math.round(Math.random() * 1000)]
    ];

    var timeData = [];
    var valueData = [];

    for (var i = 0; i < data.length; i++) {
        timeData.push(data[i][0]);
        valueData.push(data[i][1]);
    }

    myChart.setOption({
        xAxis: {
            data: timeData
        },
        series: [{
            data: valueData
        }]
    });
}, 1000);

通过以上示例，您可以对 ECharts 的各种可视化类型有一个全面的了解。在实际应用中，您可以根据自己的需求选择合适的图表类型，并通过 ECharts 的配置项进行定制。希望本文能帮助您快速掌握 ECharts，并将其应用于实际项目中。

-- 展开阅读全文 --