正文 

当前位置： 首页 > java > java教程

25-vue之echarts-基本使用(代码片段)

爱学习de测试小白 爱学习de测试小白     2022-12-16     546

关键词：

ECharts-基本使用

前言

  • 本篇开始来学习下开源可视化库ECharts

ECharts介绍

  • ECharts是百度公司开源的一个使用 JavaScript 实现的开源可视化库，兼容性强，底层依赖矢量图形
    库 ZRender ，提供直观，交互丰富，可高度个性化定制的数据可视化图表 。官方文档

ECharts快速上手

  1. 步骤1：引入 echarts.js 文件(可使用本地文件、CDN方式等)
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
  1. 步骤2：准备一个呈现图表的盒子：决定图表显示的位置和大小
<div id='app' style="width: 600px;height: 400px"></div>
  1. 初始化 echarts 实例对象：通过id属性选择DOM元素
var myCharts = echarts.init(document.getElementById('app'))
  1. 准备配置项
var option = 
        xAxis: 
            type: 'category',
            data: ['测试', '研发', '产品']
        ,
        yAxis: 
            type: 'value'
        ,
        series: [
            
                name: '岗位',
                type: 'bar',
                data: [10, 90, 20]
            
        ]
  1. 将配置项设置给 echarts 实例对象
myCharts.setOption(option)
  • 完整代码如下:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ECharts快速上手</title>
    <!-- 步骤1：cdn方式 引入echarts.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>

<body>
<!-- 步骤2：准备一个呈现图表的盒子 -->
<div id='app' style="width: 600px;height: 400px"></div>
<script>
    // 步骤3：初始化echarts实例对象
    // 参数, dom,决定图表最终呈现的位置
    var mCharts = echarts.init(document.getElementById('app'))
    // 步骤4：准备配置项
    var option = 
         xAxis: 
            type: 'category',
            data: ['测试', '研发', '产品']
        ,
        yAxis: 
            type: 'value'
        ,
        series: [
            
                name: '岗位',
                type: 'bar',
                data: [10, 90, 20]
            
        ]
    
    // 步骤5：将配置项设置给echarts实例对象
    mCharts.setOption(option)
</script>
</body>

</html>
  • 效果

ECharts配置说明

官方配置项使用文档

  • xAxis：直角坐标系 中的 x 轴, 如果 type 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的
    呈现
  • yAxis：直角坐标系 中的 y 轴, 如果 type 属性配置为 value , 那么无需配置 data , 此时 y 轴会自动去
    series 下找数据进行图表的绘制
  • series：系列列表。每个系列通过 type 决定自己的图表类型, data 来设置每个系列的数据
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ECharts快速上手</title>
    <!-- 步骤1：cdn方式 引入echarts.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>

<body>
<!-- 步骤2：准备一个呈现图表的盒子 -->
<div id='app' style="width: 600px;height: 400px"></div>
<script>
    // 步骤3：初始化echarts实例对象
    // 参数, dom,决定图表最终呈现的位置
    var myCharts = echarts.init(document.getElementById('app'))
    // 步骤4：准备配置项
    var option = 
        xAxis: 
            type: 'category',   // 类目轴
            data: ['测试', '研发', '产品']
        ,
        yAxis: 
            type: 'value' // 数值轴
        ,
        title: 
            text: '岗位',  // 标题文本
            link: 'https://blog.csdn.net/IT_heima', // 标题超链接
            target: 'blank',    // 打开新窗口，  self: 当前窗口
            textStyle:     // 文字样式
                color: 'pink', // 颜色
                fontWeight: 'bold' // 字体粗细
            

        ,
        series: [
            
                name: '岗位',
                type: 'bar',  // 图表类型  bar:柱状图   line:折线图   pie:饼图
                data: [10, 90, 20]
            
        ]
    
    // 步骤5：将配置项设置给echarts实例对象
    myCharts.setOption(option)
</script>
</body>

</html>

vue2.0之echarts使用(代码片段)

1.首先下载echart依赖npminstallecharts--save备注:npm安装报错时使用cnpm 2.全局注册在main.js里引入echart并在vue中注册echart   //引入echarts   importechartsfrom‘echarts‘;    Vue.p 查看详情

十echart图表之datazoom区域缩放基本使用与配置大全(代码片段)

...技术的总结，如有不足与错误敬请指正！🍓Echart官网地址：https://echarts.apache.org/examples/zh/index.html#chart-type-line🍓欢迎点赞👍收藏⭐留言📝相关账号会持续发布关于文章Echart的相关文章欢迎持续关注... 查看详情

37-vue之echarts高级-交互api(代码片段)

交互API前言全局ECharts对象echartsInstance对象前言本篇来学习下ECharts中交互API的使用全局ECharts对象全局echarts对象是引入echarts.js文件之后就可以直接使用的init：初始化ECharts实例对象，使用主题registerTheme：注册主题echarts... 查看详情

