ECharts添加点击事件(基于饼图):
var option = { ...}myChart.setOption(option);myChart.on('click', function eConsole(param) { //添加点击事件 ,param输出被点击对象,包含被点击元素许多信息 var name = param.name; location.href = 'chuchai/work-online.html#' + name;});复制代码
修改label文本类型(显示value的值):
option = { title: { show: false, subtext: tit, x: 'right' }, tooltip: { trigger: 'item', formatter: "{a} {b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'right', top: 'bottom' data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] }, color: ['#3aa1ff', '#36cbcb', '#4ecb73', '#fbd437', '#f2637b', '#975fe5', '#5254cf', '#435188'], series: [{ name: '', type: 'pie', radius: '88%', center: ['30%', '50%'], data: da, label: { //饼图图形上的文本标签 normal: { show: true, position: 'inner', //标签的位置 textStyle: { fontWeight: 300, fontSize: 14 //文字的字体大小 }, formatter: '{c}' } }, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] };复制代码
可惜没有找到调整label文本位置的配置项。
dataset的使用:
$.get('data/asset/data/life-expectancy-table.json', function (data) { var sizeValue = '57%'; var symbolSize = 2.5; option = { legend: {}, tooltip: {}, toolbox: { left: 'center', feature: { dataZoom: {} } }, grid: [ { right: sizeValue, bottom: sizeValue}, { left: sizeValue, bottom: sizeValue}, { right: sizeValue, top: sizeValue}, { left: sizeValue, top: sizeValue} ], xAxis: [ { type: 'value', gridIndex: 0, name: 'Income', axisLabel: { rotate: 50, interval: 0}}, { type: 'category', gridIndex: 1, name: 'Country', boundaryGap: false, axisLabel: { rotate: 50, interval: 0}}, { type: 'value', gridIndex: 2, name: 'Income', axisLabel: { rotate: 50, interval: 0}}, { type: 'value', gridIndex: 3, name: 'Life Expectancy', axisLabel: { rotate: 50, interval: 0}} ], yAxis: [ { type: 'category', gridIndex: 0, name: 'Country', boundaryGap: false, axisLabel: { rotate: 50, interval: 0}}, { type: 'value', gridIndex: 1, name: 'Income'}, { type: 'value', gridIndex: 2, name: 'Population'}, { type: 'value', gridIndex: 3, name: 'Population'} ], dataset: { dimensions: [ 'Income', 'Life Expectancy', 'Population', 'Country', { name: 'Year', type: 'ordinal'} ], source: data }, series: [ { type: 'scatter', symbolSize: symbolSize, xAxisIndex: 0, yAxisIndex: 0, encode: { x: 'Income', y: 'Country', tooltip: [0, 1, 2, 3, 4] } }, { type: 'scatter', symbolSize: symbolSize, xAxisIndex: 1, yAxisIndex: 1, encode: { x: 'Country', y: 'Income', tooltip: [0, 1, 2, 3, 4] } }, { type: 'scatter', symbolSize: symbolSize, xAxisIndex: 2, yAxisIndex: 2, encode: { x: 'Income', y: 'Population', tooltip: [0, 1, 2, 3, 4] } }, { type: 'scatter', symbolSize: symbolSize, xAxisIndex: 3, yAxisIndex: 3, encode: { x: 'Life Expectancy', y: 'Population', tooltip: [0, 1, 2, 3, 4] } } ] }; myChart.setOption(option);});复制代码