2.官网也有的极简demo

在前一篇1.什么是echarts？中有说到，在官网下载到了echarts.min.js文件，在这里会有用到。
以前的自己总是看到想要的东西都要在各个地方搜刮一遍，年纪大了，终于知道自己想要的是什么，于是拒绝了很多的诱惑，现在看着网盘里满满的东西，充分理解自己逗傻不是被影响的，是本质。劝和我一样的童鞋们还是要有计划地比较好，毕竟老古话就说过，贪多嚼不烂……
因为懒，就不自己编什么数据了，直接拿了echarts原原本本的代码，自己在本地试了试。但这是有理由的，毕竟拿了别人的东西实现的荣光不会使自己骄傲自满！
请看代码，不要怀疑，就是这么简单：

<!DOCTYPE html>

<html>

<head>

  <title>simpledemo.html</title>

  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

  <meta http-equiv="description" content="this is my page">

  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  <script type="text/javascript" src="./js/echarts.min.js"></script>

</head>

<body>

  <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->

  <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例，如果调试代码可以发现，echarts在dom里使用了canvas技术在画图，如果怀着逗比的心情去看源码也可以发现canvas的身影（当然可以从搜索引擎或者官方介绍知道使用了canvas）。

    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据

    var option = {

    title: {

      text: 'ECharts 入门示例'

    },

    tooltip: {},

    legend: {

    data:['质量']

    },

    xAxis: {

    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

    },

    yAxis: {},

    series: [{

      name: '质量',

      type: 'bar',

      data: [5, 20, 36, 10, 10, 20]

    }]

  };

  // 使用刚指定的配置项和数据显示图表。

  myChart.setOption(option);

  </script>

</body>

</html>

结果如下图：

关于js语句中json的键值对对应图表中的含义就不说了，详情可以参考echarts的配置项手册。

2.官网也有的极简demo

推荐阅读更多精彩内容