效果图
tab在API个数这边表示根据api个数进行排序
点击cisco文字触发高亮
点击请求数（根据请求数进行排序）
代码
<template>
<div ref="doubleBarChart" class="doubleBarChart"></div>
</template>
<script>
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
require('echarts/lib/component/legendScroll')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/grid')
export default {
name: 'doubleBar',
props: {
// 中间项目名称
xName: {
type: Array,
required: true,
default: () => []
},
// api的数据
yData1: {
type: Array,
required: true,
default: () => []
},
// 请求的数据
yData2: {
type: Array,
required: true,
default: () => []
},
// 设置根据api或请求数进行排序
sortBy: {
type: String,
required: true,
default: 'api'
}
},
data() {
return {
xData: this.xName, // 两个echarts公用的y轴的数据，也就是项目名称
y1Data: this.yData1, // API个数
y2Data: this.yData2, // 请求数
apiBorder: ' ', // 设置切换的时候的边框
reqBorder: 'dashed',
chartColor: ['rgb(23,141,217)', 'rgba(23,141,217, 0.2)'] // 设置切换时候的颜色
}
},
watch: {
sortBy(val) {
if (val === 'api') {
this.chartColor = ['rgb(23,141,217)', 'rgba(23,141,217, 0.2)']
this.apiBorder = ' '
this.reqBorder = 'dashed'
} else if (val === 'req') {
this.chartColor = ['rgba(23,141,217, 0.2)', 'rgb(23,141,217)']
this.apiBorder = 'dashed'
this.reqBorder = ' '
}
},
yData1(val) {
this.y1Data = val
this.drawEcharts()
},
yData2(val) {
this.y2Data = val
this.drawEcharts()
},
xName(val) {
this.xData = val
this.drawEcharts()
}
},
mounted() {
this.drawEcharts()
},
methods: {
// 画图方法
drawEcharts() {
let myChart = echarts.init(this.$refs.doubleBarChart)
myChart.clear()
var option = {
color: this.chartColor, // 配置数据颜色
grid: [
// 配置第一个折线图的位置
{
show: false,
left: '10%',
top: '5%',
bottom: '0%',
// 设置containLabel是为了给画布下方空出一段距离mou
containLabel: true,
width: '30%',
height: '60%'
},
{
show: false,
left: '52.5%',
top: '5%',
bottom: '18%',
width: '0%',
height: '55%'
},
// 配置第二个折线图位置
{
show: false,
right: '10%',
top: '5%',
bottom: '0%',
containLabel: true,
width: '30%',
height: '60%'
}
],
tooltip: {
trigger: 'axis',
borderColor: '',
borderWidth: 0,
backgroundColor: 'rgba(50,50,50,0.7)',
textStyle: {
color: 'rgb(180,180,180)',
fontSize: 12,
align: 'left'
},
// formatter函数动态修改tooltip样式
formatter: function(params) {
if (params) {
var htmlStr = ''
htmlStr += params[0].name.replace(/\-/g, '/') + '<br/>' // x轴的名称
for (var i = 0; i < params.length; i++) {
var param = params[i] // 存一份item项
var seriesName = param.seriesName // 图例名称
var value = param.value // y轴值
var color = param.color // 图例颜色
htmlStr += '<div>'
htmlStr +=
'<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
color +
';"></span>'
// 圆点后面显示的文本
htmlStr += seriesName + '：' + value
htmlStr += '</div>'
}
return htmlStr
} else {
return
}
},
padding: 10
},
legend: [{
show: true,
// x: 'center',
y: '70%',
left: '30%',
data: ['API个数'],
textStyle: {
fontSize: 12,
color: 'rgb(180,180,180)'
},
itemStyle: {
borderType: this.apiBorder,
borderColor: 'rgb(23,141,217)',
borderWidth: 1
}
}, {
show: true,
// x: 'center',
y: '70%',
right: '30%',
data: ['请求数'],
textStyle: {
fontSize: 12,
color: 'rgb(180,180,180)'
},
itemStyle: {
borderType: this.reqBorder,
borderColor: 'rgb(23,141,217)',
borderWidth: 1
}
}],
// 将上下两个tootip合成一个
axisPointer: {
link: { yAxisIndex: 'all' }
},
xAxis: [
{
type: 'value',
// name: 'API个数',
inverse: true, // 改变x轴朝向
axisLine: { // 坐标轴轴线相关设置
show: true, // 是否显示坐标轴轴线
onZero: true // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上
},
axisLabel: { // 是否展示刻度标签
show: true
},
splitLine: { // 分隔线的样式，这里设置为虚线
lineStyle: {
type: 'dashed',
color: 'rgb(67,72,87)'
}
},
interval: 100,
min: 0,
max: 400
}, {
gridIndex: 1,
show: false
}, {
type: 'value',
// name: '请求数',
gridIndex: 2,
interval: 15000,
min: 0,
max: 60000,
axisLine: { // 坐标轴轴线相关设置
show: true, // 是否显示坐标轴轴线
onZero: true // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上
},
axisLabel: { // 是否展示刻度标签
show: true
},
splitLine: {
lineStyle: {
type: 'dashed',
color: 'rgb(67,72,87)'
}
}
}
],
yAxis: [
{
type: 'category',
data: this.xData,
inverse: true, // y轴上下反转
position: 'right',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
triggerEvent: true
}, {
gridIndex: 1,
type: 'category',
inverse: true,
position: 'left',
axisLine: {
show: false
},
axisTick: {
show: false
},
triggerEvent: true,
axisLabel: {
color: function(value, index) {
return value === projectName ? 'rgb(23,141,217)' : '#fff'
},
clickable: true,
align: 'center'
},
data: this.xData.map(function(value) {
return {
value: value,
textStyle: {
align: 'center'
}
}
})
}, {
type: 'category',
data: this.xData,
inverse: true,
gridIndex: 2,
axisLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
}
}
],
series: [
{
name: 'API个数',
type: 'bar',
xAxisIndex: 0,
yAxisIndex: 0,
hoverAnimation: true, // 悬浮的动画加上
data: this.y1Data, // API个数
barWidth: 20,
itemStyle: {
borderType: this.apiBorder,
borderColor: 'rgb(23,141,217)',
borderWidth: 1
},
label: {
show: true,
position: 'left',
color: 'rgb(180, 180, 180)'
},
select: {
disabled: false,
itemStyle: {
shadowBlur: 20,
shadowColor: 'rgb(23,141,217)',
color: 'rgb(243,221,77)'
}
},
selectedMode: 'single'
// emphasis: {
// disabled: false,
// itemStyle: {
// color: 'rgb(243,221,77)',
// shadowBlur: 20,
// shadowColor: 'rgb(23,141,217)'
// }
// }
},
{
name: '请求数',
type: 'bar',
xAxisIndex: 2,
yAxisIndex: 2,
hoverAnimation: true, // 悬浮的动画加上
data: this.y2Data, // 请求数
barWidth: 20,
itemStyle: {
borderType: this.reqBorder,
borderColor: 'rgb(23,141,217)',
borderWidth: 1
},
label: {
show: true,
position: 'right',
color: 'rgb(180, 180, 180)'
},
select: {
disabled: false,
itemStyle: {
shadowBlur: 20,
shadowColor: 'rgb(23,141,217)',
color: 'rgb(243,221,77)'
},
lineStyle: {
width: 1,
shadowBlur: 2,
shadowColor: 'rgb(23,141,217)',
color: 'rgb(23,141,217)'
}
},
selectedMode: 'single'
}
]
}
let projectName = ''
var that = this
let arrIndex = ''
myChart.setOption(option, true)
// 自适应
window.addEventListener('resize', () => {
myChart.resize()
})
// 点击y轴坐标，点亮bar
myChart.on('click', function(params) {
projectName = params.value
option.series[0].select = true
that.xData.forEach((v, i) => {
if (v === projectName) {
arrIndex = i
}
})
myChart.resize()
myChart.dispatchAction({
type: 'select',
seriesIndex: [0, 1],
dataIndex: arrIndex
})
})
}
}
}
</script>
<style>
.doubleBarChart{
width: 100%;
height: 400px;
}
</style>
然后在需要的时候引入就可以了
版权声明：本文为xiaomou_原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。