前端图表框架(前端图表框架echarts)

　　前端图表框架

在web开发项目过程中，经常会有需求绘制图标的状况，简单的图表能够用canvas来绘制，可是遇到复杂的图标canvas无法满足其功用，遇到这种状况怎样办呢？别着急，今日为咱们引荐一款前端大佬都备受喜爱的图标插件-前端图表结构echarts。
1.ECharts特性简介
ECharts是一个运用JavaScript实现的开源可视化库，啥叫开源呢，通俗点说，便是免费！小伙伴们能够大胆放心的运用，可视化东西呢，便是将一系列的数据，转化成非常直观的图表，来供咱们检查，ECharts可谓是制造图表的良心之选，并且能够流通的运行在PC和移动设备上，兼容当时绝大部分浏览器(IE8/9/10/11，Chrome，Firefox，Safari等)，所以，基本彻底不用担心兼容性的问题，底层依靠轻量级的矢量图形库ZRender、供给直观、交互丰厚、可高度个性化定制的数据可视化图表。
ECharts供给了惯例的折线图、柱状图、散点图、饼图、K线图，用于计算的盒形图，用于地舆数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于BI的漏斗图，仪表盘，并且支持图与图之间的混搭。
2.ECharts的下载
在运用ECharts之前呢，咱们需求先去官网下载最新版其他ECharts的依靠包，引荐咱们下载源代码，由于源代码里边包含了一切图表组件以及常见的正告和过错。假如你觉得源代码文件太大，并且项目中用到的图表功用很简单的话呢，那就运用精简版的好啦。
3.ECharts在一般项目中的运用
下面重点来啦，预备和小编一同完成图表代码的实现啊。
首要呢，给咱们讲一下ECharts图表在一般项目中的运用，后边还会讲到如安在vue项目里边运用，其他的开源结构里边如何运用小编就不逐个讲解了。
第一步
老规矩，首要将下载好的ECharts.js放在项目的js文件夹下面，之后呢，在需求用到的页面，引进，然后就能够开端写代码了。
第二步
预备好一个dom元素，当然啦，需求给该dom元素一个id，便利咱们去找到它，并且，还要给这个元素一个宽高，作为表格的视口，至于宽高给多少呢，咱们自行设置。
第三步
开端写js代码啦，js代码有三个过程：
FIRST
初始化ECharts实例：
SECOND
指定图表的装备项和数据：
THIRD
运用刚指定的装备项和数据显示图表：
在浏览器翻开代码，得到了一个带动画效果的柱状图。
当然，不只是只有柱状图，还有各种其他的图表，怎样运用呢，首要点击实例，咱们就来到了这个页面
看上哪个图表了吗？不要犹疑啦，点击进去，咱们就来到了如下页面：
然后复制左边的option代码，替换掉之前的第二步里边的option就能够啊，第一步和第三步是通用的，不需求修正；
图表里边的数据也是能够自定义的，比如想渲染经过ajax请求过来的数据的话，直接在ajax的回调函数里边直接给option赋值或许修正就能够啦；
那么，关于ECharts图表在一般项目中的运用就讲到这儿啦，下面就给咱们演示一下如安在vue-cli3.0里边的应用。
4.ECharts在vue-cli3.3.0中的运用
ECharts不止是在vue-cli3.3.0项目中能够运用，在其他版其他vue里边相同能够运用，由于vue-cli现已更新到了3.3.0，所以咱们今日用这个版别作为例子来给咱们演示。
第一步
第一步呢，肯定是要先建立vue-cli的项目啦，首要你需求有node的运行环境，这儿我就默认咱们都有啦。首要呢装置vue-cli的大局环境npminstall-g@vue/cli，装好之后呢，尝试输入指令vue–version，假如呈现了3.3.0字样，就阐明装置成功啦，假如报错vue不是内部指令的话呢，便是装置失利了，那就有可能是你没有装node环境，或许node版别过低哦，vue-cli需求node8.9或更高版别(引荐8.11.0+)，这时候你就需求装一个更高版其他node啦，vue-cli环境建立好之后呢，就开端创立vue的项目啦。也很简单，新建一个文件夹，然后输入指令vuecreatehello-world，就能够创立好一个vue的初始化项目啦。项目初始化之后呢，装置ECharts依靠包npminstallECharts-S，就能够开端写代码啦。
第二步
在main.js里边导入ECharts依靠包，再将ECharts实例化函数设为vue的原型函数，便于大局访问，代码如下图：
第三步
然后在HelloWorld.vue的template里边增加标签
;
script里边代码如下：
当然也有其他不同的写法，可是我觉得，这是我研究了很久出来的一套比较合理的写法，数据option放在data里边，初始化图表的drawCharts办法放在methods里边，然后呢办法为什么要在mounted生命周期函数里边调用呢？直接在methods里边调用不可吗？是不可的，由于咱们在初始化的时候操作了dom元素，而mounted声明周期函数是在页面中的dom元素加载结束之后才执行的而函数，所以在mounted里边调用drawCharts办法就不会呈现找不到dom元素的状况啦，vue里边是拒绝操作dom元素的，可是呢，这个插件没有办法，必须选中dom元素初始化才能够，所以这儿是一点小瑕疵，期望ECharts团队能够愈加的优化一下。最终呢，咱们npmrunserve一哈，这样图表出来啦~
以上内容是针对前端图表结构echarts的详解，上文对运用该插件的操作过程、注意事项进行了详细介绍，期望对咱们有所协助。

