echarts使用心得
1.下载echarts文件
echarts是百度的一个的开源js库，主要用来绘制图表，常见有柱状图、饼图、线图、仪表盘等等，具体的可以参考官方网站的实例。
下载地址:http://echarts.baidu.com/download.html
备注：具体下载哪一个版本，可以酌情参考，使用过程中建议配合jquery插件使用。
2.引入echarts.js文件
<script type="text/javascript" src="echarts.js"></script>备注:在引入文件的时候，不起作用情况下注意查看一下引入的路径对不对（每个项目的路径都不一样，所以要注意配置）。
3.使用方式
<html>
<head>
<script type="text/javascript" src="echarts.js"></script>
<script>
//echarts对象
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
//页面加载
window.onload=function(){
var e = document.getElementById("example");
//echarts的函数必须,不可更改.
var echart = echarts.init(e);
//加载echarts的对象
echart.setOption(option);
}
</script>
</head>
<body>
<div id="example" style="width:200px;height:200px;"></div>
</body>
</html>注意点:
1.先在html页面初始化一个div,并且必须有大小,否则没有办法展示
2.echarts提供的对象(实例中的option),每个属性代表的意思可以去官网-文档-配置项中查找每个项代表的意思,以及可以设置的值
3.官网的实例中,可以查询各种图标的实例,有实际的代码,只要在上面改改就可以离开拿来使用,官网-实例-官方实例
4.在实际使用中所有的数据不是像事例中那样写死的,都是从服务器发送请求查询出来的,所以正常都是echarts配合$.ajax使用,动态获取数据.
5.echarts的对象可以理解为一个json对象,所以设置属性的值的是,只要参考例子中的值是什么类型,然后给对象赋值就可以了.
option.xAxis.data = ajax返回的数组;
//赋值完,再重新setoption才可以生效
echart.setOption(option);6.难点主要在echarts对象的属性太多,根本不知道需求的效果,应该怎么设置
建议多看配置项文档,然后在实例中手动测试.
7.新手参考:https://www.hcharts.cn/docs/basic-compose
这个是hightcharts的介绍,一些配置项图文配合介绍更直观一点,入手更快.
初次写博客,有什么问题可以留言,我也是小白………
扫一扫
1338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
