位置: IT常识 - 正文

ECharts的讲解(echarts简介)

编辑:rootadmin
ECharts的讲解

目录

什么是数据可视化

ECharts的介绍

ECharts的特点

ECharts的基本使用

操作步骤

通用配置title的相关配置

通用配置tooltip的相关配置

触发类型:trigger

触发时机:triggerOn

​格式化:formatter

通用配置toolbox的相关配置

通用配置legend的相关配置

案例源码

小结

折线图常见效果

标记 

线条控制

​编辑填充风格

紧挨边缘

缩放:脱离 0 值比例

堆叠图

 案例源码


什么是数据可视化把数据以更直观的形式展现----图表可以清晰有效地传达与沟通信息可以帮助我们快速的获取隐藏在数据中的信息ECharts的介绍

推荐整理分享ECharts的讲解(echarts简介),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:echarts常用方法,echarts功能,echarts入门,echarts常用方法,echarts步骤,echarts常用方法,echarts入门教程,echarts入门教程,内容如对您有帮助,希望把文章链接给更多的朋友!

ECharts是一个使用JavaScript实现的开源可视化库,兼容性强,底层依赖矢量图形库ZRender,提供直观,交换丰富,可高度个性化定制的数据可视化图表。

官网地址:https://echarts.apache.org/zh/index.html 

ECharts的特点它具有丰富的可视化类型,折线图,柱状图,饼图,K线图等等.....它可以支持多种数据格式,比如key-value数据格式,二维表,和TypedArray格式它可以支持流数据,对于超大的数据量而言,数据的本身就非常非常耗费资源了,而ECharts支持对数据的动态渲染,加载多少数据就渲染多少数据,这样一来就省去了漫长数据加载等待的时间,它也提供了增量渲染技术(只渲染变化的数据),从而提供资源的利用效率。还具有移动端的优化,跨平台的使用,绚丽的特效和三维可视化等等特点,感兴趣的同学可以访问这个网址:https://echarts.apache.org/zh/feature.html

小结 

ECharts的基本使用操作步骤

步骤1:引入echarts.js文件

步骤2:准备一个呈现图表的盒子

步骤3:初始化echarts实例对象

步骤4:准备配置项

步骤5:将配置项设置给echarts实例对象

echarts.js获取(此为链接,可点击发生跳转)

案例演示

<!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>我的尝试</title> <!-- 步骤1:引入echarts.js文件 --> <script src="./js/echarts.min.js"></script></head><!-- 步骤1:引入echarts.js文件步骤2:准备一个呈现图表的盒子步骤3:初始化echarts实例对象步骤4:准备配置项步骤5:将配置项设置给echarts实例对象 --><body> <!-- 步骤2:准备一个呈现图表的盒子 --> <div id="changshi" style="width:600px; height:400px"></div> <script> // 步骤3:初始化echarts实例对象 // 参数,dom,决定图表最终呈现的位置 var chart = echarts.init(document.querySelector('#changshi')) var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大牛'] var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86] // 步骤4:准备配置项 var option = { title: { text: '成绩', link: ' http://www.itcast.cn' //点击可以发生页面跳转 }, xAxis: { type: 'value' //数值轴 }, yAxis: { type: 'category', //类目轴 data: xDataArr }, series: [{ name: '语文成绩', type: 'bar', //图表的类型,line就是折线图,pie就是饼图等等 markPoint: { data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' } ] }, markLine: { data: [{ type: 'average', name: '平均值' }] }, label: { show:true,//显示数值 rotate:60,//可以让数值旋转60°,给用户带来不一样的体验 position:'top'//位置标签 }, barWidth:'30%', data: yDataArr }] }; // 步骤5:将配置项设置给echarts实例对象 chart.setOption(option) </script></body></html>

最初效果 

添加最值和平均值 

改变柱子的宽度和显示柱子的数值

将柱状图变为横向的(最终效果) 

小结

 

通用配置title的相关配置

文字样式textStyle;标题边框的宽度(borderWidth),颜色(borderColor)和圆角半径(borderRadius);标题位置(left,top,right和bottom)。

 

通用配置tooltip的相关配置

tooltip:提示框组件,用于配置鼠标滑过或点击图表时的显示框 

触发类型:trigger

trigger:'item'

当鼠标滑在图表(图中红色矩形部分)之上,就会有提示框出现。

ECharts的讲解(echarts简介)

trigger:'axis' 

当鼠标滑在图表(图中红色矩形部分)之上,就会有提示框出现。

触发时机:triggerOn

triggerOn:'mouseover'

  

triggerOn:'click'

格式化:formatter

字符串模板

回调函数

  

 

咱们就是说,不会的话,或者忘记了,都可以去上文提到的官方文档中查询。

通用配置toolbox的相关配置

 

通用配置legend的相关配置

 

