正文

新手必看！轻松掌握echarts图表制作全攻略，从入门到精通

/0 浏览量
0415

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了一套丰富的图表类型，包括折线图、柱状图、饼图、地图、雷达图等，可以满足各种数据可视化的需求。对于新手来说，学习 ECharts 图表制作是一个既有趣又有挑战的过程。本文将带你从入门到精通，轻松掌握 ECharts 图表制作的全攻略。

入门篇：ECharts 基础了解

1. ECharts 简介

ECharts 是一个基于 HTML5 Canvas 的前端图表库，具有如下特点：

  • 跨平台：支持主流浏览器，包括 Chrome、Firefox、Safari、Edge 等。
  • 高性能：使用 Canvas 渲染，可以绘制大量数据点。
  • 丰富的图表类型：提供多种图表类型，满足不同场景的需求。
  • 易于使用：提供丰富的配置项，易于上手。

2. ECharts 安装与引入

ECharts 支持多种引入方式，以下为几种常见方式：

  • CDN 引入：通过 CDN 引入 ECharts，代码如下：
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  • npm 安装：通过 npm 安装 ECharts，代码如下：
npm install echarts --save

3. ECharts 基础配置

ECharts 图表的基本配置包括以下几个部分：

  • 图表类型：指定图表类型，如 ‘line’、’bar’、’pie’ 等。
  • 数据：提供图表所需的数据。
  • 配置项：设置图表的样式、布局、交互等。

以下为一个简单的 ECharts 图表示例：

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

进阶篇：ECharts 高级应用

1. 动画与交互

ECharts 支持丰富的动画效果和交互功能，如：

  • 数据动态更新：实时更新图表数据。
  • 鼠标事件：监听鼠标点击、悬停等事件。
  • 缩放与平移：支持图表的缩放和平移操作。

2. 雷达图与仪表盘

雷达图和仪表盘是 ECharts 中的两种特殊图表类型，常用于展示多维度数据。

  • 雷达图：用于展示多维度数据的对比，如下所示：
var myChart = echarts.init(document.getElementById('main'));

var option = {
    radar: [
        {
            indicator: [
                { name: '销售（sales）', max: 6500},
                { name: '管理（admin）', max: 16000},
                { name: '信息技术（IT）', max: 30000},
                { name: '客服（customer service）', max: 38000},
                { name: '研发（R&D）', max: 52000},
                { name: '市场（marketing）', max: 25000}
            ]
        }
    ],
    series: [{
        name: '预算 vs 开销（Budget vs spending）',
        type: 'radar',
        data : [
            {
                value : [4200, 3000, 20000, 35000, 50000, 18000],
                name : '预算分配（Allocated Budget）'
            },
            {
                value : [5000, 14000, 28000, 26000, 42000, 21000],
                name : '实际开销（Actual Spending）'
            }
        ]
    }]
};

myChart.setOption(option);
  • 仪表盘：用于展示单一指标，如下所示：
var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [
        {
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            pointer: {
                show: false
            },
            progress: {
                show: true,
                overlap: false,
                roundCap: true,
                clip: false,
                itemStyle: {
                    color: '#FAD860'
                },
                percentage: 0.7,
                textStyle: {
                    color: '#333'
                }
            },
            axisLine: {
                lineStyle: {
                    color: [
                        [0.2, '#67E0E3'],
                        [0.8, '#31C27C'],
                        [1, '#22E0BB']
                    ]
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            anchor: {
                show: false
            },
            title: {
                show: false
            },
            detail: {
                valueAnimation: true,
                formatter: '{value}%',
                color: '#333'
            }
        }
    ]
};

myChart.setOption(option);

3. 地图与地理坐标系

ECharts 支持多种地图类型，如中国地图、世界地图等，同时提供地理坐标系，用于展示地理信息。

  • 中国地图：展示中国各省份的地图，如下所示：
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '中国地图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '中国',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '北京',value: Math.round(Math.random() * 1000)},
                {name: '天津',value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        }
    ]
};

myChart.setOption(option);

精通篇：ECharts 高级技巧

1. 主题与皮肤

ECharts 支持自定义主题和皮肤，可以通过配置 theme 属性来实现。

var myChart = echarts.init(document.getElementById('main'), 'macarons'); // 使用 macarons 主题

// ... 其他配置

2. 扩展图表类型

ECharts 社区提供了丰富的扩展图表类型，如力导向图、树状图等，可以通过引入扩展包来实现。

// 引入扩展图表类型
require('echarts-extension-tree');

// ... 其他配置

3. 性能优化

ECharts 在绘制大量数据时，可能会出现性能问题。以下是一些性能优化技巧：

  • 数据降维：减少数据点的数量，降低图表的复杂度。
  • 使用 WebGL：将 ECharts 图表渲染到 WebGL 上，提高性能。
  • 缓存数据：缓存已渲染的数据，避免重复计算。

总结

ECharts 是一个功能强大的图表库，掌握 ECharts 图表制作需要不断学习和实践。本文从入门到精通，为你提供了 ECharts 图表制作的全攻略。希望你能通过本文的学习，轻松掌握 ECharts 图表制作，为你的项目增添更多精彩的数据可视化效果。

-- 展开阅读全文 --