Echarts介绍

介绍

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

大白话:

  • 是一个JS插件
  • 性能好可流畅运行PC与移动设备
  • 兼容主流浏览器
  • 提供很多常用图表,且可定制

Echarts-使用

官方教程—Echarts使用手册:

https://echarts.apache.org/handbook/zh/get-started/

步骤

  1. 下载echarts
  2. 引入echarts dist/echarts.min.js
  3. 准备一个具备大小的DOM容器
<div id="main" style="width: 600px;height:400px;"></div>
  1. 初始化echarts实例对象
var myChart = echarts.init(document.getElementById('main'));
  1. 指定配置项和数据(option)
var option = {
 xAxis: {
     type: 'category',
     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
 },
 yAxis: {
     type: 'value'
 },
 series: [{
     data: [820, 932, 901, 934, 1290, 1330, 1320],
     type: 'line'
 }]
};
  1. 将配置项设置给echarts实例对象
myChart.setOption(option);

Echarts-基础配置

series

  • 系列列表。每个系列通过 type 决定自己的图表类型

  • 大白话:图标数据,指定什么类型的图标,可以多个图表重叠。

xAxis

直角坐标系 grid 中的 x 轴

yAxis

  • 直角坐标系 grid 中的 y 轴

grid

  • 直角坐标系内绘图网格。

tooltip

  • 提示框组件

title

  • 标题组件

legend

  • 图例组件

    color

  • 调色盘颜色列表

演示代码

var option = {
            color: ['pink', 'blue', 'green', 'skyblue', 'red'],
            title: {
                text: '我的折线图'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['直播营销', '联盟广告', '视频广告', '直接访问']
            },
            grid: {
                left: '3%',
                right: '3%',
                bottom: '3%',
                // 当刻度标签溢出的时候,grid 区域是否包含坐标轴的刻度标签。如果为true,则显示刻度标签
                // 如果left right等设置为 0% 刻度标签就溢出了,此时决定是否显示刻度标签
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                // 坐标轴两边留白策略 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
                boundaryGap: false,
                data: ['星期一', '星期二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '直播营销',
                    // 图表类型是线形图
                    type: 'line',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '联盟广告',
                    type: 'line',

                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '视频广告',
                    type: 'line',

                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '直接访问',
                    type: 'line',

                    data: [320, 332, 301, 334, 390, 330, 320]
                }
            ]
        };

拓展–边框图片

在这里插入图片描述
组合写法:

border-image: url("images/border.jpg") 167/20px round;

拆分写法:

border-image-source: url("images/border.jpg");//边框图片资源地址
border-image-slice: 167 167 167 167;//裁剪尺寸(上 右 下 左)单位默认px,可使用百分百。
border-image-width: 20px;//边框图片的宽度,默认边框的宽度。
border-image-repeat: round;//平铺方式:
//平铺方式:
//stretch 拉伸(默认)
//repeat 平铺,从边框的中心向两侧开始平铺,会出现不完整的图片。
//round 环绕,是完整的使用切割后的图片进行平铺。
### ECharts 的定义与功能 ECharts 是由百度开源的一个基于 JavaScript 的可视化库,专注于提供直观、交互丰富的数据可视化图表[^1]。它支持多种类型的图表和图形组件,能够满足大多数的数据展示需求。 #### 主要特点 - **跨平台兼容性**:ECharts 基于 HTML5 Canvas 技术开发,能够在主流浏览器上运行。 - **高度可定制化**:提供了大量的配置选项,允许开发者根据实际需求调整样式、布局以及行为逻辑。 - **强大的交互能力**:内置了许多交互特性,例如缩放、平移、提示框等功能,增强了用户体验。 - **丰富的图表类型**:除了常见的折线图、柱状图外,还支持饼图、散点图、热力图等多种复杂图表形式。 #### 官方文档的作用 对于初学者来说,不建议试图一次性掌握整个 ECharts 文档的内容[^1]。相反,应将其视为一本工具书,在具体项目实践中遇到问题时再去查阅相关内容即可。重点学习一些常用的属性名称比如 `title` (标题), `legend` (图例),还有其他基础模块如 `toolbox`, `tooltip`. ### 使用方法概述 以下是创建基本图表的一般流程: ```javascript // 导入 ECharts 库 import * as echarts from 'echarts'; // 准备用于渲染的 DOM 节点 const domElement = document.querySelector('#main'); // 初始化图表实例 if (!domElement) throw new Error('Container not found!'); const myChart = echarts.init(domElement); // 配置图表参数 const option = { title: { text: '示例图表' }, tooltip: {}, legend: ['销量'], xAxis: { type: 'category', data: ['周一','周二','周三'] }, yAxis: { type: 'value'}, series: [{ name:'销量',type:'bar',data:[10,20,36]}] }; // 设置图表选项并加载数据 myChart.setOption(option); ``` 这段脚本展示了如何利用 ECharts 来构建简单的条形统计图[^2]。 ### 图表间的关联操作 如果希望多个图表之间实现同步更新或者共享某些状态,则可以借助 `connect()` 方法来建立它们之间的联系[^3]: ```javascript var chart1 = echarts.init(document.getElementById('container1')); var chart2 = echarts.init(document.getElementById('container2')); chart1.group = 'syncGroup'; chart2.group = 'syncGroup'; echarts.connect('syncGroup'); ``` 以上代码片段实现了两个不同容器内的图表相互绑定的效果,当其中一个发生变化时另一个也会相应改变显示内容[^3]。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值