这篇文章主要介绍了使用echarts实现两个y轴，其中左边显示数据右边轴显示百分比，并且Tooltip中涉及百分比的用百分比表示。

echarts模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
optionTpl: {
    title: {
        text: ''
    },
    grid: {
        left: '3%',
            right: '4%',
            bottom: '18%', // 控制绘制的图表和容器之间的距离,设置改值为dataZoom留出空间
            containLabel: true
    },
    legend: {
        data: [],
            icon: "circle", 
            // 控制形状  类型包括 circle,rect,roundRect,triangle,diamond,pin,arrow,none
    },
    xAxis: {
        data: [],
            nameLocation: 'end',//坐标轴名称显示位置。
            axisLabel: {//坐标轴刻度标签的相关设置。
            interval: 0, // 强制显示x轴所有标签
                rotate: "-12",
        }
    },
    yAxis: [
        {
            type: 'value',
            show: true,
            // splitNumber: 10, //坐标轴的分割段数
            axisLabel: {
                fontSize: 14,
                color: "#333",
            },
            splitLine: {
                show: false //是否显示分隔线。
            },
        }
    ],
    dataZoom: [{
        type: 'slider',
        show: true,
        xAxisIndex: [0],
        dataBackground: { //数据阴影的样式。
            lineStyle: 'none', //阴影的线条样式
            areaStyle: 'none', //阴影的填充样式
        },
        backgroundColor: '#fff',
        fillerColor: '#ba9759',
        left: "40",
        right: "40",
        bottom: "auto",
        start: 10,
        end: 90 //初始化滚动条
    }],
    series: []
}

设置echarts数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
// echarts
seteChart: function (data, idx) {
    let vm = this
    let map = new Map([
        [2, {
            xKey: 'moneyBacktDate', yKey: 'refundAmt', tit: ['同期数', '本期数', '同比增长率', '环比增长率'],
            listNm: {
                a: 'hisSettleDataQueryResponsesForT',
                h: 'hisSettleDataQueryResponses',
                r: 'hisSettleDataQueryResponsesForH'
            }
        }],
    ])
    let keys = map.get(idx)
    let xData = []
    let yDataT = []
    let yDataH = []
    let yDataR = []
    let tit = keys.tit
    let listNm = keys.listNm
    // 同比
    data[listNm.a].forEach((item, index) => {
        yDataT.push(item[keys.yKey])
    })
    // 环比
    data[listNm.h].forEach((item, index) => {
        xData.push(item[keys.xKey])
        yDataH.push(item[keys.yKey])
    })

    // 计算增长率
    data[listNm.r].forEach((item, index) => {
        yDataR.push(item[keys.yKey])
    })
    let yRateH = vm.getLv(yDataR)
    let yRateT = vm.getLv(yDataT, yDataH)

    let option = ApiUtils.pureData(vm.optionTpl)

    option.legend.data = tit
    option.xAxis.data = xData
    option.tooltip = {
        trigger: 'axis',
        axisPointer: {  // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        
        // 注意这个tootip一定要在设置数据时设置否则不生效
        formatter: function (params) {
            let html=params[0].name+"<br>"
            for(let i=0;i<params.length;i++){
                // 这个span是小圆点图标
                html+='<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'+params[i].color+';"></span>'
                if(option.series[params[i].seriesIndex].valueType==="percent"){
                    html+=params[i].seriesName+": "+params[i].value.toFixed(2)+"%<br>"
                }else{
                    html+=params[i].seriesName+": "+params[i].value+"<br>"
                }
            }
            return html
        }
    }

        let min = Math.min(yRateH[2], yRateT[2])
        let max = Math.max(yRateH[1], yRateT[1])
        option.xAxis.axisLabel.rotate = '0'
        option.yAxis[1] = {
            type: 'value',
            min: min, //最小坐标
            max: max, //最大坐标
            axisLabel: {
                show: true,
                interval: 'auto',
                formatter: '{value} %'
            },
            splitLine: {
                show: false //是否显示分隔线。
            },
        }
        option.series = [
            {
                name: tit[0],
                type: 'bar',
                data: yDataT,
                barMaxWidth: 45,
                // barWidth: 45,
            },
            {
                name: tit[1],
                type: 'bar',
                barGap: 0,
                data: yDataH,
                barMaxWidth: 45,
            },
            {
                name: tit[2],
                yAxisIndex: 1,
                data: yRateT[0],
                type: 'line',
                symbolSize: 0, // dot大小
                lineStyle: {
                    normal: {
                        width: 0 不显示折线图
                    }
                },
                valueType: "percent"
            },
            {
                name: tit[3],
                yAxisIndex: 1,
                data: yRateH[0],
                type: 'line',
                symbolSize: 0, // dot大小
                lineStyle: {
                    normal: {
                        // color: '#61a2ec',
                    }
                },
                valueType: "percent"
            }
        ]
    }
    return option
},

resize() {
    [1, 2].forEach(item => {
        this.chartMap.get(item).resize()
    })
},

// 初始化echarts
initChart: function (option, idx) {
    let vm = this
    let chart = document.getElementById(`dom_chart${idx}`)
    chart.style.width = (window.innerWidth * .8) - 120 + "px"  //初始化echarts图表宽度
    let myChart = echarts.init(chart)
    vm.chartMap.set(idx, myChart)
    myChart.clear() // 解决数据不能及时更新问题
    myChart.setOption(this[`option${idx}`], true)
    vm.resizeChart(idx)
},

// 视口变化重新渲染echarts 
resizeChart: function (idx) {
    let chart = document.getElementById(`dom_chart${idx}`)
    tools.on(window, 'resize', () => {
        chart.style.width = (window.innerWidth * .8) - 120 + "px"
        this.chartMap.get(idx).resize()
    })
},
    
// 计算增长率
getLv: function (arr, arr2) {
    if (arr.length === 0) return []
    let ar = []
    let len = arr2 ? arr2.length : arr.length - 1
    for (let i = 0; i < len; i++) {
        let arrX = arr2 ? arr2[i] : arr[i + 1]
        let v = 0
        if (arr[i] * 1 === 0) {
            v = 0
        } else {
            v = (arrX * 10000) / (arr[i] * 10000) - 1
        }
        let k = v.toFixed(2) * 100
        ar.push(k)
    }

    let min = Math.min(...ar)
    let max = Math.max(...ar)
    return [ar, max, min]
	}
}