序言：博客还是要继续写的。。。
一、ECharts 介绍
ECharts 是一个使用 JavaScript 实现的开源可视化图表库，涵盖各种图表。我们这里就只介绍Echarts常规使用。
二、ECharts 使用
1、官网下载Echarts
http://echarts.baidu.com/download.html
2、引入Echarts
<script src="js/echarts.min.js"></script>
3、准备容器
<div id="echartBar" style="width: 660px;height:400px;" ></div>
4、初始化Echarts实例，指定配置项和数据
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var echartBar = echarts.init(document.getElementById('echartBar'));
// 指定图表的配置项和数据
var optionBar = {
title: {
text: '第一个 ECharts 实例'
},
tooltip: {},
legend: {
data:['销量']
},
//设置X轴
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
//设置Y轴
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [6, 22, 32, 11, 36, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
echartBar.setOption(optionBar);
</script>
这样简单的柱状图就实现了
三、ECharts 配置项
配置项常用属性介绍
1、title：标题
- x: ‘left’ ：水平安放位置，默认为左对齐，可选为： ‘center’ ¦ ‘left’ ¦ ‘right’ ¦{number}（x坐标，单位px）
- y: ‘top’：垂直安放位置，默认为全图顶端，可选为： ‘top’ ¦ ‘bottom’ ¦ ‘center’ ¦{number}（y坐标，单位px）
- text:‘xxx’：标题内容
- textStyle: {
fontSize: 18, // 主标题字体大小
color: ‘#333’ // 主标题文字颜色
},
2、tooltip：提示框
- trigger: ‘item’ ：触发类型，默认数据触发，可选为：‘item’（该点的数据） ¦ ‘axis’（该列下所有坐标轴的数据）
- showDelay: 20 ：显示延迟，添加显示延迟可以避免频繁切换，单位ms
- hideDelay: 100 ： 隐藏延迟，单位ms
- transitionDuration : 0.4 ：动画变换时间，单位s
3、legend：图例
- orient: ‘horizontal’： 布局方式，默认为水平布局，可选为：‘horizontal’ ¦’vertical’
- x: ‘center’：水平安放位置，默认为全图居中，可选为： ‘center’ ¦ ‘left’ ¦ 'right’¦ {number}（x坐标，单位px）
- y: ‘top’： 垂直安放位置，默认为全图顶端，可选为：‘top’ ¦ ‘bottom’ ¦ ‘center’ ¦ {number}（y坐标，单位px）
- padding:5 ：图例内边距。单位px，默认各方向内边距为5，接受数组分别设定[(上),(右),(下),(左)]边距
- itemGap: 10：各个item之间的间隔，单位px，默认为10，
- itemWidth: 20：图例图形宽度
- itemHeight: 14： 图例图形高度
4、xAxis：柱状/折线-X轴
- data: [“衬衫”,“羊毛衫”]：配置要在 X 轴显示的项
5、series：系列列表
- name: “销量”：系列名称
- data：[5,20]：系列中的数据内容
- type: ‘bar’：系列图表类型
- itemStyle:{}: 设置区域样式，可配置来直观显示区域标签数值
6、series下的type：系列图表类型
- :type: ‘bar’：柱状/条形图 :
- type: ‘line’：折线/面积图
- type: ‘pie’：饼图
- type:‘radar’：雷达图
- type: ‘tree’：树型图
- type: ‘map’：地图
- type: …
四、ECharts 饼图
1、准备容器
<div id="echartPie" style="width: 600px;height:400px;"></div>
2、初始化Echarts实例
var echartPie = echarts.init(document.getElementById('echartPie'));
3、指定图表的配置项和数据
var optionPie = {
title: {
text: '第二个 ECharts 实例',
x:'center',
},
tooltip: {}, //提示框
legend: { //图例
orient:"vertical", //图列列表垂直显示
x: "left", // 水平方向上左侧，其他可选'center' |'right' | {number},
y: "top", // 垂直方向上顶部，其他可选 'bottom' ¦ 'center' ¦ {number}
padding:[40,0,0,0], //接受设定距离[(上),(右),(下),(左)]边距
data:['视频广告','联盟广告','邮件营销','直接访问','搜索引擎'] //图例列表
},
series : [ //系列列表
{
name: '访问来源',
type: 'pie', // 设置图表类型为饼图
radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
data:[ // 数据数组，name 为数据项名称，value 为数据项值
{value:233, name:'视频广告'},
{value:270, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:322, name:'直接访问'},
{value:420, name:'搜索引擎'},
],
itemStyle:{ //设置饼图扇形区域样式
normal:{
label:{
show: true, //标签显示
formatter: '{b} : {c} ({d}%)', //标签显示格式
},
labelLine :{show:true} //扇形-标签的线显示
}
}
}
]
};
4、使用刚指定的配置项和数据显示图表
echartPie.setOption(optionPie);
这样饼图就实现了
本文介绍Echarts的基础使用->>代码地址，请大家多多指教，能get到知识点不要忘了关注点个赞~