正文

新手快速上手ECharts：从零基础到绘制图表全攻略

/0 浏览量
0831

引言

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了一系列丰富的图表类型，如折线图、柱状图、饼图、地图等，可以轻松实现数据可视化。对于新手来说，ECharts 的学习曲线可能有些陡峭，但不用担心，本文将带你从零基础开始，一步步掌握 ECharts 的使用方法，最终绘制出精美的图表。

第一部分：ECharts 基础知识

1.1 ECharts 简介

ECharts 是一个基于 HTML5 Canvas 的可视化库，它具有以下特点：

  • 丰富的图表类型：支持多种图表类型，如折线图、柱状图、饼图、地图等。
  • 高度可定制：可以通过配置项对图表进行详细的定制，满足各种需求。
  • 跨平台：支持多种浏览器和操作系统。
  • 开源免费：ECharts 是一个开源项目，可以免费使用。

1.2 ECharts 安装

ECharts 可以通过以下几种方式安装：

  • CDN 链接：直接在 HTML 文件中引入 ECharts 的 CDN 链接。
  • npm 包管理器：使用 npm 安装 ECharts。
  • 直接下载：从 ECharts 官网下载 ECharts 的压缩包。

1.3 ECharts 配置项

ECharts 的配置项主要包括以下几部分：

  • 图表类型：指定要绘制的图表类型，如 line、bar、pie 等。
  • 数据：提供图表所需的数据。
  • 标题：设置图表的标题。
  • 坐标轴：设置图表的坐标轴。
  • 系列：设置图表的系列，如折线图、柱状图等。
  • 工具箱：设置图表的工具箱，如数据视图、保存为图片等。

第二部分：ECharts 图表绘制

2.1 基础图表绘制

以下是一个简单的柱状图示例：

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

// 指定图表的配置项和数据
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);

2.2 高级图表绘制

ECharts 支持多种高级图表，如地图、散点图、雷达图等。以下是一个地图示例：

// 基于准备好的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: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '销量',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            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);

第三部分：ECharts 实战技巧

3.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]
    }]
};

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

// 动态更新数据
setInterval(function () {
    var data = [];
    var axisData = (new Date()).toLocaleTimeString().replace(/:/g, '-');
    data.push({
        value: Math.round(Math.random() * 1000),
        name: axisData
    });
    myChart.setOption({
        xAxis: {
            data: axisData
        },
        series: [{
            data: data
        }]
    });
}, 2000);

3.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);

// 响应窗口大小变化
window.onresize = function () {
    myChart.resize();
};

结语

通过本文的学习，相信你已经掌握了 ECharts 的基本使用方法，能够绘制出各种精美的图表。在实际应用中，不断积累经验，探索更多 ECharts 的功能，相信你一定会成为一名优秀的 ECharts 开发者。

-- 展开阅读全文 --