Vue中学会使用Echarts生成各种各样的图表,学习方法
发布网友
发布时间：2024-09-09 15:02
共1个回答
热心网友
时间：2024-11-19 03:10
直接进入主题...在vue中使用个啥，都差不多是一个流程。
引入Echarts安装
npminstallecharts--save我们写一个Echarts组件，在内进行引入
import*asechartsfrom'echarts'入门使用如果之前没有接触过Vue或者Echarts的小伙伴，了解方式无疑就是Echarts官方文档或各大搜索引擎了。
我的了解方式无疑也是这个，但是我在看官方文档的时候，觉得官方给的那个例子，有点点不符合Vue的风格，不过我先贴出来，实现最简单的入门：
<template><divid="ECharts"style="width:600px;height:600px"></div></template><script>import*asechartsfrom'echarts'exportdefault{mounted(){this.createEcharts();},methods:{createEcharts(){//基于准备好的dom，初始化echarts实例varmyChart=echarts.init(document.getElementById("echarts"));//绘制图表//最重要的就是理解各个配置的作用吧，这个没啥说的就算熟能生巧myChart.setOption({title:{text:"ECharts入门示例",},tooltip:{},xAxis:{data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],},yAxis:{},series:[{name:"销量",type:"bar",data:[5,20,36,10,10,20],},],});}}};</script>将这个组件，在app组件中进行引入即可，我们来看看初始效果是如何的。
问题1）从DOM操作改为ref不知道你们有没有发现问题所在：
官方文档中它是直接对于dom进行操作的document.getElementById("echarts")，这和Vue的理念其实是不一样的。
在vue中我们要做到尽可能减少直接对dom的操作，那么在这里我们可以如何改进勒？？
我们明确一下document.getElementById("echarts")获得的是什么即可了。这里无疑就是获得了节点信息，打印出来可以看到console.log(document.getElementById("echarts"));
那么我们就只要用vue的方式获取到这个节点信息即可，因此可以使用vue中的ref属性来实现。
<divid="echarts"ref="myEcharts"style="width:600px;height:600px"></div>console.log(this.$refs.myEcharts);我们输出来看一下好吧
和我们之前获取到的是一模一样的哈。
为了更符合Vue中的方式，我们再将这个案例改的更加灵活些：
<template><divref="myEcharts"style="width:600px;height:600px"></div></template><script>import*asechartsfrom'echarts'exportdefault{data(){return{myEcharts:null,option:{title:{text:'普通图表'},tooltip:{},xAxis:{data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis:{},series:[{name:'销量',type:'bar',data:[5,20,36,10,10,20]}]}}},methods:{initChart(){this.myEcharts=echarts.init(this.$refs.myEcharts);this.myEcharts.setOption(this.option);}},mounted(){this.initChart()}}</script>这样子才像vue中的写法哈。
2）优化思路1、如果我们在项目中要用到多种样式的图，那么直接引入也不是不可以的，但是如果仅仅只是使用了折线图或者柱状图这种，那么还是建议大家采用按需引入的方式，那样项目打包体积会更小一点。
官方文档介绍的按需引入
2、另外就是我们可以将echarts封装成组件，这样是最佳的方式吧，将一切都动态化。
个人小小见解，仅考虑优化使用方式，并非是性能上的。如有不足，请及时指出，非常感谢。
这是最简单的柱状图哈，知道大家的需求都是不一样的，下面讲讲该如何学习。
多种多样的图表在官方文档中，有非常非常多的案例，就算我们什么都不会，cv大法一出，也是可以轻松用起来的哈。
官方示例
并且点进每个图表都是有核心代码的。
所谓的核心代码就是option中的各种配置项。关于每一项配置项官方也给了详细介绍。
数据的那一栏就是data，其他的都是配置项，不过如何渲染还是看大伙们的业务是啥。
点顶部菜单中的文档那一栏，就有一个配置项手册
最常用的几个配置项应该下图中这个了吧，俗称的九大配置项。
如果想要快速理解的话，建议直接点击一个复杂点的官方示例图中，然后拿着配置手册查一查，理解很快的，我认为这种方式应该是最简单的啦吧。
授人以鱼，不如授之以渔因为不同的业务，可能会产生不一样的需求，所以更多的我们是需要学会如何去学习。
用Echarts可以画那么多种图，我不可能每个都作出一个小Demo给大家，而且大家的数据都不一样，也就抄不了作业吗，所以我们干脆聊聊如何去学会玩这种玩意。
看官方文档在我认为永远是了解它的最快方式。（也许大家会说为啥不是看各种博客，或者直接百度、Google）
原因有以下两点：
版本原因，你搜索到的博客使用的不一定是最新的版本，技术的迭代在现在真的是非常快的。
其次博客内容真的很少有像官方文档那种写的十分完备的，另外在写的过程中，大多数作者（包括我自己）更多的是会贴出自己认为十分核心的东西，对于一些非常细的东西，十分有可能会被忽略掉。
动手尝试
看完文档，不应该立即应用到现用的项目，最佳的方式应该是写上个demo，看看效果如何（个人想法）
纸上得来终觉浅，绝知此事要躬行。
