初识 echarts
ECharts，一个纯 Javascript 的数据可视化图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender。
提供的图表类型
提供了常规的折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
上面呢都是一些简单的介绍，如果想了解更多内容请移步官网：http://echarts.baidu.com/index.html 现在正式开始我们的工作，首先呢需要获取echarts这个库，关于获取的方式的有好几种，可以通过github、npm了这些都可以引入，如果不想下载echarts文件呢，就通过cdn引入就行了，我为了方便就直接cdn引入了，cdn引入可以到国内的 bootcdn 上找到 ECharts 的最新版本。 我们新建一个文件命名为echarts.html,然后直接引入在bootcdn上找到的echarts库并创建一个存放图表的容器div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引入 ECharts 文件 -->
<script src="//cdn.bootcss.com/echarts/3.3.1/echarts.min.js"></script>
</head>
<body>
<!-- 创建 echarts 图表存放的容器 -->
<div id="echarts" style="height:240px;"></div>
</body>
</html>
接下来一段JS就是echarts的配置和数据， 其中的配置项我们稍后说明
<script type="text/javascript">
// 获取存放图表容器的id，初始化echarts实例
var myChart = echarts.init(document.getElementById('echarts')); // 指定图表的配置项和数据
var option = {
title: {
text: '考试成绩',
left: 'center',
bottom: 10
},
color: ['#2ec7c9'],
tooltip: {},
legend: {
data:['科目']
},
xAxis: {
data: ["语文","数学","英语","物理","化学"]
},
yAxis: {},
series: [{
name: '科目',
type: 'bar',
data: [88, 76,92, 68, 72]
}]
}; // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
完整代码可以点击查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引入 ECharts 文件 -->
<script src="//cdn.bootcss.com/echarts/3.3.1/echarts.min.js"></script>
</head>
<body>
<!-- 创建 echarts 图表存放的容器 -->
<div id="echarts" style="height:240px;"></div>
<script type="text/javascript">
// 获取存放图表容器的id，初始化echarts实例
var myChart = echarts.init(document.getElementById('echarts')); // 指定图表的配置项和数据
var option = {
title: {
text: '考试成绩',
left: 'center',
bottom: 10
},
color: ['#2ec7c9'],
tooltip: {},
legend: {
data:['科目']
},
xAxis: {
data: ["语文","数学","英语","物理","化学"]
},
yAxis: {},
series: [{
name: '科目',
type: 'bar',
data: [88, 76,92, 68, 72]
}]
}; // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html> 完整代码
完整代码
接下来就是见证奇迹的时刻，在浏览器打开就会出现一个漂亮的数据图形界面
以上代码配置的说明, 如下图所示, 你可以狠狠的点击下图, 它会让你看的更加清晰。。。
title: { //标题组件，包含主标题和副标题。
show: true, //是否显示标题组件,默认显示
text: '标题文字', //主标题文本，支持使用 \n 换行。
link: 'https://www.baidu.com/', //主标题链接,(.com后面记得添加 / )
target: 'blank | self', //指定窗口打开主标题超链接，默认blank新窗口打开，self当前窗口打开
textStyle: { //主标题文字样式的配置
color: '#333', //主标题文字颜色
fontStyle: 'normal(标准) | italic(斜体) | oblique(倾斜)', //主标题文字字体的风格
fontWeight: 'normal | bold | bolder | lighter | 100(数字)', //主标题文字字体的粗细
fontFamily: 'sans-serif', //主标题文字的字体系列
fontSize: 18 //主标题文字的字体大小 },
textAlign: 'left | center | right', //标题文本水平对齐
textBaseline: 'top | middle |bottom', //标题文本垂直对齐
subtext: '副标题文本', //副标题文本，支持使用 \n 换行
sublink: 'https://www.baidu.com/', //副标题链接,(.com后面记得添加 / )
subtarget: 'blank | self', //指定窗口打开副标题超链接，默认blank新窗口打开，self当前窗口打开
subtextStyle: { //副标题文字样式的配置
color: '#aaa', //副标题文字颜色
fontStyle: 'normal(标准) | italic(斜体) | oblique(倾斜)', //副标题文字字体的风格
fontWeight: 'normal | bold | bolder | lighter | 100(数字)', //副标题文字字体的粗细
fontFamily: 'sans-serif', //副标题文字的字体系列
fontSize: 12 //副标题文字的字体大小 },
padding: 5, //标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
itemGap: 10, //主副标题之间的间距
zlevel: 0, //用于 Canvas 分层,相当于psd图层,值大的会放在值小的上面,会创建新的 Canvas
z: 2, //控制图形的前后顺序。z值小的图形会被z值大的图形覆盖,不会创建新的 Canvas
left: 'auto', //grid 组件离容器左侧的距离,值可以是具体数字也可以是'left | center | right'
top: 'auto', //grid 组件离容器上侧的距离,值可以是具体数字也可以是'top | middle | bottom'
right: 'auto', //grid 组件离容器右侧的距离,值可以是具体数字也可以是'left | center | right'
bottom: 'auto', //grid 组件离容器下侧的距离,值可以是具体数字也可以是'top | middle | bottom'
backgroundColor: 'transparent', //标题背景色，默认透明
borderColor: '#ccc', //标题的边框颜色
borderWidth: 0, //标题的边框线宽
shadowBlur: 数字, //图形阴影的模糊大小,需要配合以下三个属性使用
shadowColor: '颜色', //阴影颜色
shadowOffsetX: 0, //阴影水平方向上的偏移距离
shadowOffsetY: 0, //阴影垂直方向上的偏移距离
}
title配置
未完待续。。。。。。
根据以上的配置说明，你可以在下面的编辑器里小试身手~
