Echarts——笔记

最新推荐文章于 2023-03-09 11:46:37 发布

✿ﾟ卡笨卡

最新推荐文章于 2023-03-09 11:46:37 发布

阅读量104

点赞数

分类专栏：笔记文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/tian__c/article/details/119343360

版权

笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

使用五部曲+入门案例

官网下载：https://echarts.apache.org/zh/download.html
在这里插入图片描述

1、导入js

<script src="../node_modules/vue/dist/echarts.min.js"></script>

2、为ECharts准备一个具备大小（宽高）的Dom

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

3、基于准备好的dom，初始化echarts实例

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

4、指定图表的配置项和数据

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

5、使用刚指定的配置项和数据显示图表。

    myChart.setOption(option);

入门案例

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="../node_modules/vue/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        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);
    </script>
</body>
</html>

配置语法

官网：https://echarts.apache.org/zh/option.html#title

需要了解的主要配置:

series、xAxis、yAxis、grid、tooltip、title、legend、color

series
- 系列列表。每个系列通过type 决定自己的图表类型
- 大白话: 图标数据，指定什么类型的图标，可以多个图表重叠。
xAxis:直角坐标系grid中的X轴
- boundaryGap:坐标轴两边留白策略true,这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中
  间。
yAxis: 直角坐标系 grid中的y轴
grid:直角坐标系内绘图网格。
title:标题组件
toltip:提示框组件
legend: 图例组件
color: 调色盘颜色列表