正文

掌握echarts，轻松制作专业图表：入门到精通实战攻略

/0 浏览量
0710

ECharts 是一个使用 JavaScript 实现的开源可视化库，它可以帮助我们快速、轻松地实现各种复杂的数据可视化效果。从入门到精通，本文将为你提供一份详尽的实战攻略，让你轻松掌握 ECharts。

第一部分：ECharts 基础入门

1.1 ECharts 简介

ECharts 是一个基于 HTML5 Canvas 的前端可视化库，它能够将数据以图表的形式展示出来。ECharts 支持多种图表类型，包括但不限于柱状图、折线图、饼图、地图等。

1.2 ECharts 安装与引入

ECharts 的使用非常简单，你可以通过以下两种方式引入：

方式一：通过 CDN 引入

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>

方式二：下载 ECharts 包

你可以从 ECharts 的官方网站下载所需版本的压缩包，并将其解压到项目的 js 文件夹中。

1.3 ECharts 基本使用

以下是使用 ECharts 绘制一个简单柱状图的示例：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('container'));
    var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };
    myChart.setOption(option);
</script>
</body>
</html>

第二部分：ECharts 进阶技巧

2.1 数据交互与动态更新

ECharts 支持与数据源的交互，你可以通过 AJAX 获取数据，并在图表中动态更新。

$.ajax({
    url: 'data.json',
    type: 'get',
    success: function (data) {
        myChart.setOption({
            series: [{
                data: data
            }]
        });
    }
});

2.2 图表样式定制

ECharts 提供丰富的图表样式定制功能，包括颜色、字体、阴影等。

var option = {
    title: {
        text: 'ECharts 样式定制',
        textStyle: {
            color: '#ff7f50'
        }
    },
    ...
};

2.3 动画效果与交互

ECharts 支持丰富的动画效果和交互功能，如轮播图、缩放、拖拽等。

myChart.setOption({
    series: [{
        markPoint: {
            data: [
                {name: 'A', value: 10, xAxis: 0, yAxis: 0},
                {name: 'B', value: 20, xAxis: 10, yAxis: 10},
                {name: 'C', value: 30, xAxis: 20, yAxis: 20}
            ]
        },
        markLine: {
            data: [
                {name: 'A到B', x1: 0, y1: 0, x2: 10, y2: 10, xAxis: 0, yAxis: 0},
                {name: 'B到C', x1: 10, y1: 10, x2: 20, y2: 20, xAxis: 0, yAxis: 0}
            ]
        }
    }]
});

第三部分：ECharts 高级应用

3.1 地图图表

ECharts 支持多种地图图表，如中国地图、世界地图等。

var option = {
    series: [{
        mapType: 'china',
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '上海', value: Math.round(Math.random() * 1000)},
            ...
        ]
    }]
};

3.2 仪表盘图表

ECharts 支持仪表盘图表，如速度计、温度计等。

var option = {
    series: [{
        type: 'gauge',
        axisLine: {lineStyle: {color: [[0.2, 'red'], [0.8, 'yellow'], [1, 'lightgreen']]}},
        axisTick: {splitNumber: 10},
        splitLine: {show: false},
        pointer: {show: false},
        title: {
            offsetCenter: ['0%', '-20%'],
            textStyle: {color: 'auto'},
            fontSize: 14
        },
        detail: {
            valueAnimation: true,
            formatter: '{value} km/h',
            offsetCenter: ['0%', '50%'],
            textStyle: {color: 'auto'}
        },
        data: [{value: 100}]
    }]
};

3.3 K线图

ECharts 支持K线图，用于展示股票、期货等金融市场的价格走势。

var option = {
    series: [{
        type: 'candlestick',
        data: [
            [120, 130, 100, 110],
            [150, 160, 120, 130],
            ...
        ]
    }]
};

第四部分：实战案例

4.1 实时数据监控

以下是一个使用 ECharts 实现实时数据监控的案例：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('container'));
    var option = {
        title: {
            text: '实时数据监控'
        },
        tooltip: {},
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            type: 'line',
            data: []
        }]
    };
    myChart.setOption(option);

    var data = [Math.random() * 100];
    var xAxisData = (new Date()).toLocaleTimeString().replace(/\:/g, '-');
    myChart.setOption({
        xAxis: {
            data: [xAxisData]
        },
        series: [{
            data: [data]
        }]
    });

    var timer = setInterval(function () {
        var data = [Math.random() * 100];
        var xAxisData = (new Date()).toLocaleTimeString().replace(/\:/g, '-');
        myChart.setOption({
            xAxis: {
                data: [xAxisData]
            },
            series: [{
                data: [data]
            }]
        });
    }, 1000);
</script>
</body>
</html>

4.2 数据可视化大屏

以下是一个使用 ECharts 实现数据可视化大屏的案例：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container1" style="width: 100%; height: 50%;"></div>
<div id="container2" style="width: 100%; height: 50%;"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<script type="text/javascript">
    var myChart1 = echarts.init(document.getElementById('container1'));
    var myChart2 = echarts.init(document.getElementById('container2'));
    var option1 = {
        title: {
            text: '数据可视化大屏 - 上'
        },
        tooltip: {},
        xAxis: {
            type: 'category',
            data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20, 5, 20, 36, 10]
        }]
    };
    var option2 = {
        title: {
            text: '数据可视化大屏 - 下'
        },
        tooltip: {},
        xAxis: {
            type: 'category',
            data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: '销售额',
            type: 'line',
            data: [120, 200, 150, 80, 70, 110, 130, 150, 90, 100]
        }]
    };
    myChart1.setOption(option1);
    myChart2.setOption(option2);
</script>
</body>
</html>

通过以上实战案例，相信你已经对 ECharts 的应用有了更深入的了解。掌握 ECharts，轻松制作专业图表，让你的数据可视化更加出色！

-- 展开阅读全文 --