zoukankan      html  css  js  c++  java
  • 将百度的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: 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图表。由于我也是刚开始学习,所以,欢迎大神前来拍砖,还有共同学习的朋友一起讨论。

  • 相关阅读:
    JZ-C-01
    C/C++学习笔记
    15、排序:选择类排序和归并排序
    玩转Spring——Spring事务
    玩转Spring——Spring整合JDBC
    玩转Spring——Spring AOP
    玩转Spring——Spring IOC/DI
    Java算法——递归思想
    Java排序算法——堆排序
    Java排序算法——归并排序
  • 原文地址:https://www.cnblogs.com/tincyho/p/6542474.html
Copyright © 2011-2022 走看看