Question

如何利用echarts图表插件获取圆饼图块切换参数

Answer 1

首先，在JavaWeb项目中新建一个JSP页面someChart.jsp，引入echarts核心JS如下图所示：由于这里要用到折线图，需要将折线图的JS引入require(['echarts','echarts/chart/line'],如下图所示：图形要在页面上显示，需要一个容器，这里在body里定义一个div如下图所示：现在，编写形成折线图的核心jsfunction(ec){varline=ec.init(document.getElementById('lineChart'));varoption={tooltip:{show:true},legend:{data:['销量']},xAxis:[{type:'category',data:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]}],yAxis:[{type:'value'}],series:[{"name":"苹果销售量","type":"line","data":[8956,2025,3640,5610,8910,5720,3467,9023,8367,5342,6754,8753]}]};line.setOption(option);}如下图所示：启动Tomcat服务器，在浏览器上运行JSP页面，会看到一个折线图如下图所示：点击折线上的折点，会获取到X轴和Y轴值，说明这个需要给图一个点击事件，具体代码如下：functionqueryXY(param){varseriesIndex=param.seriesIndex;vardataIndex=param.dataIndex;varseriesName=param.seriesName;varname=param.name;vardata=param.data;varvalue=param.value;console.dir(param);}由于在js利用console打印，可以在火狐浏览器上查看相应的参数指标，具体如下图所示：在函数中添加alert，将参数指标打印在页面上varstr="seriesIndex:"+seriesIndex+"****"+"dataIndex:"+dataIndex+"****"+"seriesName:"+seriesName+"****"+"name:"+name+"****"+"data:"+data+"****"+"value:"+value;alert(str);如下图所示：再次刷新浏览器，等折线出来后，点击上面的点如下图所示：

Answer 2

这个可以修改，用自定义的图片就可以修改默认的legend形状
代码如下
legend: {
orient: 'horizontal', // 'vertical'
x: 'right', // 'center' | 'left' | {number},
y: 'top', // 'center' | 'bottom' | {number}
backgroundColor: '#eee',
borderColor: 'rgba(178,34,34,0.8)',
borderWidth: 4,
padding: 10, // [5, 10, 15, 20]
itemGap: 20,
textStyle: {color: 'red'},
selected: {
'降水量' : false
},
data: [
{
name:'蒸发量',
icon : 'image://../asset/ico/favicon.png',
textStyle:{fontWeight:'bold', color:'green'}
},
'降水量','最高气温', '最低气温'
]
}
主要看data属性里面