Echarts的简单使用

最新推荐文章于 2024-09-05 00:31:38 发布

南无与青

最新推荐文章于 2024-09-05 00:31:38 发布

阅读量1.5w

点赞数 12

本文链接：https://blog.csdn.net/qq_32810963/article/details/121308597

版权

Echarts 数据可视化折线图图表配置 JavaScript

关键词由CSDN通过智能技术生成

现在，数据可视化已经成为了工作中不可或缺的一部分，本文将简单介绍Echarts的使用以及一些属性的含义

1.要使用Echarts首先就要引入echarts文件

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

echarts.js文件可在echarts的官方中文网站下载

Apache ECharts

2.在Echarts的官方中文网站中选择一个你想要绘制的图形

这里我们选择折线图进行绘制

3.接下来我们了解一下左边代码的具体含义

title就是图标中的标题，在图标的左上角

tooltip就是鼠标经过图标时会显示该位置图标所代表的具体的数据

grid中的数值的意思的代表图标距离四边的距离，例子中的left：3%就是图标距离左边3%的意思

toolbox就是工具盒的意思例子中的toolbox写了saveAsImage 意思就是保存为图片，toolBox在图表的右上角显示

xAxis与yAxis则代表了图表的横纵坐标

series则代表了图表的数据其中的type代表了图表的类型 line代表了图表的类型为折线图

接下来我们写一个简单的图表

<style>
        div {
            width: 500px;
            height: 500px;
        }
    </style>

<body>
    <div></div>
</div>

首先我们先创建一个容器


        var myChart = echarts.init(document.querySelector('div'));

然后在script中获取这个容器

    var option = {
            title: {
                text: 'Stacked Line'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: 'Email',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: 'Union Ads',
                    type: 'line',
                    stack: 'Total',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: 'Video Ads',
                    type: 'line',
                    stack: 'Total',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: 'Direct',
                    type: 'line',
                    stack: 'Total',
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: 'Search Engine',
                    type: 'line',
                    stack: 'Total',
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };

接着我们把刚才的案例代码给复制过来并赋值给option对象