图片样式：
代码实现：
javascript
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
require("echarts/theme/sakura"); // echarts theme
export default {
props: {
className: {
type: String,
default: "chart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "100%",
},
},
components: {},
data() {
return {
chart: null,
};
},
watch: {},
created() {},
mounted() {
this.initChart();
},
computed: {},
methods: {
initChart() {
//组织数据
let setData = function (data, constData, showData) {
data.filter(function (item) {
if (item) {
constData.push(1);
showData.push(item);
} else {
constData.push(0);
showData.push({
value: 1,
itemStyle: {
normal: {
borderColor: "rgba(0,0,0,0)",
borderWidth: 2,
color: "rgba(0,0,0,0)",
},
},
});
}
});
};
//组织颜色
let setColor = function (colorArr) {
let color = {
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
/* 此处决定阴暗面 若为横向柱状图则x,y轴调换
x: 0,
x2: 0,
y: 0,
y2: 1, */
colorStops: [
{
offset: 0,
color: colorArr[0],
},
{
offset: 0.5,
color: colorArr[0],
},
{
offset: 0.5,
color: colorArr[1],
},
{
offset: 1,
color: colorArr[1],
},
],
};
return color;
};
var vehicle = [20, 49, 70, 232, 256];
var controlBall = [2.6, 5.9, 9.0, 20.4, 21.7];
var barWidth = 30;
var constData1 = [];
var showData1 = [];
var constData2 = [];
var showData2 = [];
setData(vehicle, constData1, showData1);
setData(controlBall, constData2, showData2);
var colorArr1 = ["#345A8B", "#387ABD", "#51C0DB"];
var colorArr2 = ["#51C0DB", "#42D9D6", "#45F5F1"];
var color1 = setColor(colorArr1);
var color2 = setColor(colorArr2);
this.chart = this.$echarts.init(this.$el, "sakura");
this.chart.setOption({
title: {
x: "center",
y: 4,
text: "AAAA",
textStyle: {
color: "#fff",
fontSize: "15",
fontFamily: "微软雅黑",
fontWeight: "bold",
},
},
tooltip: {
trigger: "axis",
backgroundColor: "rgba(255,255,255,0.7)",
textStyle: {
color: "#000", // 自定义文字颜色
fontSize: 16, // 自定义文字大小
},
},
grid: {
y: 80,
y2: 40,
x: 40,
x2: 50,
},
legend: {
data: ["数量", "时间（天）"],
x: "center",
top: "10%",
itemWidth: 20,
itemHeight: 9,
textStyle: {
fontSize: 11,
color: "#fff",
},
},
toolbox: {
show: false,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ["line", "bar"] },
restore: { show: true },
saveAsImage: { show: true },
},
},
calculable: true,
xAxis: [
{
type: "category",
data: ["曲靖", "玉溪", "大理", "昆明", "瑞丽"],
boundaryGap: true, //控制x轴的数值是否顶头，默认为true留空，false则顶头
axisLine: {
//x轴的样式控制
show: true, //显示与否
lineStyle: {
//线条样式
// color: "#fff",
width: 1,
// type: "solid",
},
},
axisLabel: {
//控制x轴上的文字的样式
show: true, //显示与否
textStyle: { color: "#fff", fontSize: 12 }, //控制x轴字体样式
// formatter: "{value} °C", //轴上的数据带单位
interval: 0,
},
},
],
yAxis: [
{
type: "value",
axisLabel: {
//控制y轴上的文字的样式
show: true, //显示与否
textStyle: { color: "#fff", fontSize: 9 }, //控制x轴字体样式
// margin: 5,
},
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: "#22376d",
},
},
},
],
series: [
{
z: 1,
type: "bar",
name: "数量",
barGap: "15%", //相邻柱子间距
itemStyle: {
borderRadius: [0, 0, 0, 0], //柱子四周圆角
color: color1, //柱子左右颜色（深，浅）
},
label: {
show: true,
position: "top",
textStyle:{
color:"#fff"
}
},
data: vehicle,
},
// ---------------------------------------------
{
z: 2,
name: "数量",
type: "pictorialBar",
data: constData1, //此数据对应底部组件
symbol: "diamond", //底部组件形状，不写默认为椭圆
symbolOffset: ["-58%", "50%"], //与柱子的偏移角度
symbolSize: [21, 10], //底面[宽，高]
itemStyle: {
normal: {
color: color1, //底面左右颜色（深，浅）
},
},
tooltip: {
show: false,
},
},
{
z: 3,
name: "数量",
type: "pictorialBar",
symbolPosition: "end",
data: showData1, //此数据对应顶部组件
symbol: "diamond",
symbolOffset: ["-50%", "-47%"],
symbolSize: [barWidth - 7, (10 * (barWidth - 7)) / barWidth],
itemStyle: {
normal: {
/* borderColor: colorArr1[2],
borderWidth: 2, */ //加上棱角分明
color: colorArr1[2],
},
},
tooltip: {
show: false,
},
},
{
z: 1,
type: "bar",
name: "时间（天）",
itemStyle: {
borderRadius: [0, 0, 0, 0],
color: color2,
},
data: controlBall,
},
{
z: 2,
name: "时间（天）",
type: "pictorialBar",
data: constData2,
symbol: "diamond",
symbolOffset: ["50%", "40%"],
symbolSize: [25, 10],
itemStyle: {
normal: {
color: color2,
},
},
tooltip: {
show: false,
},
},
{
z: 3,
name: "时间（天）",
type: "pictorialBar",
symbolPosition: "end",
data: showData2,
symbol: "diamond",
symbolOffset: ["55%", "-50%"],
symbolSize: [barWidth - 7, (10 * (barWidth - 7)) / barWidth],
itemStyle: {
normal: {
/* borderColor: colorArr2[2],
borderWidth: 2, */
color: colorArr2[2],
},
},
tooltip: {
show: false,
},
},
],
});
},
},
};
</script>
<style lang='scss' scoped>
</style>