效果图:
上代码(vue示例):
<template>
<div class="chart-pie-com-con" ref="chart"></div>
</template>
<script>
import barIcon1 from "@/assets/imgs/bar-3d-blue.png";
import barIcon2 from "@/assets/imgs/bar-3d-yellow.png";
export default {
name: "chart-ryld",
props: {
chartData: {
xAxisData: [],
yAxisData1: [],
yAxisData2: [],
},
},
data() {
return {
yAxisData1_2: [],//离职2倍数组
yAxisData2_2: [],//入职2倍数组
};
},
methods: {
initEchartsPie(chartData) {
if (!chartData) return;
this.yAxisData2_2 = this.chartData.yAxisData2 && this.chartData.yAxisData2.map(item => item*2)
this.yAxisData1_2 = this.chartData.yAxisData1 && this.chartData.yAxisData1.map(item => item*2)
let echart = this.echarts.init(this.$refs.chart);
let option = {
color: ["#018eff", "#f9d334"],
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999999",
},
},
},
grid: {
left: "10px",
right: "10px",
top: "30px",
bottom: "30px",
containLabel: true,
},
legend: {
bottom: "0px",
textStyle: {
color: "#bbbbbb",
},
selectedMode: false,//控制是否可以通过点击图例改变系列的显示状态
data: ["入职", "离职", "员工增长率", "离职率"],
},
xAxis: [
{
type: "category",
data: this.chartData.xAxisData,
axisPointer: {
type: "shadow",
},
axisLabel: {
color: "#bbbbbb",
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
],
yAxis: [
{
type: "value",
name: "人数",
min: 0,
// max: 50,
interval: 10,
nameTextStyle: {
color: "#bbbbbb",
align: "right",
},
axisLabel: {
color: "#bbbbbb",
formatter: "{value}",
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
{
type: "value",
name: "百分率",
min: 0,
max: 100,
interval: 10,
nameTextStyle: {
color: "#bbbbbb",
align: "left",
},
axisLabel: {
color: "#bbbbbb",
formatter: "{value}",
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
],
series: [
{
name: "入职",
type: "pictorialBar",
barGap: "1%",
symbol: "image://" + barIcon1,
symbolSize: [25, "100%"],
data: this.chartData.yAxisData2,
},
{
name: "离职",
type: "pictorialBar",
barGap: "1%",
symbol: "image://" + barIcon2,
symbolSize: [25, "100%"],
data: this.chartData.yAxisData1,
},
{
name: "员工增长率",
type: "line",
symbol: "none",
color: "#4ec973",
xAxisIndex: 1,//非常重要。。。
yAxisIndex: 1,
data: this.chartData.yAxisData2_2,
},
{
name: "离职率",
type: "line",
symbol: "none",
color: "#8A2BE2",
xAxisIndex: 1,//非常重要。。。
yAxisIndex: 1,
data: this.chartData.yAxisData1_2,
},
],
};
//制作一个隐藏的X轴
option.xAxis[1] = {
type: "value",
max: option.xAxis[0].data.length * 100,
show: false,
};
//重新赋值横坐标
option.series[2].data = this.yAxisData2_2 && this.yAxisData2_2.map((x, i) => [
30 + i * 100,
x,
]);
//重新赋值横坐标
option.series[3].data = this.yAxisData1_2 && this.yAxisData1_2.map((x, i) => [
70 + i * 100,
x,
]);
echart.setOption(option);
},
},
watch: {
chartData(val) {
this.initEchartsPie(val);
},
},
mounted() {
this.initEchartsPie(this.chartData);
},
};
</script>
<style scoped>
.chart-pie-com-con {
width: 100%;
height: 230px;
}
</style>
造数据:
例如:chartData={
xAxisData: [‘2020’, ‘2019’, ‘2018’, ‘2017’, ‘2016’, ‘2015’, ‘2014’, ‘2013’, ‘2012’],
yAxisData1: [30, 38, 28, 46, 30, 15, 24, 34, 24],
yAxisData2: [19, 31, 15, 30, 25, 10, 27, 30, 25]
}