本文已参与「新人创作礼」活动，一起开启掘金创作之路。
今天想说一下这个怎么实现，还是那句话，只有你想不到，没有产品不敢想的，先上效果图。
一个部门对应的数据是双柱的~
应产品需求，得实现~
定一个div 并且设置一个id <div class="department-graph" id="departmentTotalGraph"></div>
在这个页面组件里面引入 import * as echarts from 'echarts';
把我们要实现的图标的option抽出来单独写成了一个js文件 然后引入 import {Option ,} from './config'
先定义一下
data(){
return:{
departmentTotalChart: null,
}
}
initGraph() {
const departmentTotalDom = document.getElementById('departmentTotalGraph')
this.departmentTotalChart = echarts.init(departmentTotalDom)
//中间的一些数据需要自己处理一下,处理好了就setOption
处理数据
//数据处理好了
this.departmentTotalChart.setOption(Option )
、、监听 重绘
window.removeEventListener("resize", this.chartResize);
window.addEventListener("resize", this.chartResize);
}
有时候图标需要自适应大小屏，那就监听一下
chartResize(){
this.departmentTotalChart.resize();
}
提一下，之前望说了，很多时候由于布局所在的宽高受限，但是数据有很多的情况下，吧所有数据显示都会显得非常挤，于是我们可以在option里面设置一下
dataZoom: [{
type: 'inside',
show: true,
realtime: true,
"height": 12,
start: 0,
end:100,
bottom: '2%',
},
{
type: 'inside',
realtime: true,
"height": 12,
start: 0,
end: 100
}
],
这个type有三个值，官网有明确解释，看你怎么需要，我们ui说滚动条不好看，所以放了内置。
处理的时候也可以判断一下数据，如果多的话，超过多少便可以把滚动条其实位置和结束位置自定一下，例如：
if (this.departmentNameList.length > 3) {
Option.dataZoom = {
type: 'inside',
show: true, //flase直接隐藏图形
xAxisIndex: [0,1],
left: '15%', //滚动条靠左侧的百分比
bottom: -5,
start: 0,//滚动条的起始位置
end: 20 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
}
}
最后附上完整的option
export const Option = {
grid: {
right: '12%',
left: '15%',
bottom: '15%'
},
color: ['#619EFE', '#DCE9FF', '#E9E9E9'],
legend: {
data: ['中招人数', '参与演练人数', '部门总人数'],
y: '5%',
right: '12%',
itemHeight: 12,
itemWidth: 12,
},
label: labelOption,
tooltip: {
show: "true",
trigger: 'axis',
axisPointer: {
type: 'none'
},
formatter: function (params) {
// 中招数
var swindleTotal = params[0].data
// 参与演练数
var rehearsalTotal = params[2].data
// 部门总人数
var total = params[3].data
var swindleTotalRateResult,rehearsalTotalRateResult
// 中招数为零
if(swindleTotal == 0){
swindleTotalRateResult = 0
}else{
var swindleTotalRate = Math.floor((swindleTotal / total) * 10000) / 10000
swindleTotalRateResult = (swindleTotalRate * 100).toFixed(2)
swindleTotalRateResult = swindleTotalRateResult.split(".")[1] === "00" ? swindleTotalRateResult.split(".")[0] : swindleTotalRateResult
}
// 参与演练人数为0
if(rehearsalTotal == 0){
rehearsalTotalRateResult = 0
}else{
var rehearsalTotalRate = Math.floor((swindleTotal / rehearsalTotal) * 10000) / 10000
rehearsalTotalRateResult = (rehearsalTotalRate * 100).toFixed(2)
rehearsalTotalRateResult = rehearsalTotalRateResult.split(".")[1] === "00" ? rehearsalTotalRateResult.split(".")[0] : rehearsalTotalRateResult
}
var resultTooltip =
"<div>" +
"<div><span style='display:inline-block;width:12px;height:12px;background:#DCE9FF;margin-right:8px;'></span>参与演练人数 " +
rehearsalTotal + "</div>" +
"<div style='padding-left:21px;margin-top:8px;'>中招率 " +swindleTotalRateResult + "%</div>" +
"<div style='margin-top:8px;'>" +
"<span style='display:inline-block;width:12px;height:12px;background:#E9E9E9;margin-right:8px;'></span><span style='margin-right:17px;'>" +
"部门总人数</span> " + total + "</div>" +
"<div style='padding-left:21px;margin-top:8px;'>中招率 " + rehearsalTotalRateResult + "%</div>" +
"</div>"
return resultTooltip
}
},
yAxis: {
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: '#333',
}
},
axisLabel: {
textStyle: {
color: "#333",
fontSize: 16
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#D9DADD',
}
},
},
xAxis: [{
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#D9DADD',
}
},
axisLabel: {
textStyle: {
color: "#333",
fontSize: 16
},
interval:0 //如何显示标签 0强制显示全部
},
data: []
},
{
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitArea: {
show: false
},
splitLine: {
show: false
},
data: []
},
],
series: [{
name: '参与演练人数',
type: 'bar',
label: labelOption,
xAxisIndex: 1,
itemStyle: {
normal: {
show: true,
color: '#DCE9FF',
barBorderRadius: [2, 2, 0, 0],
borderWidth: 0,
borderColor: '#333',
}
},
barWidth: '30',
data: []
}, {
name: '部门总人数',
type: 'bar',
xAxisIndex: 1,
label: labelOption,
itemStyle: {
normal: {
show: true,
color: '#E9E9E9',
barBorderRadius: [2, 2, 0, 0],
borderWidth: 0,
borderColor: '#333',
}
},
barWidth: '30',
barGap: '30%',
data: []
}, {
name: '中招人数',
type: 'bar',
label: labelOption,
itemStyle: {
normal: {
show: true,
color: '#4F93FE',
bbarBorderRadius: [2, 2, 0, 0],
borderWidth: 0,
borderColor: '#333',
}
},
label: {
normal: {
show: true,
position: 'top',
textStyle: {
color: '#333'
}
}
},
barWidth: '20',
data: []
}, {
name: '中招人数',
type: 'bar',
barWidth: '20',
label: labelOption,
itemStyle: {
normal: {
show: true,
color: '#4F93FE',
barBorderRadius: [2, 2, 0, 0],
borderWidth: 0,
borderColor: '#333',
}
},
label: {
normal: {
show: true,
position: 'top',
textStyle: {
color: '#333'
}
}
},
barGap: '100%',
data: []
}]
};
有时候当数据是0的时候，产品不希望0也显示出来，包括饼状图很多时候官方给的例子是不会处理的，所以我们需要处理一下，自定一下方法，然后调用
const labelOption = {
show: true,
formatter: function (arr) {
return arr.value ? arr.value : ''
},
fontSize: 14,
rich: {
name: {}
}
}