案例源码<!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>通用配置</title> <!-- 步骤1:引入echarts.js文件 --> <script src="./js/echarts.min.js"></script></head><!-- 步骤1:引入echarts.js文件步骤2:准备一个呈现图表的盒子步骤3:初始化echarts实例对象步骤4:准备配置项步骤5:将配置项设置给echarts实例对象 --><body> <!-- 步骤2:准备一个呈现图表的盒子 --> <div id="changshi" style="width:600px; height:400px"></div> <script> // 步骤3:初始化echarts实例对象 // 参数,dom,决定图表最终呈现的位置 var chart = echarts.init(document.querySelector('#changshi')) var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大牛'] var yDataArr1 = [88, 92, 63, 77, 94, 80, 72, 86] var yDataArr2 = [93, 60, 61, 62, 85, 79, 92, 30] // 步骤4:准备配置项 var option = { title: { text: '成绩展示', textStyle: { color: 'red' }, borderWidth: 5, //边框宽度 borderColor: 'blue', //边框颜色 borderRadius: 5, //边框圆角半径 left: 50, //距离盒子的左侧50px top: 10, //距离盒子的上面10px link: ' http://www.itcast.cn' //点击可以发生页面跳转 }, tooltip: { // trigger: 'item' trigger: 'axis', // triggerOn:'mouseover' //鼠标滑过图表时,便会弹出提示框,这是默认的 triggerOn: 'click', //鼠标点击图表时,才会弹出提示框 // formatter:'{b}的成绩是{c}' formatter: function (arg) { console.log(arg) //控制台打印参数 return arg[0].name + '的分数是' + arg[0].data } }, toolbox: { feature: { saveAsImage: {}, //导出图片的功能 dataView: {}, //数据视图 restore: {}, //重置 dataZoom: {}, //区域缩放 magicType: { type: ['bar', 'line'] } //动态图表类型的切换 } }, legend:{ data:['语文成绩','数学成绩'] },//筛选系列 xAxis: { type: 'category', //类目轴 data: xDataArr }, yAxis: { type: 'value' //数值轴 }, series: [{ name: '语文成绩', type: 'bar', //图表的类型,line就是折线图,pie就是饼图等等 markPoint: { data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' } ] }, markLine: { data: [{ type: 'average', name: '平均值' }] }, label: { show: true, //显示数值 rotate: 60, //可以让数值旋转60°,给用户带来不一样的体验 position: 'top' //位置标签 }, // barWidth: '30%', data: yDataArr1 }, { name: '数学成绩', type: 'bar', //图表的类型,line就是折线图,pie就是饼图等等 markPoint: { data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' } ] }, markLine: { data: [{ type: 'average', name: '平均值' }] }, label: { show: true, //显示数值 rotate: 60, //可以让数值旋转60°,给用户带来不一样的体验 position: 'top' //位置标签 }, // barWidth: '30%', data: yDataArr2 }, ] }; // 步骤5:将配置项设置给echarts实例对象 chart.setOption(option) </script></body></html>小结

折线图常见效果标记 

  

线条控制

填充风格

紧挨边缘

缩放:脱离 0 值比例 堆叠图

堆积图是在普通面积图的基础上,将不同数据项一层层堆叠起来,每个数据系列的起始点是上一个数据系列的结束点,既能看到各数据系列的走势,又能看到整体的规模和不同数据项的占比情况。

两折线图堆叠前

 两折线图堆叠后

