Echarts入门使用（完结）

最新推荐文章于 2024-05-16 19:21:42 发布

Nil_cxc

最新推荐文章于 2024-05-16 19:21:42 发布

阅读量175

点赞数

文章标签：笔记

本文链接：https://blog.csdn.net/weixin_51923997/article/details/125901896

版权

文章目录

Echarts-介绍
基本使用
Echarts-基础配置

Echarts-介绍

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

是一个JS插件
性能好可流畅运行PC与移动设备
兼容主流浏览器
提供很多常用图表，且可定制。
- 折线图、柱状图、散点图、饼图、K线图

基本使用

1、引入echarts 插件文件到html页面中

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

2、准备一个具备大小的DOM容器

在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。

<!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>Echarts--基本使用</title>

    <style>
        .box{
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script src="js/echarts.min.js"></script>
</body>
</html>

3、初始化echarts实例对象

然后就可以通过 echarts.init 方法初始化一个 echarts 实例

//初始化实例对象  echarts.init(dom容器)
var myChart = echarts.init(document.querySelector(".box"));

4、指定配置项和数据(option)

// 指定图表的配置项和数据
var option = {
    title: {
    text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
    data: ['销量']
    },
    xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
    {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }
    ]
};

5、将配置项设置给echarts实例对象

通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

//把配置项给实例对象
myChart.setOption(option)

在这里插入图片描述

Echarts-基础配置

主要配置：series xAxis yAxis grid tooltip title legend color

series
- 系列列表。每个系列通过 type 决定自己的图表类型
- 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。
xAxis：直角坐标系 grid 中的 x 轴
- 在两个刻度之间的带(band)中间。
yAxis：直角坐标系 grid 中的 y 轴
grid：直角坐标系内绘图网格。
title：标题组件
tooltip：提示框组件（鼠标移动到相应的数据上时，会显示该数据的具体信息）
legend：图例组件
color：调色盘颜色列表

具体配置信息详见Echarts官网的配置项手册

option = {
  //color设置我们线条的颜色，注意后面是个数组
  color:['pink','red','blue'],
  //设置图表的标题
  title: {
    text: 'Stacked Line1'
  },
  //图表的提示框组件
  tooltip: {
    //触发方式（详见官方手册）
    trigger: 'axis'
  },
  //图例组件
  legend: {
    //如果series中有了name属性，则legend中的data可以删掉
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  //网格配置  grid可以控制线形图、柱状图、图表的大小
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    //是否显示刻度标签，true -- 显示
    containLabel: true
  },
  //工具箱组件（可以另存为图片等功能）
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  //设置 x 轴的相关配置
  xAxis: {
    type: 'category',
    //是否让我们的线条和坐标轴有缝隙
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  // 系列图标的配置，它决定着显示那种类型的图表
  //该例中，series中有五个对象，就决定者，该图表有5条线
  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]
    }
  ]
};

在这里插入图片描述

Nil_cxc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts入门使用（完结）

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。是一个JS插件性能好可流畅运行PC与移动设备兼容主流浏览器提供很多常用图表，且可定制。折线图、柱状图、散点图、饼图、K线图。
复制链接

扫一扫