如何在echarts 上面自定义图形

图片中红色框起来的按钮

2、代码

[javascript] view plain copy

selfButtons:{//自定义按钮 danielinbiti,这里增加，selfbuttons可以随便取名字

show:true,//是否显示

title:'自定义', //鼠标移动上去显示的文字

icon:'test.png', //图标

option:{},

onclick:function(option1) {//点击事件,这里的option1是chart的option信息

alert('1')//这里可以加入自己的处理代码，切换不同的图形

}

}

在toolbox中的位置

[javascript] view plain copy

toolbox: {

show : true,

feature : {

mark : {show: true},

dataView : {show: true, readOnly: false},

magicType : {show: true, type: ['line', 'bar']},

restore : {show: true},

selfButtons:{//自定义按钮 danielinbiti,这里增加，selfbuttons可以随便取名字

show:true,//是否显示

title:'自定义', //鼠标移动上去显示的文字

icon:'test.png', //图标

option:{},

onclick:function(option1) {//点击事件,这里的option1是chart的option信息

alert('1')//这里可以加入自己的处理代码，切换不同的图形

}

},

saveAsImage : {show: true}

}

}

当然，内置了很多图标，这些图标都是画出来的。

[javascript] view plain copy

iconLibrary: {

mark: _iconMark,

markUndo: _iconMarkUndo,

markClear: _iconMarkClear,

dataZoom: _iconDataZoom,

dataZoomReset: _iconDataZoomReset,

restore: _iconRestore,

lineChart: _iconLineChart,

barChart: _iconBarChart,

pieChart: _iconPieChart,

funnelChart: _iconFunnelChart,

forceChart: _iconForceChart,

chordChart: _iconChordChart,

stackChart: _iconStackChart,

tiledChart: _iconTiledChart,

dataView: _iconDataView,

saveAsImage: _iconSave,

cross: _iconCross,

circle: _iconCircle,

rectangle: _iconRectangle,

triangle: _iconTriangle,

diamond: _iconDiamond,

arrow: _iconArrow,

star: _iconStar,

heart: _iconHeart,

droplet: _iconDroplet,

pin: _iconPin,

image: _iconImage

}

带chart后缀的都放在magicType的type中，同时后缀chart不用，程序里会自动拼接，比如lineChart，写'line'

1--在tab导航中加入radio单选按钮并隐藏，当第二个tab被选中的时候，再初始化图表数据，导航代码如下：

<ul class="tab-nav-list clearfix">

<li class="active">

<label><span>数据分析</span>

<input class="tabToggle hide" type="radio" name="tabToggle" value="0"/></label>

</li>

<li>

<label><span>用户分析</span>

<input class="tabToggle hide" type="radio" name="tabToggle" value="1" /></label>

</li>

<li><span>页面分析</span></li>

</ul>

2--设置被选中监听函数，在第二个tab被选中时初始化图表： initDataAnalyze()//第一个tab图表初始化

$(".tabToggle").click(function () {

if ($(this).val() == 1) {

initUserAnalyze()//第二个tab图表初始化

}

})

经过以上两个步骤后得以正常显示，当然，再多个tab中也可以使用这种方式。

1、创建折线图的数据区（包括年份和数据）2、仅选择数据区创建折线图（插入选项卡/图表工具组/折线图）3、得到的折线图x坐标不满足要求，在图表区单击鼠标右键，选择“选择数据”，进入“选择数据源”对话框4、单击对话框右侧“水平分类轴标签”下的“编辑”按钮5、选择对应x坐标轴的年份区域6、单击确定可见年份数据更改了图表的x轴坐标系列

---