echarts histogram mouse hovering display icon + number every three digits with a thousandth sign + unit
Thousand sign + unit
1. Icon: params[i].marker
2. Thousands on every three digits: params[i].value.toLocaleString()
3. Add unit: as follows
formatter:function(params)
{
var relVal = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
relVal +='<br/>' + params[i].marker+params[i].seriesName + ' : ' + params[i].value.toLocaleString()+"K";
}
return relVal;
}
},
All codes
barLine:function(){
this.chartBars=this.$echarts.init(document.getElementById("bar"));
this.chartBars.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
},
formatter:function(params)
{
var relVal = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
relVal +='<br/>' + params[i].marker+params[i].seriesName + ' : ' + params[i].value.toLocaleString()+"K";
}
return relVal;
}
},
grid: {
left: '3%',
right: '3%',
bottom: '0%',
top:'10%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: this.dateTen,
axisPointer: {
type: 'shadow'
}
}
],
yAxis:
{
type: 'value',
splitLine: {
show: false}
},
series: [
{
name:'账单金额',
type:'bar',
data:this.recentOctoberBill,
color: ['#87CEFA'],
barWidth: '65%',
label: {
normal: {
color:'#000',
show: true,
position: 'inside',
"formatter": function(a){
return a.value.toLocaleString()+'k'}
}
}
},
{
name:'账单金额',
type:'line',
data:this.recentOctoberBill,
itemStyle:{
normal:{
lineStyle:{
type:'dotted' //'dotted'虚线 'solid'实线
}
}
},
label: {
normal: {
color:'#000',
show: true,
position: 'top',
"formatter": function(a){
return a.value.toLocaleString()+'k'}
}
}
}
]
})
},
Sample code
function top_chart() {
var top_shop = echarts.init(document.getElementById('top_id'));
var top_shop_option = {
title: {
text: '订单来源分析',
x: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
toolbox: {
show: true,
feature: {
mark: {
show: true},
saveAsImage: {
show: true},
}
},
calculable: true,
grid: {
y2: 90
},
xAxis: [
{
type: 'category',
data: ['优酷','公共','小程序'],
axisLabel: {
interval: 0,
rotate: 28,//倾斜度
},
axisTick: {
alignWithLabel: true
},
}
],
yAxis: [
{
//单位 name: '单',
type: 'value',
axisLabel: {
formatter: '{value} 单'},
}
],
series: [
{
name: flow_title,
barWidth: 20,//柱状图粗细 宽度 越小越细
type: 'bar',
data: [2,240,719],
label: {
normal: {
color: '#000',
show: true,
position: 'top',
"formatter": function (a) {
return a.value.toLocaleString() + '单'
}
}
}
}
]
};
top_shop.setOption(top_shop_option, true);
$(function () {
window.onresize = function () {
top_shop.resize();
}
})
this.resize = function size() {
var top_shop_div = document.getElementById('top_id');
width = 1100;
height = 400;
top_shop_div.style.width = width + 'px';
top_shop_div.style.height = height + 'px';
top_shop.resize(width, height);
}
}
Effect picture
Histogram mouse over the display unit
Key code
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params) {
console.log('params', params);
return params[0].name + "<br>" + params[0].seriesName + ":" + params[0].value + '单';
},
},
The effect of mouse over is as follows:
Extended attributes
tooltip : {
trigger: 'axis',
formatter:function(params){
return params[0].name+"<br>"+params[0].seriesName+":"+params[0].data+"<br>"+
params[1].seriesName+":"+params[1].data+"%";
},
textStyle:{
align:'left'
},
},
Print params
Variables and values corresponding to params
(1) […]
0: {
…}
"$vars": Array(3) [ "seriesName", "name", "value" ]
axisDim: "x"
axisId: "\u0000series\u00000\u00000"
axisIndex: 0
axisType: "xAxis.category"
axisValue: "优酷"
axisValueLabel: "优酷"
borderColor: undefined
color: "#649D0E"
componentIndex: 0
componentSubType: "bar"
componentType: "series"
data: Object {
value: "2", itemStyle: {
…} }
dataIndex: 0
dataType: undefined
dimensionNames: Array [ "x", "y" ]
encode: Object {
x: (1) […], y: (1) […] }
marker: "<span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#649D0E;\"></span>"
name: "优酷"
seriesId: "\u0000订单来源分析\u00000"
seriesIndex: 0
seriesName: "订单来源分析"
seriesType: "bar"
value: "2"
<prototype>: Object {
… }
length: 1
<prototype>: Array []
flow:798:29