echarts版本为5.3.2
实现效果:
实现代码:
<template>
<div id="barline-chart"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
barlineChartTimer: null,
};
},
mounted() {
this.renderBarLine();
},
methods: {
// 就业分析折线柱状图
renderBarLine() {
let dom = document.getElementById("barline-chart");
let myChart = echarts.init(dom);
let option = {
grid: {
top: "23%",
bottom: "20%",
left: "10%",
right: "10%",
},
color: ["rgb(67, 211, 244)", "rgb(126,191,104)"],
legend: {
type: "scroll",
right: "2%",
top: "5%",
data: ["新增社保账户数", "新增社保账户增速"],
textStyle: {
fontSize: 14,
color: "#9ebbdf",
},
},
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
},
},
xAxis: {
data: ["2018", "2019", "2020", "2021", "2022", "2023"],
axisTick: {
show: false, //隐藏X轴刻度
},
axisLabel: {
show: true,
interval: 0,
textStyle: {
color: "rgb(138, 163, 176)",
fontSize: 14,
},
},
axisLine: {
show: true,
lineStyle: {
//X轴线颜色
color: "rgb(11, 51, 67)",
},
},
},
yAxis: [
{
type: "value",
name: "单位(个)",
nameTextStyle: {
color: "#9ebbdf",
fontSize: 14,
},
splitLine: {
show: true,
lineStyle: {
color: "#1c2538",
type: "dashed",
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
axisLabel: {
show: true,
textStyle: {
color: "rgb(138, 163, 176)",
fontSize: 14,
},
},
},
{
type: "value",
name: "",
nameTextStyle: {
color: "#fff",
fontSize: 14,
},
position: "right",
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
axisLabel: {
show: false,
formatter: "{value}",
textStyle: {
color: "rgb(138, 163, 176)",
fontSize: 14,
},
},
},
],
series: [
{
name: "新增社保账户数",
type: "pictorialBar",
barCategoryGap: "20px",
symbol:
"path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z",
label: {
show: false,
},
barWidth: 20,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(172, 221, 250, 1)",
},
{
offset: 0.7,
color: "rgba(8, 143, 224, .8)",
},
{
offset: 1,
color: "rgba(8, 143, 224, .1)",
},
]),
},
emphasis: {
opacity: 1,
},
},
data: [18, 11, 12, 22, 11, 10],
z: 10,
},
{
name: "新增社保账户增速",
type: "line",
yAxisIndex: 1, //使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用
smooth: true,
symbol: "none", //标记的图形为实心圆
itemStyle: {
normal: {
color: "#e4c558",
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(239, 206, 90, .4)",
},
{
offset: 1,
color: "rgba(239, 206, 90, .01)",
},
],
false
),
},
},
data: [18, 20, 23, 25, 16, 17],
},
],
};
myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
});
this.doubleBarTimer = setInterval(() => {
myChart.clear();
myChart.setOption(option);
}, 3500);
},
},
destroyed() {
//清除定时器
clearInterval(this.doubleBarTimer);
this.barlineChartTimer = null;
},
};
</script>
<style lang="scss" scoped>
#barline-chart {
width: 500px;
height: 500px;
}
</style>