文章目录
一、echarts是什么？
echarts是一种做数据可视化的图表库包含柱状图、折线图、地图等等很多模块，由于全部由js编写，所以其自由度非常高，适合有编程基础的人学习
二、使用步骤
1.选择需要的模块下载echarts.js
2.引入echarts.js
代码如下（示例）：
<script type="text/javascript" src="你存放的路径"></script>
3.建立存放图表的容器，宽高随意
代码如下（示例）：
<div id="main" style="height:600px"></div>
4 . 初始化echarts实例
代码如下（示例）：
<script>
var myChart = echarts.init(document.getElementById('main'));
</script>
5 . 指定图表的样式、数据等等
代码如下（示例）：
<script>
var option = {
//图表的标题
title: {
text: 'test'
},
//X轴上的数据
xAxis: {
data: ["温度传感器","光照传感器","压力传感器","加速度传感器"]
},
yAxis: {},
//配置项
series: [{
name: '销量',
//指定图表的类型 柱状图、散点图、等等
type: 'bar',
//对应X轴上的数据
data: [10, 9, 8,7]
}]
};
</script>
6. 将刚才配置的东西渲染到容器里。
代码如下（示例）：
<script>
myChart.setOption(option);
</script>
7. 这样你的第一个柱状图就做好了。
附上全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="echarts.js存放的路径"></script>
</head>
<body>
<div id="main" style="height:600px"></div>
</body>
<script>
var myChart;
myChart = echarts.init(document.getElementById('main'));
var option = {
//图表的标题
title: {
text: 'test'
},
//X轴上的数据
xAxis: {
data: ["温度传感器","光照传感器","压力传感器","加速度传感器"]
},
yAxis: {},
//配置项
series: [{
name: '销量',
//指定图表的类型 柱状图、散点图、等等
type: 'bar',
//对应X轴上的数据
data: [10, 9, 8,7]
}]
};
myChart.setOption(option);
</script>
</html>
1032
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
