ECharts引入
新建一个html文件,准备好网页的基本内容,然后像引入JQuery呢样引入ECharts,可以下载到本地引入,也可使用CDN,不用下载直接引入。鳄鱼君这里使用CDN: https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js,直接引入,目前最新版本为4.8.0.直接引用
<script type="text/javascript" src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>
ECharts使用
首先需要创建一个白色的画板,在HTML中写一个div并设置id,具体代码如下:
<div id="main" style="width: 600px;height: 400px;@media(max-width:600px){width:48%}"></div>
<script type="text/javascript" src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>
<script type="text/javascript">
var myChart=echarts.init(document.getElementById('main')); // 获取画板并进行初始化
var options={
title:{
text:'ECharts4.8.0入门实列' //标题
},
tooltip:{}, //提示框
legend:{
data:['销量'] //图列
},
xAxis:{ //x轴
data:['苹果','香蕉','橘子','雪梨','凤梨','葡萄']
},
yAxis:{}, //y轴
series:[{ //数据
name:'销量',
type:'bar',
data:[2,34,32,14,23,15]
}]
};
myChart.setOption(options);
</script>
更换主题
ECharts还提供了其他配色方案供选择:http://echarts.baidu.com/download-theme.html,选择喜欢的主题并下载,之后将得到的JS文件引入,初始化的时候指定主题的名称即可var myChart = echarts.init(document.getElementById('main','vintage')) // vintage为主题名字
配置项目手册
ECharts最大的好处便是语法高度统一,任何ECharts图形都遵循以上步骤进行绘制,唯一的不同只是option的设置。配置项目手册:https://echarts.apache.org/zh/option.html#title,非常的详细,每个示例页面左边为使用到的全部代码,主要包括用到的数据和option的具体设置,右边对应生成的图形效果,并且支持在线修改代码和调试图形。
- · title:图形的标题。
- · legend:图形的图例。
- · grid:图形的绘图范围。
- · xAxis:图形的x轴,支持同时使用多个x轴,可以是数值、类别值、时间等。
- · yAxis:图形的y轴,支持同时使用多个y轴,可以是数值、类别值、时间等。
- · polar:使用极坐标时的配置项。
- · radar:绘制雷达图时的配置项。
- · dataZoom:展示时序数据时的时间范围选择工具。
- · visualMap:使用视觉映射时的配置项,就像ggplot2将数据映射到颜色等视觉元素上一样。
- · tooltip:当鼠标悬浮在图形上时显示的信息提示框。
- · toolbox:ECharts提供的图形编辑工具箱。
- · geo:绘制地图时的配置项,定义如何显示地图的范围和样式等。
- · parallel:绘制平行坐标时的配置项。
- · timeline:定时在多个option之间切换,从而实现动态更新数据的效果。
- · color:绘图颜色集合。
- · backgroundColor:绘图区的背景颜色。
- · textStyle:绘图的文本样式。
- · series:图形所用的数据系列,其中的type配置项可以指定图形种类,可以是line、bar、pie、scatter、effectScatter、radar、treemap、boxplot、candlestick、heatmap、map、parallel、lines、graph、sankey、funnel、gauge、pictorialBar和themeRiver。
声明:1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!