Echarts tooltip自定义单位

echarts yekong 322℃

Echarts tooltip自定义单位演示地址
wanjunshijiecom 2021-12-20 at 11.21.33

function getecharts3() {
            var chartDom = document.getElementById('echarts3');
            var myChart = echarts.init(chartDom);
            var option = {
                grid: {
                    left: '5%',
                    right: '30',
                    top: '15%',
                    bottom: '30',
                    containLabel: true
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    formatter: function (params) {
                        var relVal = params[0].name;
                        for (var i = 0, l = params.length; i < l; i++) {
                            i === 2 ? relVal += '<br/>' + params[i].marker + params[i].seriesName + params[i].value + "%" : relVal += '<br/>' + params[i].marker + params[i].seriesName + params[i].value;
                        }
                        return relVal;
                    }
                },
                "dataZoom": [{
                    "show": true,
                    "height": 12,
                    "xAxisIndex": [
                        0
                    ],
                    bottom: '20',
                    "start": 10,
                    "end": 90,
                    handleStyle: {
                        color: "#d3dee5",

                    },
                    textStyle: {
                        color: "#fff"
                    },
                    borderColor: "#90979c"
                }],
                legend: {
                    show: true,
                    right: 'center',
                    top: '0',
                    textStyle: {
                        color: 'rgba(255, 255, 255, 1)'
                    },
                },
                xAxis: {
                    data: ['沙河', '平乡', '宁晋', '巨鹿', '广宗', '内丘', '新河', '南宫', '内丘', '魏县'],
                    axisLine: {
                        lineStyle: {
                            color: '#3d5269'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 12,
                    }
                },
                yAxis: [
                    {
                        name: '单位(个)',
                        nameTextStyle: {
                            color: '#fff',
                            padding: [0, 0, 0, -20],
                            fontSize: 12
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#3F4471'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: '#fff',
                            fontSize: 12
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#2d3d53'
                            }
                        },
                        yAxisIndex: 0
                    },
                    {
                        // name: '单位(个)',
                        // nameTextStyle: {
                        //     color: '#fff',
                        //     padding: [0, 0, 0, -20],
                        //     fontSize: 12
                        // },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#3F4471'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: '#fff',
                            fontSize: 12,
                            formatter: '{value}%',
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#2d3d53'
                            }
                        },
                        yAxisIndex: 1
                    },
                ],
                series: [
                    {
                        name: '煤改电用户总量电量',
                        type: 'bar',
                        barWidth: 17,
                        zlevel: 2,
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    var list = [
                                        '#EC4848',
                                        '#EC4848',
                                        '#EC4848',
                                        '#EC4848',
                                        '#EC4848',
                                        '#EC4848',
                                        '#EC4848',
                                        '#EC4848',
                                        '#EC4848',
                                        '#EC4848',
                                    ]
                                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: list[params.dataIndex]
                                    }, {
                                        offset: 1,
                                        color: list[params.dataIndex]
                                    }], false)
                                }
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                fontSize: 14,
                                fontWeight: "bold",
                                color: "#ffffff",
                                position: "top",
                            }
                        },
                        data: [50, 111, 54, 154, 54, 57, 50, 41, 71, 71]
                    },
                    {
                        name: '煤改电用户总量电量',
                        type: 'bar',
                        barWidth: 17,
                        zlevel: 2,
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    var list = [
                                        '#E19701',
                                        '#E19701',
                                        '#E19701',
                                        '#E19701',
                                        '#E19701',
                                        '#E19701',
                                        '#E19701',
                                        '#E19701',
                                        '#E19701',
                                        '#E19701',
                                    ]
                                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: list[params.dataIndex]
                                    }, {
                                        offset: 1,
                                        color: list[params.dataIndex]
                                    }], false)
                                }
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                fontSize: 14,
                                fontWeight: "bold",
                                color: "#ffffff",
                                position: "top",
                            }
                        },
                        data: [50, 111, 54, 154, 54, 57, 50, 41, 71, 71]
                    },
                    {
                        name: '增量占比用户',
                        type: 'line',
                        smooth: false, //是否平滑
                        showAllSymbol: true,
                        symbol: 'circle',
                        yAxisIndex: 1,
                        symbolSize: 3,
                        lineStyle: {
                            normal: {
                                color: 'rgba(227, 249, 113, 1)',
                            },
                        },
                        zlevel: 10,
                        label: {
                            show: false,
                            position: 'top',
                            textStyle: {
                                color: 'rgba(227, 249, 113, 1)',
                            }
                        },
                        itemStyle: {
                            color: 'rgba(227, 249, 113, 1)',
                            borderColor: '#fff',
                            borderWidth: 1,
                        },
                        data: [50, 10, 50, 70, 54, 57, 50, 41, 71, 71]
                    },
                ]
            }
            myChart.clear()
            myChart.resize()
            option && myChart.setOption(option);
            myChart.on('click', function (params) {
                showwin()
            });
        }
喜欢 (0)