Echarts的引入使用-拓冰建站

ECharts文档

1.下载并引入Echarts

2.准备一个具备大小的DOM容器

3.初始化echarts实例对象

4.指定配置项和数据(option)

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

最后是一个js文件

echarts的引入

1.引入echarts - js 文件

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

2.创建一个div容器设置宽高

  <body><div class="box"></div></body><style>.box {width: 500px;height: 500px;border: 1px solid #000;}</style>

3.将官网中的例子数据抄过来

2分钟引入Echarts

从这个网站引入数据

使用echarts的时候，需要初始化echarts对象，使用echarts.init()方法。

然后定义数据使用实例化对象.setOption("数据")方法构建表格。

 <script>/* 初始化echarts对象  echarts.init(dom容器);*/var mychart = echarts.init(document.querySelector(".box"));// 定义配置项和数据var options = {title: {text: "ECharts 入门示例",},tooltip: {},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],},yAxis: {},series: [{name: "销量",type: "bar",data: [5, 20, 36, 10, 10, 20],},],};//配置项给实例对象mychart.setOption(options);</script>

一个最标准的echarts柱状图就出来了。