[echarts] 图像可视化实战01 - 折线图应用

最新推荐文章于 2022-10-14 22:21:47 发布

夜猫逐梦

最新推荐文章于 2022-10-14 22:21:47 发布

阅读量722

点赞数

分类专栏： # Javascript随笔文章标签： echarts javascript ecmascript 数据可视化

本文链接：https://blog.csdn.net/kinghzking/article/details/122773149

版权

Javascript随笔专栏收录该内容

32 篇文章 2 订阅

订阅专栏

文章目录

导读

最近接到一任务，实现下图所示的折线图：
在这里插入图片描述
需求：

隐藏横坐标
纵坐标最大最小值自定义
折线图中显示纵坐标的值
折线图两边不留白
添加标题
去除动画

开发环境

	版本号	描述
操作系统	Mac
echarts	5.2.0

实战

初始化echarts环境

引入js、提供画板<div id="main">。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>夜猫逐梦自动化</title>
    <script src="https://lib.baomitu.com/echarts/5.2.0/echarts.common.js"></script>
</head>

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

</html>

隐藏横坐标

    xAxis: {
        show: false
    },

纵坐标最大最小值自定义

    yAxis: {
        type: 'value',
        max: function(value) {
            return Math.ceil(value.max + 1);
        },
        min: function(value) {
            return Math.floor(value.min - 1);
        }
    },

折线图中显示纵坐标的值

    series: [{
        itemStyle: { normal: { label: { show: true } } }
    }],

折线图两边不留白

在这里插入图片描述

    grid: {
        x: 30,
        y: 30,
        x2: 30,
        y2: 30,
        borderWidth: 1
    },

添加标题

    title: {
        text: '爆米花',
        x: 'center',		// 横轴中间
        y: 'top'			// 纵轴上方
    },

去除动画

    series: [{
        animation: false,
    }]

全部js代码

var g_cfg = {
    x: ['2021.02', '2021.02', '2021.05', '2021.05', '2021.06', '2021.07', '2021.12'],
    y: [8.0, 9.0, 8.0, 11.0, 9.0, 9.0, 8.0],
}

var option = {
    title: {
        text: '爆米花',
        x: 'center',
        y: 'top'
    },
    xAxis: {
        show: false,
        type: 'category',
        data: g_cfg.x
    },
    yAxis: {
        type: 'value',
        max: function(value) {
            return Math.ceil(value.max + 1);
        },
        min: function(value) {
            return Math.floor(value.min - 1);
        }
    },
    series: [{
        animation: false,
        // universalTransition: false,
        data: g_cfg.y,
        type: 'line',
        itemStyle: { normal: { label: { show: true } } }
    }],
    grid: {
        x: 30,
        y: 30,
        x2: 30,
        y2: 30,
        borderWidth: 1
    },
};

// 接下来的使用就跟之前一样，初始化图表，设置配置项
var myChart = echarts.init(document.getElementById('main'));
myChart.resize({
    width: 15 * 4 * g_cfg.x.length,
    height: 450
});
myChart.setOption(option);
document.querySelector('#td').width = 15 * 4 * g_cfg.x.length - 60