Apache Echarts高级|图表显示优化
文章目录
- Apeach Echarts高级
- 一、显示相关
- 1.主题
- 2.调色盘
- 3.样式
- 4.大小自适应
- 二、动画的使用
- 1.加载动画
- 2.增量动画
- 3.动画的配置
- 三、交互API
- 1.全局echarts对象
- 2.echartsInstance对象
Apeach Echarts高级
每个图表均配有对应的源代码以及知识点~~~~
详情可点开对应的图表学习！
各类常用图表总结在此！配合使用更方便~
https://blog.csdn.net/diviner_s/article/details/116072584
官方对应文件工具，有更详细的工具使用方法：
https://echarts.apache.org/zh/option.html
一、显示相关
1.主题
-
默认主题
ECharts中默认内置了两套主题：light,dark
在初始化对象方法init中可以指明var mChart = echarts.init(dom,'light') var mChart = echarts.init(dom,'dark') -
自定义主题
1.在主题编译器中编辑主题
主题编译器的地址为：https://www.echartsjs.com/theme-builder/2.下载主题，是一个
js文件
在线编辑完成主题之后，可以点击下载主题按钮，下载主题的js文件
3.引入主题js文件<script src = "js/echarts.min.js"></script> <script src = "js/itcast.js"></script>其中，
itcast.js就是下载下来的主题文件4.在
init方法中使用主题var mCharts = echarts.init(document.querySelector("div"),'itcast')
init方法中的第二个参数itcast就是主题的名称，对于此图‘itcast’就是对应的名称。
2.调色盘
它是一组颜色，图形、系列会自动从其中选择颜色。
-
主题调色盘
-
全局调色盘
全局调色盘是在option下增加一个color的数组var option = {// 全局调色盘color: ['red', 'green', 'blue'],...... } mCharts.setOption(option) -
局部调色盘
局部调色盘就是在series下增加一个color的数组var option = {// 全局调色盘color: ['red', 'green', 'blue'],series: [{type: 'pie',data: pieData,// 局部调色盘color: ['pink', 'yellow', 'black']}] } mCharts.setOption(option)需要注意一点的是，如果全局的调色盘和局部的调色盘都设置了，局部调色盘会产生效果，这里面遵从的就近原则。
-
渐变颜色的实现
在ECharts中，支持线性渐变和径向渐变两种颜色的渐变方式-
线性渐变
线性渐变的类型为 linear , 他需要配置线性的方向, 通过x, y, x2, y2即可进行配置x , y , x2 , y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 global 为 true ，则该四个值是绝对的像素位置
在下述代码中的0 0 0 1意味着从上往下进行渐变<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><script src="lib/echarts.min.js"></script> </head> <body> <div style="width: 600px;height:400px"></div> <script>var mCharts = echarts.init(document.querySelector("div"))var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]var option = {xAxis: {type: 'category',data: xDataArr},yAxis: {type: 'value'},series: [{type: 'bar',data: yDataArr,itemStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: 'red' // 0% 处的颜色}, {offset: 1, color: 'blue' // 100% 处的颜色}],globalCoord: false // 缺省为 false}}}]};mCharts.setOption(option) </script> </body> </html> </html>
-
径向渐变
线性渐变的类型为radial, 他需要配置径向的方向, 通过x,y,r即可进行配置
前三个参数分别是圆心x,y和半径，取值同线性渐变
在下述代码中的 0.5 0.5 0.5 意味着从柱的重点点, 向外径向扩散半径为宽度一半的圆
-
series: [{itemStyle: {color: {type: 'radial',x: 0.5,y: 0.5,r: 0.5,colorStops: [{offset: 0, color: 'red' // 0% 处的颜色}, {offset: 1, color: 'blue' // 100% 处的颜色}],global: false // 缺省为 false}}}
]
3.样式
- 直接样式
-
itemStyle -
textStyle -
lineStyle -
areaStyle -
labeldata: [{value: 11231,name: "淘宝",itemStyle: {color: 'black'}} ] title: {text: '我是标题',textStyle: {color: 'red'} } label: {color: 'green' }这些样式一般都可以设置颜色或者背景或者字体等样式，他们会覆盖主题中的样式
-
- 高亮样式
图表中，其实有很多元素都是有两种状态的，一种是默认状态，另一种就是鼠标滑过或者点击形成的高亮状态，而高亮样式是针对于元素的高亮状态设定的样式。
series: [{type: 'pie', //饼状图data: [{value: 11231,name: "淘宝",itemStyle: { // 控制淘宝这一区域的样式color: 'yellow'},label: {color: 'green'},emphasis: { //控制高亮的样式itemStyle: { // 控制淘宝这一区域的样式color: 'pink'},label: {color: 'pink'}}}]}]
4.大小自适应
- 步骤1：监听窗口大小变化事件
- 步骤2：在事件处理函数中调用
ECharts实例对象的resize即可
<html lang="en">
<head><script src="js/echarts.min.js">script>
head>
<body>
<div style=" height:400px;border:1px solid red">div><script>var mCharts = echarts.init(document.querySelector("div"))var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]var option = {xAxis: {type: 'category',data: xDataArr},yAxis: {type: 'value'},series: [{type: 'bar',data: yDataArr}]};mCharts.setOption(option)// 监听window大小变化的事件window.onresize = function () {// 调用echarts示例对象的resize方法mCharts.resize()}// window.onresize = mCharts.resizescript>
body>
html>二、动画的使用
1.加载动画
Echarts已经内置好了加载数据的动画，我们只需要直接拿来用，并且控制好时机即可。
- 显示加载动画
mCharts.showLoading() //一般，我们会在获取图表数据之前 显示加载动画
- 隐藏加载动画
mCharts.hideLoading() //一般，我们会在获取图表数据之后 隐藏加载动画，显示图表
2.增量动画
增量动画指的是我们在图表中更新数据或者加入新的数据时，需要有个过渡的动画。
我们用setOption更新动画，我们只需要直接添加数据，Echarts会自动找到最新更新的数据位置在哪里，并且通过合适的动画去表现数据的变化。
<html lang="en">
<head><meta charset="UTF-8"><script src="lib/echarts.min.js">script>
head>
<body>
<div style="width: 600px;height:400px">div><button>修改数据button><button id="btnAdd">增加数据button><script>var mCharts = echarts.init(document.querySelector("div"))var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]var option = {xAxis: {type: 'category',data: xDataArr},yAxis: {type: 'value'},series: [{type: 'bar',data: yDataArr}]};mCharts.setOption(option)var btn = document.querySelector('button');btn.onclick = function () {var newArr = [68, 62, 93, 67, 64, 90, 52, 36]// setOption的方法可以被调用多次// 新的option 和旧的option配置// 新旧option配置项他们之间不是替换的关系,是相互整合的关系// 我们在设置新的option的时候,只需要考虑到将变化的配置项配置就可以了var option = {series: [{data: newArr,}]};mCharts.setOption(option)}var btnAdd = document.querySelector('#btnAdd')btnAdd.onclick = function () {setInterval(function () {//增加数据xDataArr.push('小明')yDataArr.push(parseInt(50 + Math.random() * 10))var option = {xAxis: {data: xDataArr},series: [{data: yDataArr}]}mCharts.setOption(option)}, 1000)}script>
body>
html>3.动画的配置
-
开启动画
animation: true -
动画时长
animationDuration: 5000 //时长单位是ms -
缓动动画
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XKzJ3Cx9-1619513871551)(C:\Users\Diviner\AppData\Roaming\Typora\typora-user-images\image-20210427151243278.png)]
animationEasing：'linear'/'bounceOut'linear:线性变化，这样动画效果会很均匀bounceOut:回弹动画
-
动画阀值
animationThreshold: 8单种形式的元素数量大于这个阀值时会关闭动画
三、交互API
1.全局echarts对象
全局echarts对象是引入echarts.js文件之后就可以直接使用的
echarts.init初始化ECharts实例对象+使用主题
-
echarts.registerTheme注册主题，只有注册过的主题，才能在init方法中使用该主题 -
echarts.registerMap注册地图数据 $.get('json/map/china.json', function (chinaJson) {echarts.registerMap('china', chinaJson);}); geo组件使用地图数据 var option = {geo: {type: 'map',map: 'china',}, }) -
echarts.connect- 一个页面中可以有多个独立的图表
- 每一个图表对应一个
ECharts实例对象 connect可以实现多图关联，传入联动目标为EChart实例，支持数组
<html lang="en"> <head><script src="js/echarts.min.js">script><script src="js/jquery.min.js">script> head> <body><div style="width: 600px;height:400px;border:1px solid red">div><div style="width: 600px;height:400px;border:1px solid green" id="div1">div><script>var mCharts = echarts.init(document.querySelector("div"), 'itcast')var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]var option = {xAxis: {type: 'category',data: xDataArr},toolbox: {feature: {saveAsImage: {}}},yAxis: {type: 'value'},series: [{type: 'bar',data: yDataArr}]};mCharts.setOption(option)$.get('json/map/china.json', function (chinaJson) {echarts.registerMap('china', chinaJson)var mCharts2 = echarts.init(document.querySelector('#div1'));var option2 = {geo: {type: 'map',map: 'china'}}mCharts2.setOption(option2)echarts.connect([mCharts, mCharts2])})script> body> html>这样，由于我们打开了toolbox中的saveAslmage，所以会出现下载图片的按钮，而通过
echarts.connect([mCharts,mCharts2])，此时点击下载图片按钮，保存下来的图片就是两个图表的图片了。
2.echartsInstance对象
eChartsInstance对象是通过echarts.init方法调用之后得到的
-
echartsInstance.setOption设置或修改图表实例的配置项以及数据多次调用setOption方法实现合并新的配置和旧的配置，可以实现增量动画 -
echartsInstace.resize重新计算和绘制图表一般和window对象的resize事件结合使用
//监听Windows窗口大小变化的事件 window.onresize = function(){//调用echarts实例对象的resize方法myChart.resize() } 或者这样表示 window.onresize = mCharts.resize -
echartsInstance.on/echartsInstance.off绑定或者解绑事件处理函数
- 鼠标事件
常见事件: 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup' 等 事件参数 arg: 和事件相关的数据信息 mCharts.on('click', function (arg) {// console.log(arg)console.log('饼图被点击了') }) 解绑事件: mCharts.off('click') -
echartsInstance.dispatchAction主动触发某些行为，使用代码模拟用户的行为
// 触发高亮的行为 mCharts.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: 1 }) // 触发显示提示框的行为 mCharts.dispatchAction({type: "showTip",seriesIndex: 0,dataIndex: 3 }) -
echartsInstance.clear清空当前实例，会移除实例中所有的组件和图表
清空之后可以再次
setOption -
echartsInstance.dispose销毁实例
销毁后实例无法再被使用
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！