ECharts是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
从官网下载echarts库,其中一个是echarts.js。下面实例就是用了这个js。
试了一下官网提供的入门示例:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>echarts实例1</title>
<script src="echarts.js"></script>
</head>
<!--为echart准备一个定义了宽高的DOM!-->
<body>
<div id="main" style="width:650px;height:500px;"></div>
<script type="text/javascript">
//基于准备好的dom,初始化echarts实例
var myChart=echarts.init(document.getElementById('main'));
//制定图标的配置项和数据
var option ={
title:{
text:'echart入门实例'
},
tooltip:{},
legend:{
data:['销量']
},
xAxis:{
data:['电冰箱','洗衣机','空调','电饭锅','空气炸锅','高压锅']},
yAxis:{},
series:[
{
name:'销量',
type:'bar',
data:[500,200,300,1000,1000,300]
}
]
};
//使用上述自定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
官网网址:
https://echarts.apache.org/zh/index.html