Echars使用指南

最新推荐文章于 2022-12-09 15:46:51 发布
最新推荐文章于 2022-12-09 15:46:51 发布
阅读量396 收藏 2
点赞数 1
分类专栏： Echars
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38231448/article/details/105110551
版权

概念介绍

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

快速入门

①基于HTML创建脚本

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!-- 引入 ECharts 文件 -->
    <script src="echars/jquery.js"></script>
    <script src="echars/echarts.min.js"></script>
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;background-color: blanchedalmond"></div>
</body>
</html>

②渲染组件

<script>
  $(function(){
  var myChart = echarts.init($("#char_bar")[0]);
  // 指定图表的配置项和数据
  var option = {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
        data:['品类销量']
      },
      xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      yAxis: {},
      series: [{
        type: 'bar',
        name: '品类销量',
        data: [5, 20, 36, 10, 10, 20]
      }]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
})
</script>

③渲染结果
在这里插入图片描述

基础概念

echarts 实例

一个网页中可以创建多个 echarts 实例。每个 echarts 实例 中可以创建多个图表和坐标系等等（用 option 来描述）。准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。

系列（series）

系列（series）是很常见的名词。在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。“系列”这个词原本可能来源于“一系列的数据”，而在 echarts 中取其扩展的概念，不仅表示数据，也表示数据映射成为的图。所以，一个 系列 包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。

echarts 里系列类型（series.type）就是图表类型。系列类型（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）等。如下图，右侧的 option 中声明了三个 系列（series）：pie（饼图系列）、line（折线图系列）、bar（柱状图系列），每个系列中有他所需要的series.data
在这里插入图片描述