前端图表框架echarts

记载：在工作过程中，记载一个需求，需求完成图表方式。其实图表方式完成起来不难，但是因为自己之前没有详细了解过图表完成，所以这边进行一下自己的记载总结。这边是使用了echarts的图表库，关于echarts进行了相关学习，并查看了项目中完成的代码。后边的话，附上一个自己的完成成果（一定要动手操作！！眼睛会了并不代表手会了）
1.首要引进echarts插件（可经过npm引进）
npminstallecharts–save
2.获取当时的dom节点，然后在该节点上制作图表
示例中一般使用html方式，可以经过document.getElementById()方式拿到dom
import*asechartsfrom’echarts’;//根据准备好的dom，初始化echarts实例varmyChart=echarts.init(document.getElementById(‘main’));//制作图表myChart.setOption({
…………..
});
因为我们项目中是使用react框架，这边是经过ref引证拿取dom
importReact,{Fragment,useRef,useEffect}from’react’import*asechartsfrom’echarts’;
exportdefaultfunctionEcharts(){
constwrapperRef=useRef(null)
useEffect(()=>{//根据准备好的dom，初始化echarts实例constmyChart=echarts.init(wrapperRef.current)//制作图表myChart.setOption({
title:{
text:’ECharts入门示例’},
tooltip:{},
xAxis:{
data:[‘衬衫’,’羊毛衫’,’雪纺衫’,’裤子’,’高跟鞋’,’袜子’]
},
yAxis:{},
series:[
{
name:’销量’,
type:’bar’,
data:[5,20,36,10,10,20]
}
]
});
},[])return(
)
}
写下这段代码后，完成的作用便是官网实例图如下：
办理后台也完成了折线图的方式，我这边自己完成看一下。后台完成的作用如下
后台的返回数据方式：
data：{
countdata:{2022-04-01:”0″
2022-04-02:”0″
2022-04-03:”0″………….2022-04-30:”0″}
}
这边对数据进行处理，转化成需求完成的图表方式：
myChart.setOption({
title:{
text:’ECharts入门示例’},
tooltip:{},
xAxis:{
type:’category’,//xAxis.type是category类目轴，适用于离散的类目数据。//xAxis.type=’value’数值轴，适用于连续数据。//data:[1,2,3,4,5,6]//data:[‘2022-04-01′,’2022-04-02′,’2022-04-03′,’2022-04-04′,’2022-04-05′,’2022-04-06′]},
yAxis:{//type:’value’},
series:[
{
name:’销量’,
type:’line’,//设置成折线图data:[//数据转化成笛卡尔坐标系的方式进行展现[‘2022-04-01’,0],
[‘2022-04-02’,2],
[‘2022-04-03’,11],
[‘2022-04-04’,2],
[‘2022-04-05’,0],
[‘2022-04-06’,21]
]
}
]
});
此时完成的作用如下：
ps:这边也来浅写一下关于数据处理的函数吧,其实便是关于数组的处理
functionhandleData(obj){
constresultArr=[]for(letiteminobj){
letinitArr=[]
initArr.push(item,obj[item])
resultArr.push(initArr)
}returnresultArr
}
before:{
‘2022-04-01’:10
}
after:[//转化成笛卡尔坐标系需求的方式
[‘2022-04-01′,10]
]
这边还有一些细节没有完成：
1.坐标轴顶端的文字标识
2.横轴上的需求是点显现，而不是块显现
3.当移入某点该列时，需求线性标识
下面完成了作用，并关于代码进行相关注释
//制作图表myChart.setOption({
title:{
text:’ECharts入门示例’},
tooltip:{
trigger:’axis’//触发类型：默认是item点触发，这边更改为坐标轴x轴触发},
xAxis:{
type:’category’,
name:’日期’,//坐标轴称号axisTick:{//刻度length:6,
lineStyle:{
type:’dashed’//…}
},
axisLabel:{//下面的x轴每个点的标识转化视点rotate:45},
boundaryGap:false//不与坐标轴中间对应，与刻度对应},
yAxis:{
name:’订单量’,
axisLine:{//显现y轴坐标轴show:true,
type:’solid’}//type:’value’},
series:[
{
name:’销量’,
type:’line’,
data:[
[‘2022-04-01’,0],
[‘2022-04-02’,2],
[‘2022-04-03’,11],
[‘2022-04-04’,2],
[‘2022-04-05’,0],
[‘2022-04-06’,21]
]
}
]
});