1. 1.下载并引入echarts
  2. 2.准备一个具备大小的DOM容器(必须有宽高)
  3. 3.实例化echarts实例对象
  4. 4.指定配置项和数据(option)
  5. 5.将配置项设置给echarts实例对象

下载并引入echarts

  1. <script src="js/echarts.min.js"></script>

准备一个具备大小的DOM容器(必须有宽高)

  1. <div class="box"></div>
  2. .box{
  3. width: 400px;
  4. height: 300px;
  5. background-color: pink;
  6. }

实例化echarts实例对象

  1. var myChart = echarts.init(document.querySelector(".box"));

指定配置项和数据(option)

  1. var option = {
  2. title: {
  3. text: 'ECharts 入门示例'
  4. },
  5. tooltip: {},
  6. legend: {
  7. data:['销量']
  8. },
  9. xAxis: {
  10. data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  11. },
  12. yAxis: {},
  13. series: [{
  14. name: '销量',
  15. type: 'bar',
  16. data: [5, 20, 36, 10, 10, 20]
  17. }]
  18. };

将配置项设置给echarts实例对象

  1. 将配置项设置给echarts实例对象
  2. myChart.setOption(option);