<script>
        $(function(){
            var myChart = echarts.init($("#char_bar2")[0]);
            // 指定图表的配置项和数据
            var option= {
                title: {
                    text: 'ECharts图例基本使用和'
                },
                tooltip: {},
                legend: {
                    data:['品类销量','利润点',"市场占比"]
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    type: 'bar',
                    name: '品类销量',
                    data: [5, 20, 36, 10, 10, 20]
                },{
                    type: 'line',
                    name: '利润点',
                    data: [3, 15, 15, 5, 8, 12]
                },{
                    type: 'pie',
                    name: '市场占比',
                    center:["80%",80],
                    radius:50,
                    data: [
                           {name:"华南",value:150},
                           {name:"华北",value:100},
                           {name:"华中",value:60},
                           {name:"其他",value:50}
                           ]
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        })
</script>

类同地，下图中是另一种配置方式，系列的数据从 dataset 中取：

var option= {
  title: {
    text: 'ECharts图例基本使用'
  },
  dataset:{
    source:[
      ["衬衫",5,3,"华南",150],
      ["羊毛衫",20,15,"华北",100],
      ["雪纺衫",36,15,"华中",60],
      ["裤子",10,5,"其他",50],
      ["高跟鞋",10,8],
      ["袜子",20,12]
    ]
  },
  tooltip: {},
  legend: {
    data:['品类销量','利润点',"市场占比"]
  },
  xAxis: {
    type:"category"
  },
  yAxis: {},
  series: [{
    type: 'bar',
    name: '品类销量',
    encode:{x:0,y:1}
  },{
    type: 'line',
    name: '利润点',
    encode:{x:0,y:2}

  },{
    type: 'pie',
    name: '市场占比',
    center:["80%",80],
    radius:50,
    encode:{itemName:3,value:4}
  }]
};

组件（component）

在系列之上，echarts 中各种内容，被抽象为“组件”。例如，echarts 中至少有这些组件：xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）、radiusAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）等。我们注意到，其实系列（series）也是一种组件，可以理解为：系列是专门绘制“图”的组件。如下图，右侧的 option 中声明了各个组件（包括系列），各个组件就出现在图中。

组件描述

坐标系

很多系列，例如 line（折线图）、bar（柱状图）、scatter（散点图）、heatmap（热力图）等等，需要运行在 “坐标系” 上。坐标系用于布局这些图，以及显示数据的刻度等等。

一个坐标系，可能由多个组件协作而成。我们以最常见的直角坐标系来举例。直角坐标系中，包括有 xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）三种组件。

xAxis、yAxis 被 grid 自动引用并组织起来，共同工作。我们来看下图，这是最简单的使用直角坐标系的方式：只声明了 xAxis、yAxis 和一个 scatter（散点图系列），echarts 暗自为他们创建了 grid 并关联起他们：

散点图系列

散点图

var option={
  title: {
    text: '散点分布案例'
  },
  legend:{data:["点分布"]},
  tooltip:{},
  xAxis:{},
  yAxis:{},
  series:[
    {
      type:"scatter",
      name:"点分布",
      data:[
        [13,44],
        [51,51],
        [51,32],
        [67,19],
        [19,33]
      ]
    }
  ]
}

折线图

在这里插入图片描述

var option={
  title: {
    text: '折线分布图'
  },
  legend:{data:["折线图"]},
  tooltip:{},
  xAxis:{
    type: "category",
    data:["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
  },
  yAxis:{
    min:0,
    max:100,
    interval:10
  },
  series:[
    {
      type:"line",
      name:"折线图",
      data:[10,20,40,35,40,20,10]
    }
  ]
}

柱状图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F9q6Wabx-1585185588044)(assets/image-20200319165901828.png)]

var option={
  title: {
    text: '柱状分布图'
  },
  legend:{data:["柱状图"]},
  tooltip:{},
  xAxis:{
    type: "category",
    data:["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
  },
  yAxis:{
    min:0,
    max:100,
    interval:10
  },
  series:[
    {
      type:"bar",
      name:"柱状图",
      data:[10,20,40,35,40,20,10]
    }
  ]
}

不同Y轴

在这里插入图片描述

var option={
  title: {
    text: '不同Y轴'
  },
  legend:{data:["访问量1","访问量2"]},
  tooltip:{},
  xAxis:{
    data:["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
  },
  yAxis:[
    {min:0,max:50,interval:5},
    {min:0,max:100,interval:5}
  ],
  series:[
    {
      type:"bar",
      name:"访问量1",
      data:[10,20,40,35,40,20,10],
      yAxisIndex:0
    },{
      type:"line",
      name:"访问量2",
      data:[55,15,40,35,40,25,100],
      yAxisIndex:1
    }
  ]
}

不同x/y轴

在这里插入图片描述

var option={
  title: {
    text: '不同X和Y使用grid分离',
    left:"45%",
    top:0
  },
  grid:[
    {top:50,height:"80%",width:"40%"},
    {top:50,height:"80%",width:"40%",right:"5%"}
  ],
  legend:{
    data:["访问量1","访问量2"],
    left:"80%",
    top:0
  },
  tooltip:{},
  xAxis:[
    { data:["星期一","星期二","星期三","星期四","星期五","星期六","星期日"],gridIndex:0,type:"category"},
    { data:["mon","tus","wes","thu","fri","sat","sun"],gridIndex:1,type:"category"}
  ],
  yAxis:[
    {min:0,max:50,interval:5,gridIndex:0},
    {min:0,max:100,interval:10,gridIndex:1}
  ],
  series:[
    {
      type:"bar",
      name:"访问量1",
      data:[10,20,40,35,40,20,10],
      yAxisIndex:0,
      xAxisIndex:0
    },{
      type:"line",
      name:"访问量2",
      data:[55,15,40,35,40,25,100],
      yAxisIndex:1,
      xAxisIndex:1
    }
  ]
}

饼状图

在这里插入图片描述

var option = {
  legend:{
    data:["访问来源","周访问量"]
  },
  tooltip:{},
  xAxis:{
    type: "category",
    data:["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
  },
  yAxis:{
    min:0,
    max:100,
    interval:10
  },
  grid:{
    left:"5%",
    width:"60%"
  },
  series : [
    {
      name: '访问来源',
      type: 'pie',
      radius: '55%',
      center:["80%","50%"],
      radius:55,
      data:[
        {value:0, name:'视频广告'},
        {value:274, name:'联盟广告'},
        {value:310, name:'邮件营销'},
        {value:100, name:'直接访问'},
        {value:90, name:'搜索引擎'},
        {value:95, name:'广告推广'}

      ]
    },{
      type:"bar",
      name:"周访问量",
      data:[10,20,40,35,40,20,10]
    }

  ]
};
麦田里的守望者·
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端数据可视化echarts.js使用指南
02-24
让我有幸可以学习到一些好玩有趣的前端技术，前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面，目前市面上的数据可视化的框架琳琅满目，例如：D3.js、hightcharts.js、echarts.js…………。...
Vue项目中使用ECharts构建交互式中国地图的详细指南
最新发布
03-16
通过结合ECharts强大的数据可视化能力，您将学习如何安装必要的库、获取和集成中国地图的JSON数据，以及如何在Vue组件中配置和初始化地图实例。此外，本教程还涵盖了如何添加散点图和线条，以及如何通过CSS和额外的...
Echats详细介绍
m0_68907098的博客
10-27 1231
echars用法
ECharts
small_rain_的博客
10-27 1076
转自黑马程序员pink老师 ## 可视化面板介绍 ​ 应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。 ### 01-使用技术 完成该项目需要具备以下知识： - div + css 布局 - flex 布局 - Less - 原生js + jquery 使用 - rem适配 - **echarts基础** ### 02- 案例适配方案 - 设计稿是1920px 1. f...
echarts入门教程（超级详细带案例）
热门推荐
m0_55734030的博客
10-27 9万+
1.echarts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。 2.学习一项技术的关键，还是需要多读官方文档，官网链接Apache ECharts,与之类似的图表库还有D3，HeightCharts。 3.echarts的下载 （1）从 npm 获取 （2）从 CDN 获取 （3）从 GitHub 获取 （2）color调色盘 在 option 中设
Echars简单总结
weixin_43288858的博客
09-22 473
1、title 标题 title : { show:true,//显示策略，默认值true,可选为：true（显示） | false（隐藏） text: '主标题',//主标题文本，'\n'指定换行 link:'',//主标题文本超链接,默认值true target: null,//指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
Echarts
小白小白从不日别的博客
11-28 4万+
目录 1.1 什么是ECharts? 1.2 ECharts基本使用 1.3 ECharts标题组件 1.4 ECharts工具箱组件 1.5 ECharts弹窗组件 1.6 ECharts饼状图 1.7 ECharts航线图 更详细的教程请参考官方教程：Handbook - Apache ECharts 这里知识最简单的演示一下 1.1 什么是ECharts? ECharts是一个使用 JavaScript 实现的"数据可视化"库, 它可以流畅的运行在 PC 和移动设..
前端数据可视化echarts.js使用指南共13页.pdf
10-30
前端数据可视化echarts.js使用指南共13页.pdf.zip
百度 echarts 数据图形渲染技术学习指南
10-08
基于h5的图形化技术
ECharts的讲解
weixin_62268437的博客
08-11 1万+
把数据以更直观的形式展现----图表可以清晰有效地传达与沟通信息可以帮助我们快速的获取隐藏在数据中的信息ECharts是一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观，交换丰富，可高度个性化定制的数据可视化图表。官网地址：https://echarts.apache.org/zh/index.html。...
echars快速入门实战
qq_260179415的博客
08-13 718
Echars 一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE8 / 9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库  ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。 丰富的可视化类型 ECharts提供了常规的折线图，柱状图，散点图，饼图，K线图，用于统计的盒形...
echarts：基本使用
snowball的博客
11-01 3997
调试，好几次调试成功了，但是代码拿到网易BI就不太好使，我相信是我个人的原因；我把相关代码删减到极简状态，然后再次调试，寻找合适的mapjson，最终在网易BI可以展示全国地图了。，普通的开发正常按照步骤调试即可，网易bi有一点错误就会报错，也不能定位到具体的问题；这个小小示例，集成了echarts使用的基本步骤。3、获取 DOM 元素（容器），初始化 Echarts 实例。个人觉得，网易BI开发和在普通浏览器环境开发还是。5、使用配置项和数据渲染图表（渲染到容器中）4、指定图表的配置项和数据。
echarts 折线图 设置y轴最小刻度_在Vue项目中使用ECharts
weixin_39968640的博客
10-27 758
在Vue项目中使用ECharts通过 npm 安装 EChartsnpm install echarts --save按需引入// 引入 ECharts 主模块 var echarts = require("echarts/lib/echarts"); // 引入折线图 require("echarts/lib/chart/line"); // 引入提示框、标题组件、图例 require("ech...
echarts 事件传值
river、的博客
03-21 4376
一、通过元素的自定义属性传值 1、设置 首先在绘制图表的时候，通过 设置自定义 属性设置需要传递的值 // 设置自定义属性 $('#pieChartBox').attr("data-hostType",'1'); // pieChart2("pieChartBox",desc,title,data,color); 2...
echars的简单使用
HongRi_的博客
03-06 704
由于业务需要使用到echars的插件,自己又不是专业前端,之前没有使用过该插件,所以去官网大概看了一下,echars是一个非常强大的视图插件样式繁多,使用方便灵活,我也去百度浏览了一下一些该插件的使用方法,总结一下,留着以后作为参考,若有哪里写的不对,欢迎指正 点击进入echars官网地址 该示例需要使用的js 前端代码 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lan...
ECharts可视化库
weixin_63267832的博客
12-09 3004
echarts是一个使用原生js实现的开源可视化库。它可以在PC端和移动端设备上运行，目前兼容的浏览器有IE8/9/10/11,chrome,Firefox,safari等，其底层依赖于矢量图形库ZRender，为开发者提供了直观，交互丰富，可高度个性化定制的数据可视化图表。
echarts入门基础教程
weixin_45818290的博客
08-25 1万+
新手小白echarts使用教程
Echars一些常用属性
csdn_meng的博客
04-12 200
setOption({ title: { // 官方文档： https://echarts.apache.org/zh/option.html#title text: '你的标题', // 标题 textStyle: { // 标题的样式 color: '#440055', // 标题的颜色 fontSize: '14px', // 字体大小 width: '100px', // 宽 height: '28px' // 高 }
echarts全解析及其用法详解
L1ke_one的博客
03-28 4万+
一、echarts简介 百度开发团队制作，开源交给apache基金管理 制作图表的JavaScript库 同类型产品highCharts D3 二、echarts步骤 初始化 var echart = echarts.init(dom节点,主题) 定义选项option var option = { title标题 legend图例 color调试版本 tooltip提示 xAxis轴线X yAxis轴线Y series系列数据 } 更新选项 echart.setOp...
echarts本地文档
08-11
Echarts的文档是指官方提供的关于Echarts库的详细说明和使用指南，包括安装配置、API文档、示例代码等内容。 Echarts的本地文档是指将Echarts官方文档下载到本地计算机上进行查阅和使用。将文档下载到本地可以使...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值