【ECharts】echarts数据化图表入门级教程（附10个案例）
2024-04-20 14:26:42
echarts数据化图表入门级教程（附10个案例）
01-Echarts-介绍
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
简单来说
- 作用：展示图表的（大数据可视化）
- 百度，捐给Apache 免费开源
- 竞品
- heightCharts
- D3
Apache ECharts，一个基于 JavaScript 的开源可视化图表库
官网地址
02-使用
- 步骤1：下载并引入
echarts.js文件
- 步骤2：准备一个具备大小的
DOM容器
- 步骤3：初始化
echarts实例对象
- 步骤4：指定配置项和数据(
option)
- 步骤5：将配置项设置给
echarts实例对象
03-Echarts-基础配置
需要了解的主要配置：
seriesxAxisyAxisgridtooltiptitlelegendcolor
series
- 系列列表。每个系列通过
type决定自己的图表类型 - 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。
- 系列列表。每个系列通过
xAxis：直角坐标系 grid 中的 x 轴
- boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
yAxis：直角坐标系 grid 中的 y 轴
grid：直角坐标系内绘图网格。
title：标题组件
tooltip：提示框组件
legend：图例组件
color：调色盘颜色列表
数据堆叠，同个类目轴上系列配置相同的
stack值后 后一个系列的值会在前一个系列的值上相加。
04-ECharts官网使用
- 记住网址所在 https://echarts.apache.org/zh/index.html
- 入门示例（helloword）https://echarts.apache.org/handbook/zh/get-started/
- 类的方法
- 实例的方法
- 动作与事件
- 选项配置option如何修改
05-简单案例
demo1
运用知识点
| 里面涉及的单词 | document文档 |
|---|---|
| Option选项 | data数据 |
| type类型 | bar条（柱状条） |
| chart图表 | set设置 |
| series系列（数据） | Axis轴线 |
| xAxis水平轴线 | legend传奇（图例） |
| tooltip 提示 | init初始化 |
实现效果
代码
<head><meta charset="utf-8"><title></title><!-- 01 导入js --><script src="js/echarts.min.js"></script><!-- 03 设置容器的样式 --><style>#container{width: 800px;height: 600px;}</style></head><body><!-- 02 创建个容器 --><div id="container"></div></body>
<script>//04 实例化echarts// 4.1 创建一个实例var echart = echarts.init(document.getElementById("container"))// 4.2 定义配置项var option = {// 图表的标题title:{text:"我的第一个图表"},// 图表的提示tooltip:{},// 图例legend:{data:["睡眠时长"]},// x轴线xAxis:{data:["周一","周二","周三","周四","周五","周六","周日"]},// y轴线yAxis:{},// 设置数据series:[{// 数据名称name:"睡眠时长",// 类型为柱状图type:"bar",// 数据datadata:[8,10,4,5,9,4,8]}]}// 4.3 更新配置echart.setOption(option);</script>
demo2
实现效果
代码
<head><meta charset="utf-8"><title></title><!-- 01 导入js --><script src="js/echarts.min.js"></script><!-- 03 设置容器的样式 --><style>#container{width: 800px;height: 600px;}</style></head><body><!-- 02 创建个容器 --><div id="container"></div></body>
<script>//04 实例化echarts// 4.1 创建一个实例var echart = echarts.init(document.getElementById("container"))// 4.2 定义配置项var option = {// 图表的标题title:{text:"我的第一个图表"},// 图表的提示tooltip:{},// 图例legend:{data:["睡眠时长","玩游戏时长","上课时长"]},// x轴线xAxis:{data:["周一","周二","周三","周四","周五","周六","周日"]},// y轴线yAxis:{},// 设置数据series:[{// 数据名称name:"睡眠时长",// 类型为柱状图type:"bar",// 数据datadata:[8,10,4,5,9,4,8]},{// 数据名称name:"玩游戏时长",// 类型为柱状图type:"line",// 数据datadata:[2,4,1,5,6,8,5]},{// 数据名称name:"上课时长",// 类型为柱状图type:"line",smooth:true,// 数据datadata:[6,7,5,8,6,1,0],areaStyle:"#f70"},{name:"成绩",// 饼形图type:"pie",// radius:80,// 半径radius:[80,50],// 位移left:-80,top:-270,// 数据data:[{name:"js",value:90},{name:"html",value:85},{name:"jq",value:90},{name:"vue",value:50},]}]}// 更新配置echart.setOption(option);</script>
demo3
实现效果
代码
- 去 官网——主题构建工具 下载
js的就行，然后引入
<head><meta charset="utf-8"><title></title><!-- 01 导入js --><script src="js/echarts.min.js"></script><!-- 03 设置容器的样式 --><script src="./js/purple-passion.js" type="text/javascript" charset="utf-8"></script><style>#container{width: 800px;height: 600px;}</style></head>
<script>//04 实例化echarts// 4.1 创建一个实例var echart = echarts.init(document.getElementById("container"))// 主题，light，dark，自定义// var echart = echarts.init(document.getElementById("container"),'purple-passion')// 4.2 定义配置项var option = {// 调色盘// color:["#55aaff","#aaff7f","#55007f","#ffff00"],// 图表的标题title:{text:"我的第一个图表"},// 图表的提示tooltip:{},// 图例legend:{data:["睡眠时长","玩游戏时长","上课时长"]},// x轴线xAxis:{data:["周一","周二","周三","周四","周五","周六","周日"]},// y轴线yAxis:{},// 设置数据series:[{// 数据名称name:"睡眠时长",// 类型为柱状图type:"bar",// 数据datadata:[8,10,4,5,9,4,8],color:["#ac4cff"]},{// 数据名称name:"玩游戏时长",// 类型为柱状图type:"line",// 数据datadata:[2,4,1,5,6,8,5]},{// 数据名称name:"上课时长",// 类型为柱状图type:"line",smooth:true,// 数据datadata:[6,7,5,8,6,1,0],},{name:"成绩",// 饼形图type:"pie",// radius:80,// 半径radius:[80,50],// 位移left:-80,top:-270,// 数据data:[{name:"js",value:90},{name:"html",value:85,itemStyle:{color:"#ffaa00"}},{name:"jq",value:90,itemStyle:{normal:{color:"#93da6c"},emphasis:{color:"#bcff57"}}},{name:"vue",value:50},]}]}// 更新配置echart.setOption(option);</script>
demo4
实现效果
代码
<head><meta charset="utf-8"><title></title><!-- 01 导入js --><script src="js/echarts.min.js"></script><!-- 03 设置容器的样式 --><script src="./js/purple-passion.js" type="text/javascript" charset="utf-8"></script><style>#container{width: 800px;height: 600px;}</style></head><body><!-- 02 创建个容器 --><div id="container"></div></body>
<script>// 定义渐变var linear = {type: 'linear',x: 0,y: 0,x2: 0,y2:1,colorStops: [{offset: 0, color: '#02bcff' // 0% 处的颜色}, {offset: 1, color: '#5555ff' // 100% 处的颜色}],global: false // 缺省为 false}//04 实例化echarts// 4.1 创建一个实例var echart = echarts.init(document.getElementById("container"))// 主题，light，dark，自定义// var echart = echarts.init(document.getElementById("container"),'purple-passion')// 4.2 定义配置项var option = {// 调色盘// color:["#55aaff","#aaff7f","#55007f","#ffff00"],// 图表的标题title:{text:"我的第一个图表"},// 图表的提示tooltip:{},// 图例legend:{data:["睡眠时长","玩游戏时长","上课时长"]},// x轴线xAxis:{data:["周一","周二","周三","周四","周五","周六","周日"]},// y轴线yAxis:{},// 设置数据series:[{// 数据名称name:"睡眠时长",// 类型为柱状图type:"bar",// 数据datadata:[8,10,4,5,9,4,8],// color:["#ac4cff"]itemStyle:{color:linear,borderRadius:[30,30,0,0]}},{// 数据名称name:"玩游戏时长",// 类型为柱状图type:"line",// 数据datadata:[2,4,1,5,6,8,5]},{// 数据名称name:"上课时长",// 类型为柱状图type:"line",smooth:true,// 数据datadata:[6,7,5,8,6,1,0],// areaStyle:"#f70"},{name:"成绩",// 饼形图type:"pie",// radius:80,// 半径radius:[80,50],// 位移left:-80,top:-270,// 数据data:[{name:"js",value:90},{name:"html",value:85,itemStyle:{color:"#ffaa00"}},{name:"jq",value:90,itemStyle:{normal:{color:"#93da6c"},emphasis:{color:"#bcff57"}}},{name:"vue",value:50},]}]}// 4.3 更新配置echart.setOption(option);</script>
demo5
实现效果
代码
html><head><meta charset="utf-8"><title></title><script src="js/echarts.min.js"></script><style> #container{width: 800px;height: 600px;}</style></head><body><div id="container"></div>
<script>var echart = echarts.init(document.getElementById("container"))var option = {title:{text:"堆叠-蓝蓝-红红"},legend:{data:["蓝蓝","红红"]},// tooltip提示 trigger触发器 axis轴线触发，item 当前项触发tooltip:{trigger:"axis"},yAxis:{data:["vue","js","html"]},xAxis:{},series:[{name:"蓝蓝",type:"bar",data:[80,60,75],stack:true,// stack堆叠，label 标签，position位置，inside内部，right右侧，formmater格式// \n 代表换行，{a}系列名 "蓝蓝" {b}数值名 "vue" {c}数值 80label:{show:true,position:"insideRight",formatter:"{a}\n{c}分"}},{name:"红红",type:"bar",data:[95,80,35],stack:true,label:{show:true,position:"insideRight",formatter:"{a}\n{c}分"}}]}echart.setOption(option);</script>
demo6
实现效果
代码
<head><meta charset="utf-8" /><title></title><script src="js/echarts.min.js"></script><style>#container {width: 800px;height: 600px;}</style></head><body><div id="container"></div>
<script>var echart = echarts.init(document.getElementById("container"));var option = {title: { text: "堆叠-蓝蓝-红红" },toolbox: {// 显示工具箱show: true,feature: {// 数据缩放dataZoom: {yAxisIndex: "none",},// 数据视图只读dataView: { readOnly: false },// 魔法类型magicType: { type: ["line", "bar"] },// 重置restore: {},// 保存图片saveAsImage: {},},},legend: { data: ["蓝蓝", "红红"] },// tooltip提示 trigger触发器 axis轴线触发，item 当前项触发tooltip: { trigger: "axis" },yAxis: { data: ["vue", "js", "html"] },xAxis: {},series: [{name: "蓝蓝",type: "bar",data: [80, 60, 75],stack: true,// stack堆叠，label 标签，position位置，inside内部，right右侧，formmater格式// \n 代表换行，{a}系列名 "蓝蓝" {b}数值名 "vue" {c}数值 80label: {show: true,position: "insideRight",formatter: "{a}\n{c}分",},},{name: "红红",type: "bar",data: [95, 80, 35],stack: true,label: {show: true,position: "insideRight",formatter: "{a}\n{c}分",},},],};echart.setOption(option);</script>
demo7
实现效果
代码
<head><meta charset="utf-8"><title></title><script src="js/echarts.min.js"></script><style> #container{width: 800px;height: 600px;}</style></head><body><div id="container"></div>
<script>var echart = echarts.init(document.getElementById("container"))var option = {title:{text:"网站访问来源"},legend:{data:["其他","百度"]},tooltip:{},series:[{type:"pie",radius:[200,110],data:[{name:"百度",value:1200,label:{show:true,position:"center",// {d}百分比 {big|内容} 使用样式formatter:"{big|{d}}{small|%}\n{b}",// 定义样式（富文本）rich:{big:{color:"#f70",fontSize:"48px",fontWeight:900,},small:{color:"#f70"}}}},{name:"其他",value:360,// 样式灰色itemStyle:{color:"#ccc"},// 标签不显示label:{show:false},// 提示不显示tooltip:{show:false}}]}]}echart.setOption(option);</script>
demo8
实现效果
代码
<head><meta charset="utf-8"><title></title><script src="js/echarts.min.js"></script><style> #container{width: 1200px;height: 600px;}</style></head><body><div id="container"></div>
<script type="text/javascript" src="./js/data.js"> </script><script>console.log(data);// sort排序，map映射，slice(-4)切割后四位var trends = data.data.trends.sort((a,b)=>a.day-b.day);var echart = echarts.init(document.getElementById("container"))var option = {title:{text:"新冠肺炎趋势"},legend:{data:["累计确诊"]},tooltip:{},yAxis:{},// slice(0,20),只显示前20条数据xAxis:{data:trends.slice(0,20).map(item=>String(item.day).slice(-4))},series:[{name:"累计确诊",type:"bar",// data:[{name:"",value:""}]data:trends.slice(0,20).map(item=>item.sure_cnt)}] }// 每隔3秒执行一次movevar id = setInterval(move,3000);function move(){// 删除第一个var first = trends.shift();// 添加到最后trends.push(first);// 更新optionoption.xAxis.data = trends.slice(0,20).map(item=>String(item.day).slice(-4));option.series[0].data= trends.slice(0,20).map(item=>item.sure_cnt);// 更新 图echart.setOption(option);}// 鼠标移入停止动画echart.on("mouseover",function(){clearInterval(id)})// 鼠标移出播放echart.on("mouseout",function(){id = setInterval(move,3000);})echart.setOption(option);</script>
demo9
实现效果
代码
<head><meta charset="utf-8"><title></title><script src="js/echarts.min.js"></script><style> #container{width: 1200px;height: 600px;}</style></head><body><div id="container"></div><script type="text/javascript" src="./js/data.js"></body>
<script>console.log(data);// sort排序，map映射，slice(-4)切割后四位var trends = data.data.trends.sort((a,b)=>a.day-b.day);var echart = echarts.init(document.getElementById("container"))var option = {title:{text:"新冠肺炎趋势"},legend:{data:["累计确诊"]},tooltip:{},yAxis:{},// slice(0,20),只显示前20条数据xAxis:{data:trends.slice(0,20).map(item=>String(item.day).slice(-4))},series:[{name:"累计确诊",type:"bar",// data:[{name:"",value:""}]data:trends.slice(0,20).map(item=>item.sure_cnt)}],// 每个执行延迟的时候（idx就是下标，随着下标的增大延迟会长）animationDelay: function (idx) {// 越往后的数据延迟越大return idx * 200;},animationDuration:function(idx){// 每小格动画的时候return idx*200;},// 弹性的方式出现动画animationEasing:"bounceInOut"}// 每隔3秒执行一次move// var id = setInterval(move,3000);function move(){// 删除第一个var first = trends.shift();// 添加到最后trends.push(first);// 更新optionoption.xAxis.data = trends.slice(0,20).map(item=>String(item.day).slice(-4));option.series[0].data= trends.slice(0,20).map(item=>item.sure_cnt);// 更新 图echart.setOption(option);}// 鼠标移入停止动画echart.on("mouseover",function(){clearInterval(id)})// 鼠标移出播放echart.on("mouseout",function(){id = setInterval(move,3000);})echart.setOption(option);</script>
demo10
实现效果
代码
<script src="js/echarts.min.js"></script><style>#container {width: 1200px;height: 600px;}</style></head><body><div id="container"></div><script type="text/javascript" src="./js/data.js"> </script>
</body>
<script>console.log(data);// sort排序，map映射，slice(-4)切割后四位var trends = data.data.trends.sort((a, b) => a.day - b.day);var echart = echarts.init(document.getElementById("container"),"dark");var option = {title: { text: "新冠肺炎趋势" },legend: { data: ["累计确诊"] },tooltip: {},yAxis: {},// slice(0,20),只显示前20条数据xAxis: {data: trends.slice(0, 20).map((item) => String(item.day).slice(-4)),},series: [{name: "累计确诊",type: "bar",// data:[{name:"",value:""}]data: trends.slice(0, 20).map((item) => item.sure_cnt),},],// 每个执行延迟的时候（idx就是下标，随着下标的增大延迟会长）animationDelay: function (idx) {// 越往后的数据延迟越大return idx * 100;},animationDuration: function (idx) {// 每小格动画的时候return idx * 100;},// 弹性的方式出现动画animationEasing: "bounceInOut",};// 每隔3秒移动一个// 显示提示的下标var ind = 0;var id = setInterval(play, 3000);// 播放function play() {// 发送一个显示提示的动作echart.dispatchAction({type: "showTip",// 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。seriesIndex: 0,// 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项dataIndex: ind,// 可选，数据项名称，在有 dataIndex 的时候忽略position: "top",});// 让ind加1ind++;// 大于20就归0if (ind >= 20) {ind = 0;}}echart.setOption(option);</script>
【ECharts】echarts数据化图表入门级教程（附10个案例）相关推荐
- echarts图表入门级教程（An introductory chart tutorial）
2022.10.12本人第一次使用echarts,接下来就让我和大家一起介绍echarts的用法. I am using echarts for the first time, so let me i ...
- Flex 3编程入门级教程附代码下载
<script type="text/javascript"> </script> <script type="text/javascrip ...
- 使用Echarts制作图表基础教程
在我们前端开发的过程中,会涉及到很多图表,如果用源生的js和css3制作的话,需要耗费大量的时间,同时代码量需求也比较大,那么我们在开发的过程中讲究的是效率,如果单单在制作图表的过程中就耗费了大量的时 ...
- 【ECharts系列|01入门】 从入门到天黑【入门级教程实战】
ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求. ECharts 遵循 Apache-2.0 开源协议,免费商用. ECharts 兼容当前绝大部分 ...
- vue中 ECharts 图表使用教程
ECharts 数据可视化图表有很多,今天就以饼图为例 第一步: 先来安装echarts npm install echarts --save 第二步: 在main.js中全局引用ECharts,当然 ...
- echarts 折线上写数值_前端ECharts数据可视化图表案例与介绍
什么是ECharts? ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
- 【ECharts】百度图表插件ECharts使用
百度ECharts报表呈现组件,挺不错的一个组件 官方网址:http://echarts.baidu.com/ 下载 ECharts http://echarts.baidu.com/download ...
- 在一个html加载多个echarts,Echarts一个页面加载多个图表及图表自适应
Echarts一个页面加载多个图表及图表自适应 模块化加载 //入口 require.config({ paths: { echarts: 'http://echarts.baidu.com/buil ...
- 手把手教你使用ECharts绘制可视化图表
1.在ECharts官网,下载ECharts的源码和示例文件. 2.解压缩下载下来的Echars压缩包,找到doc\example\www\echartsjs目录,将里面的js文件全部取出来,放到项目 ...
最新文章
- 魔法引用函数magic_quotes_gpc和magic_quotes_runtime的区别和用法
- 针对复杂***的情报分析实例
- python基础教程攻略-python基础教程（一）
- 骚年快答 | 微服务架构中的BFF到底是啥？
- python中newfile是干嘛用的_Python基础介绍 | File I\O 读写文件
- FastDFS+Nginx实现文件服务器
- matlab中tr什么意思,tr命令详解
- 新法案下 苹果或被禁止在设备上预装自家应用
- php日期控件calendar.js,轻量级的原生js日历插件calendar.js使用指南
- 上位机plc编程入门_图解PLC编程入门
- 基于python车牌识别系统_GitHub - DataXujing/vehicle-license-plate-recognition: 基于Python的车牌检测和识别系统：...
- 如何使用视频转换器将kux格式转换成mp4格式
- C++ atuo关键字的应用 -- 尾置返回类型(trailing return type)
- 阿里资深架构师推荐：浅谈异地多活及阿里云容灾经验分享
- 计算机系统概论备考,《计算机系统导论》复习题3.doc
- 企业IT机房中使用什么灭火器？
- 山寨机需要规范，中国需要山寨机
- pointnet的部分参考文献 用markmap显示
- python监控目录变化_如何用python语言监控文件或目录变化
- Python you-get 库的使用方法