这几天刚好用到了echarts,不过项目使用的前端框架非常老了,由此可见echarts兼容性还是hin好的,以后的项目中可能也会遇到很多,准备由浅至深的学习一下echarts,今天先从最基础的开始记录吧~
什么是echarts?
Echarts是一款由百度前端技术部开发的,基于Javascript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。
echarts的初次使用
初次使用echarts,要引入echarts.js文件
<script src="echarts.js"></script>
初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
echarts的示例
指定图表的配置项和数据,即设置option
var option = { title: { //
text: '某站点用户访问来源'
},
tooltip: {},
legend: {
//orient: 'vertical',
//left: 'left',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
xAxis: {
data: [ { value: '直接访问' },
{ value: '邮件营销' },
{ value: '联盟广告' },
{ value: '视频广告' },
{ value: '搜索引擎' }
]},
yAxis: {},
series: [
{
name: '访问来源',
type: 'bar',
data:[5,20,36,30,10]
}
]
};
echarts参数