Echarts组件tooltip提示框formatter函数返回的HTML样式解决方案

Echarts组件tooltip提示框formatter函数返回的HTML样式解决方案_第1张图片

    tooltip: {
        padding: 0,
        enterable: true,
        transitionDuration: 1,
        textStyle: {
            color: '#000',
            decoration: 'none',
        },
        // position: function (point, params, dom, rect, size) {
        //   return [point[0], point[1]];
        // },
        formatter: function(params) {
            // console.log(params)
            var tipHtml = '';
            tipHtml = '
' +'
'+''+'' +''+params.name+''+'
'
+'
' +'

'+''+'' +'单位总数:'+''+toolTipData.length+''+'个'+'

'
+'

'+''+'' +'总人数:'+''+toolTipData.length+''+'个'+'

'
+'

'+''+'' +'总人数:'+''+toolTipData.length+''+'个'+'

'
+'

'+''+'' +'总人数:'+''+toolTipData.length+''+'个'+'

'
+'
'
+'
'
; return tipHtml; } },

Echarts组件tooltip提示框formatter函数返回的HTML样式解决方案_第2张图片

    tooltip: {
        padding: 0,
        enterable: true,
        transitionDuration: 1,
        textStyle: {
            color: '#000',
            decoration: 'none',
        },
        // position: function (point, params, dom, rect, size) {
        //   return [point[0], point[1]];
        // },
        formatter: function(params) {
            // console.log(params)
            var tipHtml = '';
            tipHtml = '
' + '
' + ' ' + params.name + '' + ' 点击查看详情' + '
'
+ '
' + '
' + ' ' + ' 上传表格数量' + ' ' + params.data.tipData[0] + '万' + '
'
+ '
' + ' ' + ' 上传数据条数' + ' ' + params.data.tipData[1] + '条' + '
'
+ '
'
+ '
'
+ '
'
; setTimeout(function() { tooltipCharts(params.name); }, 10); return tipHtml; } },
function tooltipCharts() {
    console.log(arguments[0]);
    var myChart1 = echarts.init(document.getElementById('tooltipBarId'));
    var option = {
        tooltip: {},
        dataset: {
            source: [
                ['xAxis', '201701', '201702', '201703', '201704', '201705', '201706', '201707', '201708', '201709', '20170', '201710', '20170', '201801'],
                ['amount', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7, 65.1, 53.3, 41.1, 30.4, 53.3, 41.1, 53.3, 83.8]
            ]
        },
        xAxis: {
            type: 'category',
            interval: true,
            axisLabel: {
                rotate: 45
            },
            axisTick: {
                show: false
            }
        },
        yAxis: {},
        color: ['#4FA8F9', '#F5A623'],
        grid: {
            show: true,
            backgroundColor: '#FAFAFA',
            left: 30,
            right: 20,
            top: 20
        },
        series: [{
            type: 'bar',
            smooth: true,
            seriesLayoutBy: 'row',
            barWidth: 10
        }]
    };
    myChart1.setOption(option);
}

Done!

你可能感兴趣的:(JS,echarts,漏刻有时)