图表数据的绑定

一． 绘画图表说明
1． 图标的绑定是一种把数据显示更加的透明直白的展现给人们看的数据，在图1 里面就是把
数据以图表的形式，图表有很多形式，其中在图1里面其实就是其中之一的一种形式而已
，图1的是一种饼状图，还有柱状图，等等，这些图来源以其中的echarts图标插件里面!

图1 饼状图

2. 你要用到echarts首先呢？就要一个插件的引用了，引用完成后，在echarts里面绘画图
表，还得要一个画板，其中画板的宽度和一个高度值要设置一下，其中图标的显示大小
要显示多大就在画板里面设置，在图2里面就是一个画板的形式了。
3. 画板好了，就是开始绘画图表了，首先绘画图表还得引用画板，才可以开始绘画同时在
给画板的时候还得记得给每一个画板一个ID值，因为绘画的时候还得要引用一下的，在
下方就是一个画板的引用了：var PieChart = echarts.init(document.getElementById(‘nav-line’));

图2 画板样式图

二． 饼状图的参数说明

1. 在绘画图表的时候同时还得要知道每一个参数的作用才可以，因为绘画图表里面的参数就是
   一个数据的绑定，在图3里面就是一个饼状图的参数了，其中的参数就讲解一下吧！
2. Title:{}此参数就是一个标题组件，包含主标题和副标题，这个就是一个标题，在图1里面你
   也看到一个全校极安全教育测试成绩分析图这几个字了，其实就是title{}起的作用来的在title
   里面还有几个参数其中：
   01 text:’’,这个参数就是字体了
   02 subtext’’, 副标题文本，这个就是在主标题下方的一个副标题的参数来的
   03 x,y这个就相当于数学里面的一个x,y轴一样了，可以对其center居中，left左对齐，right
   右对齐等等！
   04 TextStyle: {}在这个里面用几个重要的参数，其中还用一个color:字体颜色，fontStyle主标
   题字体风格，fontWeight主标题文字字体的粗细，fontSite主标题文字的字体大小
3. Tooltip：{}，提示框的组件，这个里面提示的等等组件了
   01.trigger:’’, 触发类型，这个里面触发的类型就有’item’: 数据项图形触发，作用在散点图，
   饼图等无类目轴的图表中使用,’axis’: 坐标轴触发，作用在柱状图，折线图等会使用类目轴
   的图表中使用！
   02 triggeron:’’,这个就是提示框的触发的条件了，’mousemove’鼠标移动时触发，’click’鼠
   表点击触发。
   03 Formatter:’’,这个就是提示库的内容格式器了，并且支持字符串模板和回调函数的两种形式
   了，其中在里面的{a}，{b}，{c}，({d}%)，{e}代表着系列名，数据名，数据值等等

图 3 饼状图参数

4. Legend:{}, 这个就是一个图例的组件了
01.Orient:’’,这个是一个图例的布局的朝向，其中里面还有两个值，第一个’horizontal’这个
就是表示水平的方向，第二个‘vertical’这个就是表示垂直的方向了。
02. Left:’’,这个就是图例组件离容器左侧的距离了，这个同时可以设置’left’左边,’center’
居中,’right’右边，这三个值，都是相对于Left的左边来说的。
03. Data:’’,图例的数据数组，这个在图1右边的一列数组的图例了，在花括号里面你可以随便
给个名称， 但是每一个名称就会代表饼状图里面的值了
5. Series:{},这个就是系列列表了。
01 Name:’’,更新数据和配置项时用于指定对应的系列，就是当鼠标移入到饼状图里面的时候，
就会显示出一个提示层了，而提示层的标题就是这个了
02. Type:’’,这个就是图表的类型了，其中的就有饼状图，折现图，柱状图，地图，热力图，等
等，而饼状图就是’pie’了
03. Radius:’’,这个就是饼状图的半径了，其中里面还可以写成[0, 75%]，在半径里面数据的第一
项是内半径，第二项是外半径了
04. Center:[50%,50%],这个就是饼图的坐标了，在center里面第一个值就是横坐标，而第二个就是
纵坐标了，可以对横纵的反向来设置距离
05. Data:{}这个data就是饼状图的值了，就是数据内容数据
06. itemStyle：{}折线拐点标志的样式了

三．数据绑定

图4 绑定数据

1. 在图4里面就是一个对数据进行的一个绑定的样式图了，其中value：后面就是一个数据，具体
   要显示什么数据你就可以给什么数据，而name：就是一个对于你这一串的数据的名称了，比如
   在图4里面第一串是合格的数据，就可以在name来标识一下就行了，但鼠标移动进去的时候就
   会显示每一串的数据，和百分比了。

**

总结:

**：在这个图表绑定数据里面让我更加的清楚的了解到如何运用图表了，同时清楚到如何进行一个数据绑定了，在我对一个图表里面的个个参数，每一个参数代表不同的功能和样式，也让我知道如何去找每一个的
意思和功能，在上面的总结里面也希望可以帮助到你。