echarts是一个使用JavaScript实现的开源可视化图表库，底层依赖于轻量级的canvas类库zrender
1.通过官网https://www.echartsjs.com/zh/index.html获取官方源码包或者在webpack使用npm install echarts --save安装
2.下载echarts后，通过script引入echarts文件
3.准备一个具有宽高的dom容器 <div id="main" style="width: 500px;height: 300px;"><div>
4.通过echarts.init方法初始化一个echarts实例，通过setOption来生成需要的图形
5.option对象指定图表的配置项和数据，我们可以通过https://www.echartsjs.com/examples/zh/index.html来选择你所需要的图表类型，然后通过https://www.echartsjs.com/zh/option.html#title来设置图表的信息
echarts完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为echarts准备一个具备大小（宽高）的dom -->
<div id="main" style="width: 500px;height:300px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'echarts 新手上路'
},
tooltip: {},
legend: {
data:['温度']
},
xAxis: {
data: ["8时","10时","12时","14时","16时","18时"]
},
yAxis: {},
series: [{
name: '温度',
type: 'bar',
data: [10, 15, 20, 27, 24, 16]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>效果图：
908
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
