Echarts的简单使用

现在，数据可视化已经成为了工作中不可或缺的一部分，本文将简单介绍Echarts的使用以及一些属性的含义1.要使用Echarts首先就要引入echarts文件<script src="echarts.js"></script>echarts.js文件可在echarts的官方中文网站下载Apache ECharts2.在Echarts的官方中文网站中选择一个你想要绘制的图形这里

南无与青

15437人浏览 · 2021-11-13 19:52:43

南无与青 · 2021-11-13 19:52:43 发布

现在，数据可视化已经成为了工作中不可或缺的一部分，本文将简单介绍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对象