正文

掌握Echarts，轻松打造炫酷Web图表：50个实用案例教学，让你的数据可视化更精彩

/0 浏览量
0721

Echarts是一款功能强大的JavaScript图表库，它可以帮助开发者轻松地将数据可视化，创建出各种炫酷的Web图表。通过学习Echarts，你可以将复杂的数据以直观、美观的方式呈现给用户，从而提升数据分析和展示的效果。本文将为你提供50个实用案例，带你一步步掌握Echarts，让你的数据可视化更精彩。

案例一：基础图表

1.1 柱状图

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.2 折线图

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.1 柱状图与折线图

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.2 雷达图

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '雷达图示例'
    },
    tooltip: {},
    legend: {
        data:['指标']
    },
    xAxis: {
        type: 'category',
        data: ['销售（sales）', '管理（admin）', '信息技术（IT）', '客服（customer support）', '研发（R&D）']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '预算 vs 开销',
        type: 'radar',
        data: [
            [{
                value: [85, 80, 90, 60, 70],
                name: '预算分配（Budget Allocation）'
            }, {
                value: [80, 70, 80, 50, 60],
                name: '实际开销（Actual Expenses）'
            }]
        ]
    }]
};

myChart.setOption(option);

案例三：交互式图表

3.1 地图

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '地图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '访问来源',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: false,
            position: 'center',
            formatter: '{b}'
        },
        data: [
            {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 仪表盘

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '仪表盘示例'
    },
    tooltip: {
        formatter: '{a} <br/>{b}: {c}%'
    },
    series: [{
        name: '业务指标',
        type: 'gauge',
        min: 0,
        max: 100,
        splitNumber: 10,
        pointer: {
            width: 2
        },
        axisLine: {
            lineStyle: {
                color: [
                    [0.2, '#67e0e3'],
                    [0.8, '#1890ff'],
                    [1, '#fac858']
                ]
            }
        },
        axisTick: {
            show: false
        },
        splitLine: {
            show: false
        },
        axisLabel: {
            distance: 25,
            color: '#595959'
        },
        title: {
            show: false
        },
        detail: {
            valueAnimation: true,
            formatter: '{value}%',
            color: '#595959'
        },
        data: [{
            value: 50
        }]
    }]
};

myChart.setOption(option);

案例四：高级图表

4.1 雷达图与地图

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '雷达图与地图组合示例'
    },
    tooltip: {},
    legend: {
        data:['指标']
    },
    xAxis: {
        type: 'category',
        data: ['销售（sales）', '管理（admin）', '信息技术（IT）', '客服（customer support）', '研发（R&D）']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '预算分配（Budget Allocation）',
        type: 'radar',
        data: [
            [{
                value: [85, 80, 90, 60, 70],
                name: '预算分配'
            }]
        ]
    }, {
        name: '实际开销（Actual Expenses）',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: false,
            position: 'center',
            formatter: '{b}'
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '上海', value: Math.round(Math.random() * 1000)},
            {name: '广东', value: Math.round(Math.random() * 1000)},
            // ... 其他省份
        ]
    }]
};

myChart.setOption(option);

4.2 3D 雷达图

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '3D 雷达图示例'
    },
    tooltip: {},
    legend: {
        data:['指标']
    },
    xAxis: {
        type: 'category',
        data: ['销售（sales）', '管理（admin）', '信息技术（IT）', '客服（customer support）', '研发（R&D）']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '预算分配（Budget Allocation）',
        type: 'radar',
        data: [
            [{
                value: [85, 80, 90, 60, 70],
                name: '预算分配'
            }]
        ],
        itemStyle: {
            normal: {
                areaStyle: {
                    opacity: 0.1
                }
            }
        }
    }]
};

myChart.setOption(option);

总结

通过以上50个实用案例，相信你已经对Echarts有了更深入的了解。在实际应用中，你可以根据自己的需求选择合适的图表类型和配置项，将数据可视化得更加精彩。希望这篇文章能帮助你掌握Echarts，让你的数据可视化之路更加顺畅。

-- 展开阅读全文 --