echarts折柱图,使用数据集dataset,改变tooltip中圆点的样式
在echarts中运行如图:
options: {
color: ['#6666ff', '#66cc99', '#ff6600', '#ffcc33'],
legend: {
textStyle: {
fontSize: 12,
color: '#888',
},
top: '5',
},
grid: {
left: '3%',
right: '3%',
top: '80',
bottom: '40',
containLabel: true,
},
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255, 255, 255, 1)',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985',
},
},
padding: [5, 10, 5, 10],
formatter: function (params) {
return (
params[0].axisValue +
`<br>` +
params
.map((item) => {
let str = `<span style="display:inline-block;width:20px;height:12px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${item.color};"></span>`
if (item.componentSubType === 'line') {
str = `<span style="display:inline-block; width: 5px;height: 2px; margin: 0 -5px 5px -3px;background-color: ${item.color}"></span>
<span style="display:inline-block; width:12px;height:12px; border-radius:50%;border: 2px solid ${item.color};"></span>
<span style="display:inline-block; width: 5px;height: 2px; margin: 0 7px 5px -5px;background-color: ${item.color}"></span>`
}
let seriesNameStr = `<span style="display:inline-block;">${item.seriesName}</span>`
let value = item.value[item.encode.y[0]]
let valueStr = `<span style="display:inline-block;margin-left:20px;font-weight: bold">${value}</span>`
return `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
<span>${str}${seriesNameStr}</span>
<span>${valueStr}</span>
</span>`
})
.join(``)
)
},
},
xAxis: { type: 'category' },
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} 元',
},
},
series: [
{ type: 'bar', datasetIndex: 0, barWidth: 19 },
{ type: 'bar', datasetIndex: 0, barWidth: 19 },
{ type: 'bar', datasetIndex: 0, barWidth: 19 },
{ type: 'bar', datasetIndex: 0, barWidth: 19 },
{ type: 'line', datasetIndex: 1, smooth: true },
{ type: 'line', datasetIndex: 1, smooth: true },
{ type: 'line', datasetIndex: 1, smooth: true },
{ type: 'line', datasetIndex: 1, smooth: true },
],
dataset: [
{
source: [
[
'product',
'柱状图图例1',
'柱状图图例2',
'柱状图图例3',
'柱状图图例4',
],
// ['1月', 43.3, 85.8, 93.7, 100],
// ['2月', 53.1, 63.4, 55.1, 60],
// ['3月', 69.1, 73.4, 65.1, 80],
// ['4月', 83.1, 93.2, 85.5, 90],
// ['5月', 43.3, 85.8, 93.7, 100],
// ['6月', 53.1, 63.4, 55.1, 60],
// ['7月', 69.1, 73.4, 65.1, 80],
// ['8月', 83.1, 93.2, 85.5, 90],
],
},
{
source: [
[
'product',
'折线图图例1',
'折线图图例2',
'折线图图例3',
'折线图图例4',
],
// ['1月', 43.3, 85.8, 93.7, 100],
// ['2月', 53.1, 63.4, 55.1, 60],
// ['3月', 69.1, 73.4, 65.1, 80],
// ['4月', 83.1, 93.2, 85.5, 90],
// ['5月', 43.3, 85.8, 93.7, 100],
// ['6月', 53.1, 63.4, 55.1, 60],
// ['7月', 69.1, 73.4, 65.1, 80],
// ['8月', 83.1, 93.2, 85.5, 90],
],
},
],
},
2. 自定义悬浮框内容
tooltip: {
trigger: 'axis',
formatter: (params) => {
var strList = []
params.map((i, index) => {
const str = `<div style="color: #666; font-size: 12px;">
<span style="display: inline-block; width: 120px; margin-left: 20px">加权平均价:${100}</span>
<span style="display: inline-block; width: 120px; margin-left: 10px">平均价:${110}</span>
</div>`
strList.push(i.marker + ' ' + i.seriesName + ':' + i.value + '<br/>' + str)
})
return strList.join('')
}
},