JS 流行库（九）：ECharts

Reyn Morales

已于 2022-11-03 09:14:51 修改

阅读量579

点赞数 1

分类专栏： JS 流行库文章标签： echarts javascript ecmascript

于 2022-10-03 21:43:09 首次发布

本文链接：https://blog.csdn.net/Raymiles/article/details/127156789

版权

JS 流行库专栏收录该内容

13 篇文章 1 订阅

订阅专栏

JS 流行库（九）：ECharts

ECharts 是一个使用 JavaScript 实现的数据可视化库，提供了常见的折线图、柱状图、饼图等，可以流畅的运行在 PC 和移动端上，在 ECharts 4.0 之前底层使用 canvas 标签实现图表绘制，而在 ECharts 4.0 之后为了提升移动端性能，已经实现 SVG 渲染

数据可视化是指将数据以图表的形式展现

基本使用

导入 ECharts 库

<script src="./echarts.js"></script>

HTML 结构

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

此处为 ECharts 创建容器

JavaScript 代码

window.onload = function () {
    /* DOM 元素 */
    let oDiv = document.querySelector("div");

    /* 初始化 ECharts */
    let myCharts = echarts.init(oDiv);

    /* 配置选项 */
    let option = {
        title: {
            text: 'ECharts 入门示例'
        },
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    }

    /* 设置选项 */
    myCharts.setOption(option);
}

ECharts 的关键在于配置选项，选项决定了 ECharts 如何渲染图表，上述示例中的选项说明如下：

选项	说明
title	标题
legend	图例
xAxis	X 轴内容
yAxis	Y 轴内容
series	项目（名称、图表类型、数据）

示例如下：

window.onload = function () {
    /* DOM 元素 */
    let oDiv = document.querySelector("div");

    /* 初始化 ECharts */
    let myCharts = echarts.init(oDiv);

    /* 配置选项 */
    let option = {
        title: {
            text: 'ECharts 入门示例'
        },
        legend: {
            data: ['销量', '产量']
        },
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }, {
            name: '产量',
            type: 'line',
            data: [10, 30, 40, 15, 15, 25]
        }]
    }

    /* 设置选项 */
    myCharts.setOption(option);
}

在配置项目时，项目名称必须和图例名称相应

常用组件

此处不可能介绍所有组件，在必要时可以查阅文档，官网如下：

ECharts 官网

标题

在 title 选项中，可以配置如下内容：

选项	说明
show	显示
text	标题
subtext	子标题
left/top/right/bottom	位置
borderColor	边框颜色
borderWidth	边框宽度

示例如下：

window.onload = function () {
    /* DOM 元素 */
    let oDiv = document.querySelector("div");

    /* 初始化 ECharts */
    let myCharts = echarts.init(oDiv);

    /* 配置选项 */
    let option = {
        title: {
            text: 'ECharts 入门示例',
            subtext: 'My Echarts Example'
        },
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    }

    /* 设置选项 */
    myCharts.setOption(option);
}

工具箱

在 toolbox 选项中，可选配置如下：

选项	说明
show	显示
feature	功能
saveAsImage	功能/保存图片
dataView	功能/数据视图
restore	功能/恢复数据
dataZoom	功能/缩放视图
magicType	功能/动态类型切换

示例如下：

window.onload = function () {
    /* DOM 元素 */
    let oDiv = document.querySelector("div");

    /* 初始化 ECharts */
    let myCharts = echarts.init(oDiv);

    /* 配置选项 */
    let option = {
        title: {
            text: 'ECharts 入门示例',
            subtext: 'My Echarts Example'
        },
        legend: {
            data: ['销量']
        },
        toolbox: {
            show: true,
            feature: {
                saveAsImage: {
                    show: true
                },
                dataView: {
                    show: true
                },
                restore: {
                    show: true
                },
                dataZoom: {
                    show: true
                },
                magicType: {
                    type: ['bar', 'line']
                }
            }
        },
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }],
    }

    /* 设置选项 */
    myCharts.setOption(option);
}

弹窗

在 tooltip 选项中，可选配置如下：

选项	说明
show	显示
trigger	显示方式（axis）

示例如下：

window.onload = function () {
    /* DOM 元素 */
    let oDiv = document.querySelector("div");

    /* 初始化 ECharts */
    let myCharts = echarts.init(oDiv);

    /* 配置选项 */
    let option = {
        title: {
            text: 'ECharts 入门示例',
            subtext: 'My Echarts Example'
        },
        legend: {
            data: ['销量']
        },

        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }],
        tooltip: {
            show: true,
            trigger: "axis"
        }
    }

    /* 设置选项 */
    myCharts.setOption(option);
}

标记

在 ECharts 中可以使用 markLine 和 markPoint 选项标记图表中的最大值、最小值和平均值：

示例如下：

window.onload = function () {
    /* DOM 元素 */
    let oDiv = document.querySelector("div");

    /* 初始化 ECharts */
    let myCharts = echarts.init(oDiv);

    /* 配置选项 */
    let option = {
        title: {
            text: 'ECharts 入门示例',
            subtext: 'My Echarts Example'
        },
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
            markPoint: {
                data: [
                    { type: "max", name: "最大值" },
                    { type: "min", name: "最小值" }
                ]
            },
            markLine: {
                data: [
                    { type: "max", name: "最大值" },
                    { type: "min", name: "最小值" },
                    { type: "average", name: "平均值" }
                ]
            }
        }]
    }

    /* 设置选项 */
    myCharts.setOption(option);
}

饼状图

示例如下：

window.onload = function () {
    /* DOM 元素 */
    let oDiv = document.querySelector("div");

    /* 初始化 ECharts */
    let myCharts = echarts.init(oDiv);

    /* 配置选项 */
    let option = {
        title: {
            text: 'ECharts 入门示例',
            subtext: 'My Echarts Example'
        },
        legend: {
            data: ['销量', '产量']
        },
        series: [{
            type: 'pie',
            data: [
                { value: 921, name: "销量" },
                { value: 1024, name: "产量" }
            ]
        }]
    }

    /* 设置选项 */
    myCharts.setOption(option);
}