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的使用!
六月初字帖坊小程序
你想要的字帖模板及工具,这里都有!
877篇文章
2134人已阅读