将百度的ECharts整合到阿里的Weex中。

时间:2022-08-22 23:53:12

    由于公司的业务,之前PC版产品中,大量的使用了百度的ECharts库。所以现在要做移动端,在大概熟悉了Weex基本语法和搭建环境后,就着手研究如何将这两个好东西糅合起来。

    首先,按照Weex官方教程,搭建好基本开发环境后,要再次使用npm安装ECharts的依赖,这里告诉大家一个小技巧,可能有些朋友早已知道,但是我也相信有很多人跟我1个月前一样,对此并不了解,那就是,快速在一个目录中打开cmd。

    将百度的ECharts整合到阿里的Weex中。

在指定文件夹中,按住shift,再右键单击鼠标,就会出现如下选项,"在此处打开命令窗口"(不好意思,各种截图工具一用右键菜单就没了,用文字代替)。注意,现在空白地方左键点击一下,否则如果有选中文件的话,是出不来这个菜单的。

    接下来,使用npm命令安装ECharts.js库。我这里使用的是淘宝提供的镜像,cnpm。

将百度的ECharts整合到阿里的Weex中。

搭好基本环境之后,上代码:

 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: true
27 },
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图表。由于我也是刚开始学习,所以,欢迎大神前来拍砖,还有共同学习的朋友一起讨论。