ECharts 学习笔记

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} <br/>{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);
});
复制代码