zoukankan      html  css  js  c++  java
  • "柱状图"组件:<chart-bar> —— 快应用组件库H-UI

    触摸反馈:

    <import name="chart-bar" src="../Common/ui/h-ui/chart/c_chart_bar"></import>
    <template>
        <div class="container-full">
            <chart-bar id="canvas1" data="{{data}}"></chart-bar>
        </div>
    </template>
    
    <style lang="less">
        @import '../Common/styles/container.less';
    </style>
    
    <script>
        export default {
            private: {
                data:[
                    {value:10, name:'Mon'},
                    {value:52, name:'Tue'},
                    {value:200, name:'Wed'},
                    {value:334, name:'Thu'},
                    {value:390, name:'Fri'},
                    {value:330, name:'Sat'},
                    {value:220, name:'Sun'}
                ]
            }
        }
    </script>
    

    <import name="chart-bar" src="../Common/ui/h-ui/chart/c_chart_bar"></import>
    <template>
        <div class="container-full">
            <chart-bar id="canvas2" data="{{data}}" hex-color="#ff0000"></chart-bar>
        </div>
    </template>
    
    <style lang="less">
        @import '../Common/styles/container.less';
    </style>
    
    <script>
        export default {
            private: {
                data:[
                    {value:10, name:'Mon'},
                    {value:52, name:'Tue'},
                    {value:200, name:'Wed'},
                    {value:334, name:'Thu'},
                    {value:390, name:'Fri'},
                    {value:330, name:'Sat'},
                    {value:220, name:'Sun'}
                ]
            }
        }
    </script>
    

    扫码体验

  • 相关阅读:
    Moya 浅析
    Swift: Alamofire -> http请求 & ObjectMapper -> 解析JSON
    ReactiveCocoa 用法实例
    RACSignal的Subscription深入
    idea 不能编译生成class文件
    idea 右下角不显示git分支
    SSO单点登录的研究
    JVM内存模型简介
    Spring事务处理
    RabbitMQ
  • 原文地址:https://www.cnblogs.com/cloud-dev/p/zhu-zhuang-tuzu-jianltchartbargt--kuai-ying-yong-z.html
Copyright © 2011-2022 走看看