zoukankan      html  css  js  c++  java
  • 使用HBuilder创建图表

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
    <body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- <div id="main" :style="{ '500px', height: '500px'}"></div> -->
     
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <!-- <script src="customed.js"></script> -->
    <script>
    // 基于准备好的dom,初始化echarts图表
    var dom=document.getElementById('main');
    var myChart = echarts.init(dom,'customed');
     
    var option = {
    tooltip: {
    show: true
    },
    legend: {
    data:['销量']
    },
    xAxis : [
    {
    type : 'category',
    data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    }
    ],
    yAxis : [
    {
    type : 'value'
    }
    ],
    series : [
    {
    "name":"销量",
    "type":"bar",
    "data":[5, 20, 40, 10, 10, 20]
    }
    ]
    };

    // 为echarts对象加载数据
    myChart.setOption(option);
    </script>
    </body>
    </html>

    本文仅提供参考,是本人闲时所写笔记,如有错误,还请赐教,作者:阿蒙不萌,大家可以随意转载

  • 相关阅读:
    头部尾部始终处于两端(适用于pc端和移动端)
    运用active和hover实现导航栏的页面切换
    POJ1423-阶乘的位数-Big Number
    大数阶乘
    n皇后
    4103:踩方格
    2815:城堡问题
    特殊回文数
    十六进制转十进制
    十六进制转八进制
  • 原文地址:https://www.cnblogs.com/huchong-bk/p/11383744.html
Copyright © 2011-2022 走看看