（1） legend: 图例组件。图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
--- orient (string)：图例列表的布局朝向。可选：'horizontal'、'vertical'(默认：'horizontal' )；
--- data[i] (object)：图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name （如果是 饼图 ，也可以是饼图单个数据的 name ）。图例组件会自动根据对应系列的图形标记（symbol）来绘制自己的颜色和标记，特殊字符串 '' （空字符串）或者 '\n' （换行字符串）用于图例的换行。
如果 data 没有被指定，会自动从当前系列中获取。多数系列会取自 series.name 或者 series.encode 的 seriesName 所指定的维度。如 饼图 and 漏斗图 等会取自 series.data 中的 name。
如果要设置单独一项的样式，也可以把该项写成配置项对象。此时必须使用 name 属性对应表示系列的 nam
示例：
更多饼图实例信息请参考ECharts： https://www.echartsjs.com/examples/#chart-type-pie
1 require.config({2 paths: {
3 "echarts": "/Content/js/echarts-2.0.4/build/echarts",
4 "echarts/chart/pie": "/Content/js/echarts-2.0.4/build/echarts"
5 }
6 })
7 // 使用
8 require(
9 [
10 'echarts',
11 'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
12 ],
13 function (ec) {
14 // 基于准备好的dom，初始化echarts图表
15 var myChart = ec.init(document.getElementById('main'))
16 option = {
17 title: {
18 text: row.ProjectName,
19 x: 'center'
20 },
21 tooltip: {
22 trigger: 'item',
23 formatter: "{a} <br/>{b} : {c} ({d}%)"
24 },
25 legend: {
26 orient: 'vertical',
27 x: 'left',
28 data: (function () {
29 var name = []
30 com.ajax({
31 type: 'GET',
32 cache: false,
33 url: '/api/Operation/SafetyCheckReport/GetDangerName',
34 data: { "UpCode": DangerType },
35 success: function (d) {
36 for (var i = 0i <d.lengthi++) {
37 name.push(d[i].Name)
38 }
39 }
40 })
41 return name
42 })()
43 },
44 toolbox: {
45 show: true,
46 feature: {
47 restore: { show: true },
48 saveAsImage: { show: true }
49 }
50 },
51 calculable: false,
52 series: [
53 {
54 type: 'pie',
55 radius: '50%',
56 center: ['50%', '50%'],
57 data: (function () {
58 var arr = []
59 $.ajax({
60 type: 'GET',
61 async: false,
62 cache: false,
63 url: self.urls.querytow,
64 data: { "ProjectID": row.ProjectID, "UpCode": DangerType },
65 success: function (d) {
66 if (d[0].koujian != 0) {
67 arr.push({ value: d[0].koujian, name: '扣件式脚手架'})
68 } else {
69 arr.push({ value: d[0].koujian, name: '扣件式脚手架', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
70 }
71 if (d[0].menshi != 0) {
72 arr.push({ value: d[0].menshi, name: '门式脚手架'})
73 } else {
74 arr.push({ value: d[0].menshi, name: '门式脚手架', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
75 }
76 if (d[0].shuangpai != 0) {
77 arr.push({ value: d[0].shuangpai, name: '双排外竹脚手架'})
78 } else {
79 arr.push({ value: d[0].shuangpai, name: '双排外竹脚手架', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
80 }
81 if (d[0].wankou != 0) {
82 arr.push({ value: d[0].wankou, name: '碗扣式脚手架'})
83 } else {
84 arr.push({ value: d[0].wankou, name: '碗扣式脚手架', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
85 }
86 if (d[0].sanjiao != 0) {
87 arr.push({ value: d[0].sanjiao, name: '三角形钢管悬挑脚手架'})
88 } else {
89 arr.push({ value: d[0].sanjiao, name: '三角形钢管悬挑脚手架', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
90 }
91 if (d[0].xinggang != 0) {
92 arr.push({ value: d[0].xinggang, name: '型钢悬挑脚手架(阳角A)'})
93 } else {
94 arr.push({ value: d[0].xinggang, name: '型钢悬挑脚手架(阳角A)', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
95 }
96 if (d[0].duopai != 0) {
97 arr.push({ value: d[0].duopai, name: '多排悬挑架主梁验算'})
98 } else {
99 arr.push({ value: d[0].duopai, name: '多排悬挑架主梁验算', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
100 }
101 if (d[0].fuzhe != 0) {
102 arr.push({ value: d[0].fuzhe, name: '附着升降脚手架'})
103 } else {
104 arr.push({ value: d[0].fuzhe, name: '附着升降脚手架', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
105 }
106 if (d[0].xuangua != 0) {
107 arr.push({ value: d[0].xuangua, name: '悬挂式吊篮'})
108 } else {
109 arr.push({ value: d[0].xuangua, name: '悬挂式吊篮', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
110 }
111 if (d[0].gangguan != 0) {
112 arr.push({ value: d[0].gangguan, name: '钢管落地卸料平台'})
113 } else {
114 arr.push({ value: d[0].gangguan, name: '钢管落地卸料平台',itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
115 }
116 if (d[0].pingtai != 0) {
117 arr.push({ value: d[0].pingtai, name: '型钢悬挑卸料平台'})
118 } else {
119 arr.push({ value: d[0].pingtai, name: '型钢悬挑卸料平台',itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
120 }
121 if (d[0].jingjia != 0) {
122 arr.push({ value: d[0].jingjia, name: '井架落地卸料平台'})
123 } else {
124 arr.push({ value: d[0].jingjia, name: '井架落地卸料平台', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
125 }
126 if (d[0].fanghu != 0) {
127 arr.push({ value: d[0].fanghu, name: '防护棚'})
128 } else {
129 arr.push({ value: d[0].fanghu, name: '防护棚', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
130 }
131 if (d[0].mujiao != 0) {
132 arr.push({ value: d[0].mujiao, name: '木脚手架'})
133 } else {
134 arr.push({ value: d[0].mujiao, name: '木脚手架', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
135 }
136 if (d[0].xiedao != 0) {
137 arr.push({ value: d[0].xiedao, name: '斜道'})
138 } else {
139 arr.push({ value: d[0].xiedao, name: '斜道', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
140 }
141 if (d[0].xuantiao != 0) {
142 arr.push({ value: d[0].xuantiao, name: '悬挑防护棚'})
143 } else {
144 arr.push({ value: d[0].xuantiao, name: '悬挑防护棚', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
145 }
146
147 }
148 })
149 return arr
150 })()
151 }
152 ]
153 }
154 // 为echarts对象加载数据
155 myChart.setOption(option)
156 }
157 )
引入ECharts
echarts提供多种引入方式，请根据你的项目类型选择合适的方式：
模块化包引入
如果你熟悉模块化开发，你的项目本身就是模块化且遵循AMD规范的，那引入echarts将很简单，使用一个符合AMD规范的模块加载器，如esl.js，只需要配置好packages路径指向src即可，你将享受到图表的按需加载等最大的灵活性，由于echarts依赖底层zrender，你需要同时下载zrender到本地，可参考demo，你需要配置如下。
需要注意的是，包引入提供了开发阶段最大的灵活性，但并不适合直接上线，减少请求的文件数量是前端性能优化中最基本但很重要的规则，务必在上线时做文件的连接压缩。
//from echarts example
require.config({
packages: [
{
name: 'echarts',
location: '../../src',
main: 'echarts'
},
{
name: 'zrender',
location: '../../../zrender/src', // zrender与echarts在同一级目录
main: 'zrender'
}
]
})
模块化单文件引入（推荐）
如果你使用模块化开发但并没有自己的打包合并环境，或者说你不希望在你的项目里引入第三方库的源文件，我们建议你使用单文件引入，同模块化包引入一样，你需要熟悉模块化开发。
自2.1.8起，我们为echarts开发了专门的合并压缩工具echarts-optimizer。如你所发现的，build文件夹下已经包含了由echarts-optimizer生成的单文件：
dist（文件夹） : 经过合并、压缩的单文件
line.js : 折线图（如需折柱动态类型切换，require时还需要echarts/chart/bar）
bar.js : 柱形图（如需折柱动态类型切换，require时还需要echarts/chart/line）
scatter.js : 散点图
k.js : K线图
pie.js : 饼图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/funnel）
radar.js : 雷达图
map.js : 地图
force.js : 力导向布局图（如需力导和弦动态类型切换，require时还需要echarts/chart/chord）
chord.js : 和弦图（如需力导和弦动态类型切换，require时还需要echarts/chart/force）
funnel.js : 漏斗图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/pie）
gauge.js : 仪表盘
eventRiver.js : 事件河流图
treemap.js : 矩阵树图
venn.js : 韦恩图
echarts.js : 这是包含AMD加载器的echarts主文件，需要通过script最先引入
chart（文件夹） : echarts-optimizer通过依赖关系分析同时去除与echarts.js的重复模块后为echarts的每一个图表类型单独打包生成一个独立文件，根据应用需求可实现图表类型按需加载
source（文件夹） : 经过合并，但并没有压缩的单文件，内容同dist，可用于调试
采用单一文件使用例子见ECharts单一文件引入，存放在example/www下，首先你需要通过script标签引入echarts主文件
//from echarts example<body>
<div id="main" style="height:400px"></div>
...
<script src="./js/echarts.js"></script>
</body>
在主文件引入后你将获得一个AMD环境，配置require.conifg如下：
//from echarts example<body>
<div id="main" style="height:400px"></div>
...
<script src="./js/echarts.js"></script>
<script type="text/javascript">
require.config({
paths: {
echarts: './js/dist'
}
})
</script>
</body>
require.config配置后就可以通过动态加载使用echarts
//from echarts example<body>
<div id="main" style="height:400px"></div>
...
<script src="./js/echarts.js"></script>
<script type="text/javascript">
require.config({
paths: {
echarts: './js/dist'
}
})
require(
[
'echarts',
'echarts/chart/line', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
'echarts/chart/bar'
],
function (ec) {
var myChart = ec.init(document.getElementById('main'))
var option = {
...
}
myChart.setOption(option)
}
)
</script>
</body>
总结来说，模块化单文件引入ECharts，你需要如下4步：
为ECharts准备一个具备大小（宽高）的Dom（当然可以是动态生成的）
通过script标签引入echarts主文件
为模块加载器配置echarts的路径，从当前页面链接到echarts.js所在目录，见上述说明
动态加载echarts及所需图表然后在回调函数中开始使用（容我罗嗦一句，当你确保同一页面已经加载过echarts，再使用时直接require('echarts').init(dom)就行）
详见入门教程 ( Getting started ) »
标签式单文件引入
自1.3.5开始，ECharts提供标签式引入。如果你的项目本身并不是基于模块化开发的，或者是基于CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你采用srcipt标签式引入，忘掉require。Srcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender，可参考ECharts标签式引入，需要注意的是excanvas依赖body标签插入Canvas节点去判断Canvas的支持，如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错，解决的办法就是把标签移动到body内（后）。
标签式引入环境中，常用模块的引用可通过命名空间直取，同模块化下的路径结构，如：
echarts.config = require('echarts/config')， zrender.tool.color = require('zrender/tool/color')
//from echarts example<body>
<div id="main" style="height:400px"></div>
...
<script src="example/www2/js/dist/echarts-all.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main'))
var option = {
...
}
myChart.setOption(option)
</script>
</body>
