echarts的基础使用、怎么用？

六月初六月初 Echarts 2019-02-21 18:50:32

echarts的基本使用！

步骤详解：

1、引入echarts.js。

2、设置具备高宽的 DOM 容器。

3、通过 echarts.init 方法初始化一个 echarts 实例

4、指定图表的配置项和数据

5、通过setOption 方法生成图标

完整代码示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.staticfile.org/echarts/4.2.0-rc.2/echarts.min.js"></script>
    </head>
    <body>
        <div id="test" style="height: 500px;width: 100%;"></div>
        <script>
            var BarBOX1 = echarts.init(document.getElementById("test"));
            option1 = {
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				yAxis: {
					type: 'value'
				},
				series: [{
					data: [820, 932, 901, 934, 1290, 1330, 1320],
					type: 'line'
				}]
			};
            BarBOX1.setOption(option1);
        </script>
    </body>
</html>

注：option1中的json数据，大家可以去echarts的官网复制过来替换即可！只是里面的数据换成自己的数据就完成了一个简单echarts的使用！

六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！