参数
addArrow(arrow) arrow - GaugeArrow
addAxis(axis) axis - GaugeAxis
addLabel(x, y, text, align, size, color, rotation, alpha, bold, url) x - horizontal coordinate y - vertical coordinate text - label's text align - alignment (left/right/center) size - text size color - text color rotation - angle of rotation alpha - label alpha bold - specifies if text is bold (true/false), url - url of a
addLegend(legend, legendDivID) legend - AmLegend, legendDivID - id or reference to legend div (optional)
addListener(type, handler) type - string like 'dataUpdated' (在 'events'列出,扩展 class). handler - 时间开始,function 被呼出
addTitle(text, size, color, alpha, bold) text - 标题文本大小、字体颜色、标题颜色talpha 、标题透明加粗布尔值加粗...
clear()
clearLabels()
invalidateSize()
removeArrow( arrow) arrow - GaugeArrow
removeAxis(axis) axis - GaugeAxis
removeLegend()
removeListener(chart, type, handler) chart - chart object, type - event name, handler - method
validateData()
validateNow()
write(container) container - id of a DIV or DIV object which will hold the chart
先说明本人用的是echarts3版本在jsp上来里面需要引入:
<script
src="plugins/echarts/echarts.min.js"></script>
<script
type="text/javascript"
src="js/showChart.js"></scrip
<script
src="plugins/htmb/vendor/jquery/jquery.min.js"></script>
以上就是下面我们所要展示的效果
接下来言归正传,直插主题
打开eclipse
创建一个js,名字可以随便起,我这里就为showCharts.js
直接上代码
var
chartOutChar
=
null
var
option1
=
{
tooltip
:
{
trigger:
'item',
formatter:
"{a}
<br/>{b}
:
{c}
({d}%)"
},
legend:
{
x
:
'center',
y
:
'bottom',
data:['新闻','论坛','微信','微博','博客','贴吧','问答','财经网站','传统纸媒']
},
toolbox:
{
show
:
true,
feature
:
{
mark
:
{show:
true},
dataView
:
{show:
true,
readOnly:
false},
magicType
:
{
show:
true,
type:
['pie',
'funnel']
},
restore
:
{show:
true},
saveAsImage
:
{show:
true}
}
},
calculable
:
true,
series
:
[
{
name:'面积模式',
type:'pie',
radius
:
[30,
110],
center
:
['50%',
'50%'],
roseType
:
'area',
data:[
{value:10,
name:'新闻'},
{value:40,
name:'论坛'},
{value:15,
name:'微信'},