26-vue之echarts-柱状图(代码片段)

ECharts-柱状图前言柱状图实现步骤柱状图常见效果标记显示前言本篇来学习下柱状图的实现柱状图实现步骤ECharts最基本的代码结构准备x轴的数据准备y轴的数据准备option,将series中的type的值设置为:bar<!DOCTYPEhtml><htmllang=... 查看详情

echarts的基本使用(代码片段)

echarts的基本使用官网：http://echarts.baidu.com/index.htmlECharts，一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库ZR... 查看详情

32-vue之echarts-雷达图(代码片段)

ECharts-雷达图前言雷达图特点雷达图的基本实现雷达图的常见效果显示数值区域面积绘制类型完整代码前言本篇来学习写雷达图雷达图特点可以用来分析多个维度的数据与标准数据的对比情况雷达图的基本实现ECharts最基本的代码... 查看详情

31-vue之echarts-饼图(代码片段)

ECharts-饼图前言饼图的特点饼图的基本实现饼图的常见效果显示数值南丁格尔图选中效果圆环前言本篇来学习饼图的实现饼图的特点饼图可以很好地帮助用户快速了解不同分类的数据的占比情况饼图的基本实现ECharts最基本的代码... 查看详情

36-vue之echarts高级-动画的使用(代码片段)

ECharts高级-动画的使用前言加载动画增量动画动画的配置前言本篇来学习下ECharts中动画的使用加载动画showLoading()：显示加载动画，一般在获取图表数据之前显示加载动画hideLoading()：隐藏加载动画，在获取图表数... 查看详情

33-vue之echarts-仪表盘图(代码片段)

ECharts-仪表盘图前言仪表盘的特点仪表盘的基本实现仪表盘的常见效果前言本篇来学习写仪表盘图仪表盘的特点可以更直观的表现出某个指标的进度或实际情况仪表盘的基本实现ECharts最基本的代码结构准备数据,设置给series下的da... 查看详情

29-vue之echarts-散点图(代码片段)

ECharts-散点图前言散点图特点散点图实现步骤散点图常见效果气泡效果涟漪动画效果完整代码前言本篇来学习散点图的实现散点图特点散点图可以帮助我们推断出不同维度数据之间的相关性,比如：看得出身高和体重是正相关,... 查看详情

echarts地图的基本使用方法(代码片段)

echarts使用地图的基本使用方法引入echarts第一步：引入js文件下载的最新完整版本echarts.min.js即可<scriptsrc="echarts.min.js"></script>第二步：指定DOM元素作为图表容器创建一个DOM来作为绘制图表的容器<divid=... 查看详情

echarts表格控件的基本使用(代码片段)

官网：ApacheECharts菜鸟教程：ECharts教程|菜鸟教程代码<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>第一个ECharts实例</title><!--引入echarts.js--><scriptsrc="https://cdn.staticfile.org/echarts/4.... 查看详情

vue中echarts的基本用法(代码片段)

...用后，在实例中找到自己想要demo。拿过来改一改，一个echarts图表就形成，毕竟人家做就是为了方便使用。我是在vue中下面直接使用的echarts。下面按步骤讲解。第一步：安装echarts依赖包，然后引入，注意最好在当前使用的组件... 查看详情

微信小程序之使用echarts图表展示onenet温度数据(代码片段)

获取EChartsApacheECharts提供了多种安装方式，你可以根据项目的实际情况选择以下任意一种方式安装。1、从GitHub获取2、从npm获取3、从CDN获取4、在线定制安装方式从npm获取npminstallecharts--save详见在项目中引入ApacheECharts。从CDN获... 查看详情

36-vue之echarts高级-动画的使用(代码片段)

ECharts高级-动画的使用前言加载动画增量动画动画的配置前言本篇来学习下ECharts中动画的使用加载动画showLoading()：显示加载动画，一般在获取图表数据之前显示加载动画hideLoading()：隐藏加载动画，在获取图表数... 查看详情

37-vue之echarts高级-交互api(代码片段)

交互API前言全局ECharts对象echartsInstance对象前言本篇来学习下ECharts中交互API的使用全局ECharts对象全局echarts对象是引入echarts.js文件之后就可以直接使用的init：初始化ECharts实例对象，使用主题registerTheme：注册主题echarts... 查看详情

vue项目之echarts的整理汇总（持续更新中）(代码片段)

vue项目之echarts的整理汇总（持续更新中）vue项目之echarts的整理汇总（持续更新中）echarts安装柱状图和折线图饼状图vue项目之echarts的整理汇总（持续更新中）echarts安装这里不多说，npm安装和按需加载... 查看详情

echarts的基本使用(代码片段)

1.ECharts的基本使用1.1.ECharts的介绍ECharts是百度公司开源的一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。开源免费它... 查看详情