zoukankan      html  css  js  c++  java
  • echarts怎么使用(最最最最简单版)(本质canvas)

    echarts怎么使用(最最最最简单版)(本质canvas)

    一、总结

    一句话总结:外部扩展插件肯定要写js啊,不然数据怎么进去,不然宽高怎么设置。本质都是canvas嵌套在页面上,比如div中。

    1、echarts怎么使用?

    引入js,指定控件,编写js

    2、怎么让外部插件变得非常容易?

    页面源代码和官方教程

    二、echarts怎么使用(最最最最简单版)

     三、自己测试(这么简单的吗,看百度教程)

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>测试百度Charts</title>
     6     <script src="echarts.js"></script>
     7 </head>
     8 <body>
     9     <div id="main" style="height: 600px; 600px;"></div>
    10     <div id="chart2" style="height: 600px; 600px;"></div>
    11     <script type="text/javascript">
    12         // 基于准备好的dom,初始化echarts实例
    13         var myChart = echarts.init(document.getElementById('main'));
    14 
    15         // 指定图表的配置项和数据
    16         var option = {
    17             title: {
    18                 text: 'ECharts 入门示例'
    19             },
    20             tooltip: {},
    21             legend: {
    22                 data:['销量']
    23             },
    24             xAxis: {
    25                 data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    26             },
    27             yAxis: {},
    28             series: [{
    29                 name: '销量',
    30                 type: 'bar',
    31                 data: [5, 20, 36, 10, 10, 20]
    32             }]
    33         };
    34 
    35         // 使用刚指定的配置项和数据显示图表。
    36         myChart.setOption(option);
    37     </script>
    38 </body>
    39 </html>

    四、测试字符云(页面源代码和官方教程)

    查看演示页面源代码,你还能有什么不懂的

    教程非常详细

     
     
  • 相关阅读:
    Linux下目录的权限详解
    Linux下mknod详解
    迅雷精简版-无广告
    PotPlayer一款简洁好用的播放器
    Linux 信号signal处理机制
    Kruskal算法求最小生成树
    Prim算法求权数和,POJ(1258)
    Prim算法求最大权,POJ(2485)
    Prim算法
    DP找最优配置,(POJ1018)
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9203244.html
Copyright © 2011-2022 走看看