堆叠并填充后 

 案例源码<!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>折线图常见效果</title> <!-- 步骤1:引入echarts.js文件 --> <script src="./js/echarts.min.js"></script></head><!-- 步骤1:引入echarts.js文件步骤2:准备一个呈现图表的盒子步骤3:初始化echarts实例对象步骤4:准备配置项步骤5:将配置项设置给echarts实例对象 --><body> <!-- 步骤2:准备一个呈现图表的盒子 --> <div id="changshi" style="width:600px; height:400px"></div> <script> // 步骤3:初始化echarts实例对象 // 参数,dom,决定图表最终呈现的位置 var chart = echarts.init(document.querySelector('#changshi')) var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大牛'] var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300] var yDataArr1 = [2000, 3800, 1900, 500, 900, 1700, 2400, 300] // 步骤4:准备配置项 var option = { title: { text: '成绩展示', textStyle: { color: 'red' }, borderWidth: 5, //边框宽度 borderColor: 'blue', //边框颜色 borderRadius: 5, //边框圆角半径 left: 50, //距离盒子的左侧50px top: 10, //距离盒子的上面10px link: ' http://www.itcast.cn' //点击可以发生页面跳转 }, tooltip: { // trigger: 'item', trigger: 'axis', // triggerOn:'mouseover' //鼠标滑过图表时,便会弹出提示框,这是默认的 // triggerOn: 'click', //鼠标点击图表时,才会弹出提示框 // formatter:'{b}的成绩是{c}' // formatter: function (arg) { // console.log(arg) //控制台打印参数 // return arg[0].name + '语文的分数是' + arg[0].data // } }, xAxis: { type: 'category', //类目轴 data: xDataArr // boundaryGap:false }, yAxis: { type: 'value', //数值轴 scale: true }, series: [{ name: '语文成绩', type: 'line', //图表的类型,line就是折线图,pie就是饼图等等 // markPoint: { // data: [{ // type: 'max', // name: '最大值' // }, // { // type: 'min', // name: '最小值' // } // ] // }, // markLine: { // data: [{ // type: 'average', // name: '平均值' // }] // }, // markArea: { // data: [ // [{ // xAxis: '张三' // }, { // xAxis: '李四' // }], // [{ // xAxis: '小明' // }, { // xAxis: '茅台' // }] // ] // }, // smooth: true, //变成平滑的效果 lineStyle: { color: 'green', type: 'solid' //虚线的效果 dotted 点线 solid 实线(默认) }, label: { show: true, //显示数值 rotate: 60, //可以让数值旋转60°,给用户带来不一样的体验 position: 'top' //位置标签 }, // barWidth: '30%', // areaStyle: { // color: 'green' // }, //面积填充 data: yDataArr, stack:'all', areaStyle:{} }, { name: '数学成绩', type: 'line', label: { show: true, //显示数值 rotate: 60, //可以让数值旋转60°,给用户带来不一样的体验 position: 'top' //位置标签 }, data:yDataArr1, stack:'all', areaStyle:{} } ] }; // 步骤5:将配置项设置给echarts实例对象 chart.setOption(option) </script></body></html>
本文链接地址:https://www.jiuchutong.com/zhishi/295957.html 转载请保留说明!

上一篇:css关于文本溢出(css单行文本溢出隐藏)

