Echarts Unity图表 echarts 图例

要做echarts图例，首先要给一个装echarts图例大小的盒子，高度和宽度根据自己项目的需求设计，下面是讲解echarts图例的例子:

用echarts做一个这样的图例出来：

<script src="${ctx}/Content/Echarts/echarts.js"></script>
<div id="chartbox">   </div>
#chartbox {
width: 100%;
height:420px;
 }
var mychart = echarts.init(document.getElementById("chartbox"));
mychart.setOption({
title : {
text: '用友ERP房地产图',
subtext: '成本控制——成本设置',//副标题文本，支持使用 \n 换行。
x:'center',//x轴中间对齐
top:'90px',//调标题组件离容器上侧的距离90px。
textStyle:{//为标题设置颜色
color:'#3a6f9f', //title里面设置textStyle然后就可以color设置主标题文字的颜色。
}
},
tooltip : {//提示框组件。 
trigger: 'item',//触发类型。 item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
formatter: "{a} <br/>{b} : {c} ({d}%)"//提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
}, legend: {//legend是图例组件 
//图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
x : 'center',//左右居中
y: 'bottom',//y轴往下对齐
data: ['费用分解', '预算设置', '预算汇总', '预算汇总报批', '合约规划', '预估变更', '造价控制', '造价汇总'],
//legend.data图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name（如果是饼图，也可以是饼图单个数据的 name）。图例组件会自动获取对应系列的颜色，
//图形标记（symbol）作为自己绘制的颜色和标记，特殊字符串 ''（空字符串）或者 '\n' (换行字符串)用于图例的换行。
//如果要设置单独一项的样式，也可以把该项写成配置项对象。此时必须使用 name 属性对应表示系列的 name。
textStyle:{//给data里面的字体设置颜色
color:'#3a6f9f',//legend里面设置textStyle然后在里面用color设置主标题文字的颜色
}
},
toolbox: {//工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。

show : true,//是否显示工具栏组件。
left:'70%',//工具栏组件离容器左侧的距离。
top:'45px',//工具栏组件离容器上侧的距离。
feature : {//feature: 各工具配置项。除了各个内置的工具按钮外，还可以自定义工具按钮。       注意，自定义的工具名字，只能以 my 开头，例如下例中的 mark
mark : {show: true},//show 是否显示该工具。
dataView : {show: true, readOnly: false},//dataView 数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
magicType : {//magicType 动态类型切换 
show: true,// show 是否显示该工具
type: ['pie', 'funnel']// 切换为饼状图
}, type  启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）。
restore : {show: true},//restore 配置项还原。
saveAsImage : {show: true}//saveAsImage  保存为图片。
}
},
calculable : true,
series : [//系列列表。每个系列通过 type 决定自己的图表类型
{
name:'面积模式',
type:'pie',
radius : [10, 50],//[ default: [0, '75%'] ]   饼图的半径，数组的第一项是内半径，第二项是外半径。     调图大小
center : ['50%', 240],//[ default: ['50%', '50%'] ]饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
//支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。
roseType : 'area',//是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
//'radius' 面积展现数据的百分比，半径展现数据的大小。
//'area' 所有扇区面积相同，仅通过半径展现数据大小。
data:[//系列中的数据内容数组。数组项可以为单个数值，如：
{value:10, name:'费用分解'},//name数据项名称。   value数据值。
{value:5, name:'预算设置'},
{value:15, name:'预算汇总'},
{value:25, name:'预算汇总报批'},
{value:20, name:'合约规划'},
{value:35, name:'预估变更'},
{value:30, name:'造价控制'},
{value:40, name:'造价汇总'}
]
}
]
});