首页 > 代码库 > 将百度的ECharts整合到阿里的Weex中。
将百度的ECharts整合到阿里的Weex中。
由于公司的业务，之前PC版产品中，大量的使用了百度的ECharts库。所以现在要做移动端，在大概熟悉了Weex基本语法和搭建环境后，就着手研究如何将这两个好东西糅合起来。
首先，按照Weex官方教程，搭建好基本开发环境后，要再次使用npm安装ECharts的依赖，这里告诉大家一个小技巧，可能有些朋友早已知道，但是我也相信有很多人跟我1个月前一样，对此并不了解，那就是，快速在一个目录中打开cmd。
在指定文件夹中，按住shift，再右键单击鼠标，就会出现如下选项，"在此处打开命令窗口"（不好意思，各种截图工具一用右键菜单就没了，用文字代替）。注意，现在空白地方左键点击一下，否则如果有选中文件的话，是出不来这个菜单的。
接下来，使用npm命令安装ECharts.js库。我这里使用的是淘宝提供的镜像，cnpm。
搭好基本环境之后，上代码：
1 <template> 2 <div id="my_echarts" class="echart"></div> 3 </template> 4 5 <style> 6 .echart{ 7 height: 400px; 8 width: 700px; 9 }10 </style>11 12 <script>13 import echarts from ‘echarts‘14 export default {15 mounted: function(){16 this.$nextTick(function(){17 this.draw(‘my_echarts‘);18 })19 },20 methods: {21 draw: function(id){ 22 var myChart = echarts.init(document.getElementById(id)); 23 24 var option = {25 tooltip: {26 show: true27 },28 legend: {29 data:[‘销量‘]30 },31 xAxis : [32 {33 type : ‘category‘,34 data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","男装"]35 }36 ],37 yAxis : [38 {39 type : ‘value‘40 }41 ],42 series : [43 {44 "name":"销量",45 "type":"bar",46 "data":[5, 20, 40, 10, 10, 20, 100]47 }48 ]49 };50 51 // 为echarts对象加载数据 52 myChart.setOption(option);53 }54 }55 }56 </script>
至此，页面里可以正常显示ECharts图表。由于我也是刚开始学习，所以，欢迎大神前来拍砖，还有共同学习的朋友一起讨论。
将百度的ECharts整合到阿里的Weex中。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。