新手入门echarts图表制作：从零基础到独立创作实战教程

了解 ECharts

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以轻松在网页中嵌入丰富的图表。它拥有丰富的图表类型，包括折线图、柱状图、饼图、散点图、地图等，非常适合数据可视化展示。

环境准备

安装 Node.js

ECharts 的开发依赖于 Node.js，因此首先需要安装 Node.js。可以从 Node.js 官网下载并安装。

安装 ECharts

安装 ECharts 有多种方式，以下介绍两种常用方法：

通过 npm 安装

npm install echarts --save

通过 CDN 链接

在 HTML 文件中添加以下 CDN 链接：

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

基础用法

创建图表容器

在 HTML 文件中创建一个用于显示图表的容器：

<div id="main" style="width: 600px;height:400px;"></div>

初始化图表

在 JavaScript 文件中，首先引入 ECharts 库，然后使用 echarts.init 方法初始化图表：

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

配置图表

接下来，使用 setOption 方法配置图表的选项：

myChart.setOption({
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});

运行效果

保存 HTML 和 JavaScript 文件，并在浏览器中打开 HTML 文件，即可看到生成的图表。

高级用法

动态数据

ECharts 支持动态数据，可以在 JavaScript 中定义一个数据数组，并通过 setOption 方法更新图表：

var data = [
    {value: 5, name: '衬衫'},
    {value: 20, name: '羊毛衫'},
    {value: 36, name: '雪纺衫'},
    {value: 10, name: '裤子'},
    {value: 10, name: '高跟鞋'},
    {value: 20, name: '袜子'}
];

myChart.setOption({
    series: [{
        data: data
    }]
});

图表交互

ECharts 支持多种交互功能，如点击、缩放、拖拽等。可以通过配置 tooltip、dataZoom、draggable 等选项来实现：

myChart.setOption({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    dataZoom: [{
        type: 'slider',
        start: 0,
        end: 50
    }],
    draggable: true
});

实战案例

制作地图

myChart.setOption({
    title: {
        text: '中国地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        data: [
            {name: '北京',value: Math.round(Math.random() * 1000)},
            {name: '天津',value: Math.round(Math.random() * 1000)},
            // ... 其他省份
        ]
    }]
});

制作雷达图

myChart.setOption({
    title: {
        text: '雷达图'
    },
    tooltip: {},
    legend: {
        data:['预算分配（分配率）']
    },
    xAxis: {
        type: 'category',
        data: ['销售（销售量）','管理（管理人员）','研发（研发人员）','市场（市场人员）']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '预算分配（分配率）',
        type: 'radar',
        data : [
            {
                value : [65, 75, 90, 80],
                name : '预算分配（分配率）'
            }
        ]
    }]
});

总结

本文介绍了 ECharts 图表制作的基础用法、高级用法以及实战案例。通过学习本文，相信你已经掌握了 ECharts 的基本操作，可以独立创作各种图表。希望本文对你有所帮助！