资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

ECharts入门到实战：数据可视化的利器

创作时间:

作者:

@小白创作中心

ECharts入门到实战：数据可视化的利器

引用

CSDN

等

来源

https://blog.csdn.net/2401_83276728/article/details/139801432

https://blog.csdn.net/qq_44930306/article/details/139261646

https://blog.csdn.net/qq_53986004/article/details/138120685

https://blog.csdn.net/I_nur/article/details/138664446

https://blog.csdn.net/2301_77088767/article/details/135633871

https://cloud.baidu.com/article/2908512

https://blog.csdn.net/m0_63181360/article/details/137502226

https://blog.csdn.net/hgoop/article/details/137033006

https://www.cnblogs.com/HaiJun-Aion/p/18569547

10.

https://developer.huawei.com/consumer/cn/forum/topic/0204157989239546351

11.

https://help.fanruan.com/finereport/doc-view-4470.html

12.

https://cloud.tencent.com/developer/article/2399624

在数据驱动的时代，数据可视化已成为理解和分析数据的重要手段。Apache ECharts，作为一款开源的JavaScript图表库，凭借其强大的功能和灵活的配置，成为数据可视化领域的佼佼者。本文将带你从零开始，逐步掌握ECharts的使用方法，从基础图表到高级定制，让你轻松驾驭数据可视化。

ECharts入门：从安装到第一个图表

安装ECharts

在开始之前，我们需要先安装ECharts。你可以通过npm来安装：

npm install echarts

创建图表容器

在HTML文件中，我们需要创建一个容器来承载图表：

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

初始化图表

在JavaScript文件中，我们首先需要引入ECharts：

import * as echarts from 'echarts';

然后，我们可以通过echarts.init方法初始化图表：

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

配置图表

ECharts通过配置项来定义图表的样式和数据。下面是一个简单的柱状图示例：

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进阶：高级功能与定制

主题定制

ECharts支持主题定制，你可以使用内置的主题，也可以自定义主题。内置主题包括light和dark：

let myChart = echarts.init(document.getElementById("main"), 'light');

如果你想自定义主题，可以在ECharts官网的主题编辑器中进行配置，下载主题文件后，在项目中注册并使用：

import theme from "../../utils/theme.json";
echarts.registerTheme("theme", theme);
let myChart = echarts.init(document.getElementById("main"), "theme");

颜色调色盘与渐变

ECharts提供了灵活的颜色配置选项。你可以通过color属性设置全局调色盘：

color: ["red", "green", "blue", "skyblue", "purple"],

也可以在局部覆盖调色盘：

series: [
    {
        type: "pie",
        color: ["red", "green", "blue", "skyblue", "purple"],
    },
],

此外，ECharts还支持线性渐变和径向渐变：

itemStyle: {
    color: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
            {
                offset: 0,
                color: "red",
            },
            {
                offset: 1,
                color: "blue",
            },
        ],
    },
},

动画配置

ECharts支持丰富的动画效果，可以通过配置项进行控制：

animation: true,
animationDuration: 1000,
animationEasing: 'cubicInOut',
animationThreshold: 2000,

实战应用：复杂图表的实现

在实际项目中，我们常常需要实现更复杂的图表需求。例如，如何在一个柱状图上同时显示多个数据标签？

假设我们有一个床位使用情况的图表，需要同时显示空置床位数和占用床位数，并在顶部显示合计数。我们可以通过添加一个透明的柱状图系列来实现：

{
    name: '', // 名称设置为空，防止legend显示
    type: 'bar',
    tooltip: {
        show: false, // 提示框也不显示
    },
    stack: 'a', // 系列要和前面两个堆叠柱状图相同
    data: Array(all_data.length).fill(10), // 值根据数组长度随意填充
    itemStyle: {
        color: 'transparent', // 颜色透明
    },
    label: {
        show: true,
        formatter: params => {
            return demo[params.dataIndex].xxx + demo[params.dataIndex].yyy, // 可以设置两个数相加的合计
        },
        textStyle: {
            fontSize: '1rem'
        }
    }
},

通过这种方式，我们可以在保持图表简洁的同时，提供更丰富的信息展示。