一、echarts自定义tooltips
tooltip是指当鼠标移动到图表上时显示的信息窗口。echarts默认的tooltip样式已经非常美观和实用,但有时候我们需要根据实际需求自定义tooltip。这时候我们需要用到echarts的formatter函数来自定义tooltip的内容和样式。
下面是一个简单的例子。首先定义一个包含所有数据的数组,然后使用formatter函数将tooltip内容设置为数据数组中对应的值。
var data = [ {name:"北京", value:"123"}, {name:"上海", value:"234"}, {name:"广州", value:"345"} ]; option = { ... tooltip: { trigger: 'item', formatter: function(params) { return params.name+': '+params.value; } }, ... };
这段代码中的formatter函数会接收到一个params参数,包含了当前鼠标所在的数据项的各种信息。我们可以根据需要选择需要的信息来格式化tooltip的内容。
二、echarts自定义tooltip带symbol
有时候我们需要在tooltip中显示一个符号来标注数据项,这时候我们可以使用rich属性来自定义symbol。先来看一个简单的例子:
option = { ... series: [{ type: 'line', data: [10, 22, 32, 45, 38, 56, 74], markPoint: { label: { formatter: '{b}' }, data: [{ type: 'max', name: '最大值' },{ type: 'min', name: '最小值' }] }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' }, formatter: function(params) { var dataIndex = params[0].dataIndex; var value = params[0].value; return '第'+dataIndex+'个数据项:'+value; }, position: function(pos, params, el, elRect, size) { var obj = {top: 10}; obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30; return obj; }, extraCssText: 'background-color: rgba(255, 255, 255, 0.8);border-radius:3px' }, itemStyle: { color: '#1C86EE' }, lineStyle: { color: '#1C86EE' } }], ... };
这个例子中,我们使用了echarts的rich属性来自定义一个symbol,在formatter中将其插入到tooltip中。
三、echarts自定义tooltip带图形
有时候我们需要在tooltip中显示一个图形来表示数据项,这时候我们可以使用formatter函数和echarts.graphic来自定义图形。下面是一个简单的例子:
option = { ... series: [{ type: 'line', data: [10, 22, 32, 45, 38, 56, 74], markPoint: { label: { formatter: '{b}' }, data: [{ type: 'max', name: '最大值' },{ type: 'min', name: '最小值' }] }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' }, formatter: function(params) { var dataIndex = params[0].dataIndex; var value = params[0].value; return '第'+dataIndex+'个数据项:'+value; }, position: function(pos, params, el, elRect, size) { var obj = {top: 10}; obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30; return obj; }, extraCssText: 'background-color: rgba(255, 255, 255, 0.8);border-radius:3px', formatter: function(params) { var dataIndex = params[0].dataIndex; var value = params[0].value; var iconSize = 20; var icon = new echarts.graphic.Rect({ shape: { x: -iconSize / 2, y: -iconSize / 2, width: iconSize, height: iconSize }, style: { fill: '#1C86EE', stroke: '#fff', lineWidth: 2 } }); return icon + '第'+dataIndex+'个数据项:'+value; } }, itemStyle: { color: '#1C86EE' }, lineStyle: { color: '#1C86EE' } }], ... };
在这个例子中,我们在formatter函数中使用了echarts.graphic.Rect来自定义了一个矩形。同样,我们可以使用其他的图形来自定义tooltip。
四、echarts自定义图例css
我们可以使用echarts.graphic来自定义图例的样式,来达到修改图例样式的目的。这个样式的图例可以居中显示,有动画效果。
option = { ... legend: { data: ['商品1', '商品2', '商品3'], bottom: '5%', textStyle: { color: '#fff' }, icon: 'none', selectedMode: 'single', selected: { '商品1': true }, animationDelay: 1500, animationDuration: 800, animationEasing: 'elasticOut', formatter: function(name) { var iconSize = 10; var icon = new echarts.graphic.Rect({ shape: { x: -iconSize / 2, y: -iconSize / 2, width: iconSize, height: iconSize }, style: { fill: '#1C86EE', stroke: '#fff', lineWidth: 2 } }); return icon + ' ' + name; } }, ... };
五、echarts自定义图形
我们可以使用echarts.graphic来自定义图形,例如圆、矩形等。下面是一个简单的例子,画出一个圆形:
option = { ... graphic: [{ type: 'circle', shape: { cx: 250, cy: 150, r: 100 }, style: { fill: 'transparent', stroke: '#1C86EE', lineWidth: 4 } }], ... };
这个例子中,我们使用echarts.graphic创建了一个圆形,并将其添加到了option的graphic属性中。在style中可以对图形进行样式设置。
六、echarts自定义图例
echarts默认的图例是按照数据系列自动生成的,我们可以使用formatter函数来自定义图例。下面是一个简单的例子:
option = { ... legend: { data: ['男性用户数', '女性用户数'], textStyle: { color: '#fff' }, formatter: function(name) { if (name == '男性用户数') { return '♂ ' + name; } else { return '♀ ' + name; } } }, series: [{ data: [152, 64], ... },{ data: [113, 85], ... }], ... };
在这个例子中,我们使用了formatter函数来自定义图例,对男性用户数添加了♂标志,对女性用户数添加了♀标志。
七、echarts自定义icon
我们可以使用echarts.graphic自定义icon来代替默认的图例标记。下面是一个简单的例子:
option = { ... legend: { data: ['男性用户数', '女性用户数'], textStyle: { color: '#fff' }, icon: 'none', formatter: function(name) { if (name == '男性用户数') { var iconSize = 15; var icon = new echarts.graphic.Rect({ shape: { x: -iconSize / 2, y: -iconSize / 2, width: iconSize, height: iconSize }, style: { fill: '#1C86EE', stroke: '#fff', lineWidth: 2 } }); return icon + ' ' + name; } else { var iconSize = 15; var icon = new echarts.graphic.Polygon({ shape: { points: [[-iconSize / 2, -iconSize / 2], [iconSize / 2, -iconSize / 2], [0, iconSize / 2]], }, style: { fill: '#FFA07A', stroke: '#fff', lineWidth: 2 } }); return icon + ' ' + name; } } }, series: [{ data: [152, 64], ... },{ data: [113, 85], ... }], ... };
在这个例子中,我们对每个图例都使用了不同的图标来表示不同的数据系列。使用不同的echarts.graphic来绘制出我们需要的图标。
八、echarts自定义y轴刻度间距选取
有时候我们需要更细致地控制y轴刻度之间的间距,比如在数据范围比较小的情况下,我们需要将y轴刻度之间距离增加,否则会非常拥挤难以阅读。下面是一个简单的例子:
option = { ... yAxis: { type: 'value', interval: 20, splitNumber: 6 }, ... };
在这个例子中,我们将y轴刻度之间的距离设置为20,刻度数目为6,这样就可以有效地控制y轴的刻度间距,使图表更易读。