一、成果样式
二、代码配置
数据内容
cdata: {
category: [
"50",
"31",
"42",
"33",
"54",
"55",
"56",
"57",
"58",
"59",
"60",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
],
lineData: [
18092, 20728, 24045, 28348, 32808, 36097, 39867, 44715, 48444, 50415,
56061, 62677, 59521, 67560, 18092, 20728, 24045, 28348, 32808, 36097,
39867, 44715, 48444, 50415, 36097, 39867, 44715, 48444, 50415, 50061,
32677,
],
xData: [
"00.00",
"01.00",
"02.00",
"03.00",
"04.00",
"05.00",
"06.00",
"07.00",
"08.00",
"09.00",
"10.00",
"11.00",
"12.00",
],
barData: ["20.000", "40.000", "60.000", "80.000", "100.000"],
rateData: [],
},
};
},
echarts配置:
<template>
<div>
<!-- 年度开工率 -->
<Echart
:options="options"
id="bottomLeftChart"
height="198px"
width="100%"
></Echart>
</div>
</template>
<script>
import Echart from "@/common/echart";
export default {
data() {
return {
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({}),
},
},
watch: {
cdata: {
handler(newData) {
this.options = {
title: {
text: "",
},
// 图例提示框,默认不显示
tooltip: {
//数据项 图形触发
trigger: "axis",
backgroundColor: "rgba(255,255,255,0.1)",
//提示的内容
axisPointer: {
type: "shadow",
label: {
show: true, //是否显示坐标轴指示器的文本标签
backgroundColor: "rgba(37, 247, 238, 0.5)",
},
},
},
legend: {
type: "plain",
// 图例内容
data: [ "计划贯通"],
//图例内容样式
textStyle: {
color: "#B4B4B4",
},
top: "5%",
},
//gird区域内容显示区域,直角坐标系内绘图网格
grid: {
x: "16%",
width: "76%",
y: "20%",
},
//x轴
xAxis: {
type: "category",
// minInterval: 1,
// type:'value',
// 数据绑定
data: newData.xData,
// 坐标轴线
axisLine: {
lineStyle: {
color: "#f6f8fa52",
},
},
// 坐标刻度是否显示
axisTick: {
show: false,
},
//坐标轴刻度标签的相关设置
axisLabel: {
show: true,
rotate: 45,
color: "#82B2EB",
fontWeight: 400,
fontFamily: " PingFangSC-Regular, PingFang SC",
fontSize: 12,
},
},
//y轴
yAxis: {
max: "100.000",
min: "0",
name: "(亿条)",
nameLocation: "end",
nameTextStyle: {
color: "#82B2EB",
fontFamily: "PingFangSC-Regular, PingFang SC;",
fontSize: 12,
fontWeight: 400,
align: "left",
},
//分割线效果
splitLine: { show: false },
type: "value",
// 坐标轴 轴线
axisLine: {
lineStyle: {
color: "#B4B4B4",
},
},
// 坐标轴刻度标签
axisLabel: {
formatter: "{value} ",
color: "#82B2EB",
fontFamily: "HelveticaNeue",
fontSize: 12,
},
},
//内容数据
series: [
{
name: "计划贯通",
type: "bar",
barGap: "-100%",//不同系列的柱间距问题
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: [7, 7, 0, 0],
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(37, 247, 238, 1)" },
{ offset: 0.83, color: "rgba(15, 67, 98, 0.52)" },
{ offset: 1, color: "rgba(0, 2, 31, 0.35)" },
]),
},
},
z: -12,
data: newData.category,
},
],
};
},
immediate: true,
deep: true,
},
},
};
</script>