下一篇:深度学习环境配置(pytorch版本)----超级无敌详细版(有手就行)

  • 苹果11忘记锁屏密码怎么办(苹果11忘记锁屏密码停用了怎么办法)

    苹果11忘记锁屏密码怎么办(苹果11忘记锁屏密码停用了怎么办法)

  • 华为畅连语音什么意思(华为畅连语音能被监听么)

    华为畅连语音什么意思(华为畅连语音能被监听么)

  • y9s手机上市时间(y9s手机上市时间价格)

    y9s手机上市时间(y9s手机上市时间价格)

  • 三星f9000折叠手机和三星w20是一款吗(三星f9000折叠手机拆机视频)

    三星f9000折叠手机和三星w20是一款吗(三星f9000折叠手机拆机视频)

  • qq消息推送在哪里设置?(扣扣消息推送在哪里)

    qq消息推送在哪里设置?(扣扣消息推送在哪里)

  • airpods pro充电时灯会一直亮吗(airpods pro充电时一直响)

    airpods pro充电时灯会一直亮吗(airpods pro充电时一直响)

  • 闲鱼删除订单还显示评价吗(闲鱼删除订单还能恢复吗)

    闲鱼删除订单还显示评价吗(闲鱼删除订单还能恢复吗)

  • cdy-tn00是什么型号(CDY-TN00是什么型号)

    cdy-tn00是什么型号(CDY-TN00是什么型号)

  • 手机边玩边充电越充越少(手机边玩边充电为什么越充越少)

    手机边玩边充电越充越少(手机边玩边充电为什么越充越少)

  • qq验证粉是什么(qq验证粉引流技术有人叫吗)

    qq验证粉是什么(qq验证粉引流技术有人叫吗)

  • 抖音降权了什么时候才能恢复(抖音降权了什么意思啊)

    抖音降权了什么时候才能恢复(抖音降权了什么意思啊)

  • qq为什么匹配不了(qq为什么匹配不了聊天)

    qq为什么匹配不了(qq为什么匹配不了聊天)

  • 在关系型数据库中二维表中的一行被称为(在关系型数据库中,一个关系对应一个)

    在关系型数据库中二维表中的一行被称为(在关系型数据库中,一个关系对应一个)

  • 抖音是怎么推送视频(抖音是怎么推送可能认识的人)

    抖音是怎么推送视频(抖音是怎么推送可能认识的人)

  • 电脑data是什么意思(电脑中的data)

    电脑data是什么意思(电脑中的data)

  • 华为nova5耳机怎么用(华为nova5i的耳机)

    华为nova5耳机怎么用(华为nova5i的耳机)

  • 荣耀20怎么调虚拟按键(荣耀怎么调虚拟按键)

    荣耀20怎么调虚拟按键(荣耀怎么调虚拟按键)

  • 手机锁屏时间在哪里设置(华为手机设置锁屏时间在哪里)

    手机锁屏时间在哪里设置(华为手机设置锁屏时间在哪里)

  • ipad pro 笔一代二代对比(ipad pro 2021 一代笔)

    ipad pro 笔一代二代对比(ipad pro 2021 一代笔)

  • 预防木马的注意事项有哪些(预防木马的注意事项有)

    预防木马的注意事项有哪些(预防木马的注意事项有)

  • etc异地可以充值吗(etc异地可以充值嘛)

    etc异地可以充值吗(etc异地可以充值嘛)

  • 华为p30指纹在哪里(华为p30指纹识别在哪)

    华为p30指纹在哪里(华为p30指纹识别在哪)

  • Word如何删除空白页(word如何删除空白表格)

    Word如何删除空白页(word如何删除空白表格)

  • cmtds接入点是免费的吗(cmtds接入点费流量吗)

    cmtds接入点是免费的吗(cmtds接入点费流量吗)

  • hphupd04.exe是什么进程 作用是什么 hphupd04进程查询(hpptd.exe)

    hphupd04.exe是什么进程 作用是什么 hphupd04进程查询(hpptd.exe)

  • 比利牛斯山脉中的高山湖Ibón de Plan,西班牙韦斯卡 (© Getty Images)(比利牛斯山作为天然界限)

    比利牛斯山脉中的高山湖Ibón de Plan,西班牙韦斯卡 (© Getty Images)(比利牛斯山作为天然界限)

  • 营业账簿印花税怎么交
  • 增值税普通
  • 服务行业人工费计入什么科目
  • 当期可抵扣进项税额加计5%抵减应纳税额
  • 怎么查企业适用哪个会计制度教学视频
  • 废旧物资收购发票取消
  • 软件公司主营业务是什么
  • 进项税抵扣
  • 房地产企业土地增值税
  • 房地产企业开发产品转固定资产
  • 出售闲置的材料物资
  • 结算备付金是流水账单吗
  • 收到抵物广告费的会计处理怎么做?
  • 证券公司转让价格
  • 小规模纳税人企业所得税怎么计算
  • 进口增值税未抵扣怎么办
  • 个人所得税税费种认定功能在哪里
  • 小规模不动产租赁税率是否减按1%
  • 生育津贴缴纳
  • 资产负债表属于会计报表吗
  • 关于燃油消费税征收范围及税率
  • 员工离职再入职要重新签订合同吗
  • 结转固定资产净收益8万元
  • 小规模纳税人缴税计算
  • 失控发票账务处理
  • 餐饮发票免税能报销吗
  • 发票勾选保存后不提交了能留到下月抵扣吗?
  • 个体户没有进项票怎么开销项发票
  • 主营业务收入平均增长率计算例题
  • 收到财政局专项审计短信
  • 商家说补发什么意思
  • windows 7无线开关在哪里
  • uniapp异常处理
  • 所得税到底按会计分录吗
  • 货物价格如何确定
  • PHP:pg_connection_busy()的用法_PostgreSQL函数
  • 产品工人工资会扣税吗
  • 补缴断交的医保划算吗
  • 办理不动产证需要什么手续及证件
  • 两名山地车骑手死亡
  • jquery向下滑动元素
  • php入门课程
  • 销售返利的形式有哪些
  • Jetson Xavier NX配置全过程——安装jtop和OpenCV4.5.3(二)
  • 成品油发票当月冲红
  • 增值税报了所得税未报可以买发票吗
  • php登录注册
  • 收到预付货款下月交货会计分录
  • 购进原材料款项未付应编制什么凭证
  • 电子商务公司怎么做账比较合适
  • 销售额包括哪些会计科目
  • 代购进口货物垫付方案
  • 一般餐饮业的固废是什么
  • 跨年成本少结转如何调整
  • 小型微利企业减按25%计算应纳税所得额
  • 人们对餐饮业的要求
  • 预付账款为什么不是金融资产
  • 收到退回的企业所得税如何做账
  • 小规模纳税人购进税控设备如何抵扣
  • 公司帐户转到法人账户
  • 客户到我公司签字怎么说
  • 复利终值与现值的关系
  • 往来账清账
  • sql server本地服务器地址如何查看
  • 快速解决小孩便秘
  • centos7.2安装
  • bios如何设置
  • reg注册表格式文件
  • 怎么用苹果电脑打印照片
  • linux rsyslogd
  • win10 11月累计补丁KB3097877更新后导致应用崩溃该怎么办?
  • scardsvr32.exe - scardsvr32是什么进程 有什么用
  • mis.off c n
  • perl怎么把字符串变为数字
  • shell脚本获取文件指定内容
  • jquery教程chm
  • pythen开发环境
  • js动态调用方法
  • android 网络编程
  • jsonobject.parseobject异常
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设